/* FatwaAI social shell v1
   Keeps the existing worship dashboard and adds Home / Explore / Ask / Profile. */
:root {
  --social-bg: #00100d;
  --social-bg-2: #001a14;
  --social-panel: #052219;
  --social-panel-2: #08291f;
  --social-line: rgba(53, 221, 137, .19);
  --social-line-strong: rgba(53, 221, 137, .34);
  --social-text: #f5f8f6;
  --social-muted: #9fb0aa;
  --social-green: #35dd89;
  --social-green-2: #70e7aa;
  --social-nav-h: 88px;
  --social-top-h: 76px;
}

html body.fatwa-social-shell {
  background: #000b08 !important;
  overflow: hidden !important;
}

html body.fatwa-social-shell #app-shell {
  width: min(941px, 100%) !important;
  max-width: 941px !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  margin: 0 auto !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(53, 221, 137, .07), transparent 32%),
    linear-gradient(180deg, #00110d 0%, #000b08 100%) !important;
}

/* ---------- Top bar ---------- */
html body.fatwa-social-shell:not(.fatwa-chat-open) .topbar {
  display: flex !important;
  position: relative !important;
  z-index: 9200 !important;
  height: var(--social-top-h) !important;
  min-height: var(--social-top-h) !important;
  max-height: var(--social-top-h) !important;
  padding: calc(10px + env(safe-area-inset-top) * .25) 16px 10px !important;
  background: rgba(0, 16, 13, .94) !important;
  border-bottom: 1px solid rgba(53, 221, 137, .10) !important;
  backdrop-filter: blur(18px) !important;
}

body.fatwa-social-shell .topbar-brand-name {
  color: #f2f7f4 !important;
  font-size: clamp(23px, 5vw, 31px) !important;
  letter-spacing: -.6px !important;
}
body.fatwa-social-shell .topbar-brand-name span { color: var(--social-green) !important; }
body.fatwa-social-shell #topbar-label {
  display: block !important;
  margin-top: 1px !important;
  color: var(--social-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
body.fatwa-social-shell #open-sidebar-button {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
  border-radius: 13px !important;
  background: rgba(6, 38, 28, .9) !important;
  border-color: var(--social-line) !important;
}
body.fatwa-social-shell .top-action-button,
body.fatwa-social-shell .top-language-control {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: rgba(6, 38, 28, .9) !important;
  border-color: var(--social-line) !important;
}

/* ---------- Main viewport ---------- */
html body.fatwa-social-shell:not(.fatwa-chat-open):not(.fatwa-chats-open) #content-scroller {
  display: block !important;
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100dvh - var(--social-top-h) - var(--social-nav-h)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

html body.fatwa-social-shell:not(.fatwa-chat-open):not(.fatwa-chats-open) #content-scroller > .content-inner {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.fatwa-social-shell .fatwa-social-screen[hidden] {
  display: none !important;
}

body.fatwa-social-shell .fatwa-social-screen {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ---------- Shared page headings ---------- */
.social-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
}
.social-page-head > div { min-width: 0; }
.social-page-head strong {
  display: block;
  color: var(--social-text);
  font-size: 24px;
  line-height: 1.15;
}
.social-page-head span {
  display: block;
  margin-top: 4px;
  color: var(--social-muted);
  font-size: 12px;
  line-height: 1.5;
}
.social-live-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--social-green);
  box-shadow: 0 0 0 5px rgba(53, 221, 137, .08);
}

/* ---------- Home / Following feed ---------- */
.social-feed-screen {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding-bottom: 10px !important;
}
.social-page-head-feed { flex: 0 0 auto; }
.social-feed-stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 12px;
}
.social-feed-post {
  height: 100%;
  min-height: 430px;
  max-height: 760px;
  border: 1px solid var(--social-line);
  border-radius: 24px;
  overflow: hidden;
  background: #041711;
  box-shadow: 0 24px 50px rgba(0,0,0,.22);
}
.social-feed-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.05) 45%, rgba(0,0,0,.76) 100%),
    url('/static/home/prayer_mosque.png') center / cover no-repeat;
}
.social-feed-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 18%, rgba(53,221,137,.08), transparent 28%);
  pointer-events: none;
}
.social-feed-user {
  position: absolute;
  z-index: 2;
  top: 16px;
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.social-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,33,24,.88);
  color: #77efaf;
  font-weight: 900;
}
.social-feed-user strong { display: block; font-size: 14px; }
.social-feed-user span { display: block; margin-top: 1px; font-size: 10px; opacity: .78; }
.social-center-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(0,0,0,.34);
  color: #fff;
  font-size: 22px;
  backdrop-filter: blur(8px);
}
.social-feed-actions {
  position: absolute;
  z-index: 2;
  inset-inline-end: 12px;
  bottom: 78px;
  display: grid;
  gap: 10px;
}
.social-feed-actions button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.19);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 22px;
  backdrop-filter: blur(7px);
}
.social-feed-caption {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 72px;
  bottom: 16px;
  color: #fff;
  font-size: 12px;
  line-height: 1.65;
  text-shadow: 0 1px 7px rgba(0,0,0,.62);
}
.social-feed-empty-note {
  flex: 0 0 auto;
  padding: 8px 18px 2px;
  color: #738a80;
  font-size: 10px;
  text-align: center;
}

/* ---------- Explore ---------- */
.social-explore-search {
  height: 48px;
  margin: 2px 16px 10px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--social-line);
  border-radius: 15px;
  background: rgba(5,34,25,.82);
  color: #77b89a;
}
.social-explore-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--social-text);
  font: inherit;
}
.social-explore-search input::placeholder { color: #71857d; }
.social-explore-chips {
  display: flex;
  gap: 7px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.social-explore-chips::-webkit-scrollbar { display: none; }
.social-explore-chips button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--social-line);
  border-radius: 999px;
  background: rgba(5,34,25,.72);
  color: #b8c8c2;
  font: inherit;
  font-size: 11px;
}
.social-explore-chips button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #35dd89, #69e7a6);
  color: #032017;
  font-weight: 800;
}
.social-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  padding: 0 12px 18px;
}
.social-explore-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: .82;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--social-line);
  border-radius: 17px;
  background: #061b14;
  color: #fff;
}
.social-explore-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.78));
}
.social-explore-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-explore-tile span {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: start;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.social-explore-tile small {
  position: absolute;
  z-index: 2;
  top: 9px;
  inset-inline-end: 9px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.36);
  font-size: 9px;
}

/* ---------- Existing dashboard becomes Worship ---------- */
html body.fatwa-social-shell #dashboard {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  padding: 12px 12px 20px !important;
  overflow: visible !important;
}
html body.fatwa-social-shell #dashboard .fatwa-home-grid {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
  overflow: visible !important;
}
html body.fatwa-social-shell #dashboard .hero-home-banner,
html body.fatwa-social-shell #dashboard .home-prayer-card,
html body.fatwa-social-shell #dashboard .home-quran-card,
html body.fatwa-social-shell #dashboard .home-dua-card,
html body.fatwa-social-shell #dashboard .home-stories-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-row: auto !important;
}
html body.fatwa-social-shell #dashboard .hero-home-banner,
html body.fatwa-social-shell #dashboard .home-prayer-card,
html body.fatwa-social-shell #dashboard .home-stories-card {
  grid-column: 1 / -1 !important;
}
html body.fatwa-social-shell #dashboard .home-quran-card { grid-column: 1 !important; }
html body.fatwa-social-shell #dashboard .home-dua-card { grid-column: 2 !important; }

html body.fatwa-social-shell #dashboard .hero-home-banner {
  min-height: 106px !important;
}
html body.fatwa-social-shell #dashboard .home-prayer-card {
  min-height: 300px !important;
  padding: 14px !important;
}
html body.fatwa-social-shell #dashboard .home-quran-card,
html body.fatwa-social-shell #dashboard .home-dua-card {
  min-height: 190px !important;
  padding: 12px !important;
}
html body.fatwa-social-shell #dashboard .feature-head {
  min-height: 36px !important;
}
html body.fatwa-social-shell #dashboard .feature-title {
  font-size: clamp(16px, 4vw, 21px) !important;
}
html body.fatwa-social-shell #dashboard .feature-action {
  width: 100% !important;
  min-height: 44px !important;
  margin: 8px 0 0 !important;
  font-size: 13px !important;
}
html body.fatwa-social-shell #dashboard .home-prayer-summary {
  min-height: 120px !important;
  height: 120px !important;
  margin: 6px 0 !important;
}
html body.fatwa-social-shell #dashboard .prayer-mini-grid {
  margin: 8px 0 !important;
}
html body.fatwa-social-shell #dashboard .prayer-mini {
  min-height: 72px !important;
}
html body.fatwa-social-shell #dashboard .home-card-split {
  grid-template-columns: 1fr !important;
  min-height: 82px !important;
  margin: 4px 0 !important;
}
html body.fatwa-social-shell #dashboard .home-book-art {
  display: none !important;
}
html body.fatwa-social-shell #dashboard .quran-highlight--home {
  min-height: 80px !important;
}
html body.fatwa-social-shell #dashboard .dua-compact-row--home {
  min-height: 80px !important;
  margin: 6px 0 !important;
}

.social-worship-tools {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.social-worship-tool {
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--social-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 8%, rgba(53,221,137,.08), transparent 32%),
    linear-gradient(145deg, #05251c, #031811);
  color: var(--social-text);
  text-align: start;
}
.social-worship-tool-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(53,221,137,.32);
  border-radius: 15px;
  background: rgba(53,221,137,.07);
  color: var(--social-green-2);
  font-size: 25px;
}
.social-worship-tool-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-qibla-compass { font-size: 29px; transform: rotate(-35deg); }
.social-worship-tool strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}
.social-worship-tool small {
  display: block;
  margin-top: 4px;
  color: var(--social-muted);
  font-size: 9px;
  line-height: 1.45;
}

/* ---------- Profile ---------- */
#social-profile-screen { padding: 0 12px 22px; }
#social-profile-screen .social-page-head { padding-inline: 4px; }
.social-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 14px 16px;
  border: 1px solid var(--social-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(6,38,28,.95), rgba(2,25,19,.95));
}
.social-profile-avatar {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid rgba(53,221,137,.34);
  background: radial-gradient(circle at 35% 30%, #124c37, #041b13);
  color: var(--social-green-2);
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 0 0 6px rgba(53,221,137,.05);
}
.social-profile-card > strong { margin-top: 11px; font-size: 20px; }
.social-profile-card > span { color: var(--social-muted); font-size: 11px; }
.social-profile-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 13px;
}
.social-profile-stats div { text-align: center; }
.social-profile-stats div + div { border-inline-start: 1px solid rgba(255,255,255,.06); }
.social-profile-stats strong { display: block; color: var(--social-green-2); font-size: 18px; }
.social-profile-stats span { display: block; margin-top: 3px; color: var(--social-muted); font-size: 9px; }
.social-profile-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}
.social-profile-shortcuts button,
.social-profile-shortcuts a {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--social-line);
  border-radius: 17px;
  background: #052119;
  color: var(--social-text);
  text-decoration: none;
  text-align: start;
}
.social-profile-shortcuts span { color: var(--social-green-2); font-size: 24px; }
.social-profile-shortcuts strong { font-size: 12px; }
.social-profile-shortcuts small { color: var(--social-muted); }
.social-profile-menu {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--social-line);
  border-radius: 18px;
  background: #041d16;
}
.social-profile-menu button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: transparent;
  color: var(--social-text);
  text-align: start;
}
.social-profile-menu button:last-child { border-bottom: 0; }
.social-profile-menu span { color: var(--social-green-2); font-size: 18px; }
.social-profile-menu strong { font-size: 12px; }
.social-profile-menu b { color: #749087; font-size: 20px; font-weight: 400; }
.social-profile-note {
  margin: 12px 4px 0;
  color: #738b81;
  font-size: 10px;
  line-height: 1.65;
  text-align: center;
}
.social-profile-note.is-emphasized { color: var(--social-green-2); }

/* ---------- New 5-item bottom nav ---------- */
html body.fatwa-social-shell #fatwa-bottom-nav,
html body.fatwa-social-quran #fatwa-bottom-nav,
html body.fatwa-social-shell.fatwa-chat-open #fatwa-bottom-nav {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 70000 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  direction: ltr !important;
  width: min(941px, 100vw) !important;
  min-width: 0 !important;
  max-width: 941px !important;
  height: var(--social-nav-h) !important;
  min-height: var(--social-nav-h) !important;
  max-height: var(--social-nav-h) !important;
  margin: 0 !important;
  padding: 5px 5px calc(7px + env(safe-area-inset-bottom)) !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  align-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid rgba(53,221,137,.14) !important;
  border-radius: 0 !important;
  background: rgba(1, 18, 14, .985) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px) !important;
}

#fatwa-bottom-nav .social-nav-item {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #889c94 !important;
  text-decoration: none !important;
  font: inherit !important;
}
#fatwa-bottom-nav .social-nav-icon-shell {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  color: inherit !important;
}
#fatwa-bottom-nav .social-nav-icon-shell svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#fatwa-bottom-nav .social-nav-item small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}
#fatwa-bottom-nav .social-nav-item.active { color: var(--social-green) !important; }
#fatwa-bottom-nav .social-nav-ask .social-nav-icon-shell {
  width: 47px !important;
  height: 47px !important;
  margin-top: -17px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(164,255,207,.22) !important;
  background: linear-gradient(145deg, #4ae79d, #24ca77) !important;
  color: #042017 !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.28), 0 0 0 5px rgba(4,40,28,.78) !important;
}
#fatwa-bottom-nav .social-nav-ask .social-nav-icon-shell svg {
  width: 27px !important;
  height: 27px !important;
  stroke-width: 1.85 !important;
}
#fatwa-bottom-nav .social-nav-ask small { margin-top: -3px !important; }
#fatwa-bottom-nav .social-nav-ask.active .social-nav-icon-shell {
  box-shadow: 0 6px 20px rgba(0,0,0,.30), 0 0 0 6px rgba(53,221,137,.14) !important;
}

/* The new nav replaces the old floating ask button. */
html body.fatwa-social-shell #fatwa-chat-fab { display: none !important; }

/* ---------- Chat with bottom nav kept visible ---------- */
html body.fatwa-social-shell.fatwa-chat-open #fatwa-bottom-nav {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html body.fatwa-social-shell.fatwa-chat-open:not(.fatwa-keyboard-active) #chat-panel {
  height: calc(var(--fatwa-chat-panel-height, calc(100dvh - 78px)) - var(--social-nav-h)) !important;
}
html body.fatwa-social-shell.fatwa-chat-open:not(.fatwa-keyboard-active) .composer {
  transform: translateY(calc(-1 * var(--social-nav-h))) !important;
}
html body.fatwa-social-shell.fatwa-chat-open.fatwa-keyboard-active #fatwa-bottom-nav {
  display: none !important;
}
html body.fatwa-social-shell.fatwa-chat-open.fatwa-keyboard-active #chat-panel {
  height: var(--fatwa-chat-panel-height, calc(100dvh - 78px)) !important;
}
html body.fatwa-social-shell.fatwa-chat-open.fatwa-keyboard-active .composer {
  transform: none !important;
}

/* ---------- Qibla modal ---------- */
.social-qibla-modal[hidden] { display: none !important; }
.social-qibla-modal {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,8,6,.76);
  backdrop-filter: blur(10px);
}
.social-qibla-dialog {
  width: min(420px, 100%);
  padding: 16px;
  border: 1px solid var(--social-line-strong);
  border-radius: 24px;
  background: linear-gradient(150deg, #06271d, #02140f);
  color: var(--social-text);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.social-qibla-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.social-qibla-head strong { font-size: 18px; }
.social-qibla-head button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--social-line);
  border-radius: 12px;
  background: rgba(53,221,137,.07);
  color: #fff;
  font-size: 22px;
}
.social-qibla-compass-wrap { display: grid; place-items: center; padding: 24px 0 16px; }
.social-qibla-ring {
  position: relative;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(53,221,137,.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(53,221,137,.10), transparent 55%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.10) 0deg 1deg, transparent 1deg 15deg);
  box-shadow: inset 0 0 0 18px rgba(0,0,0,.12), 0 0 0 7px rgba(53,221,137,.035);
}
.social-qibla-north {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  color: var(--social-green-2);
  font-weight: 800;
}
.social-qibla-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 40px;
  margin-left: -43px;
  margin-top: -20px;
  display: grid;
  place-items: center;
  color: #7ff0b4;
  font-size: 55px;
  line-height: 1;
  transform-origin: 50% 50%;
  transition: transform .18s ease-out;
  text-shadow: 0 0 18px rgba(53,221,137,.25);
}
.social-qibla-kaaba {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #f1d98c;
  font-size: 19px;
}
.social-qibla-bearing {
  display: block;
  text-align: center;
  color: var(--social-green-2);
  font-size: 16px;
}
#social-qibla-status {
  margin: 9px 4px 1px;
  color: var(--social-muted);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}
#social-qibla-status.error { color: #ff9b9b; }

/* ---------- Quran page: same navigation language ---------- */
html body.fatwa-social-quran {
  padding-bottom: calc(var(--social-nav-h) + env(safe-area-inset-bottom)) !important;
}
html body.fatwa-social-quran #fatwa-bottom-nav {
  --social-nav-h: 88px;
}
html body.fatwa-social-quran #fatwa-bottom-nav .social-nav-item.active { color: var(--social-green) !important; }

/* ---------- Small phones ---------- */
@media (max-width: 700px) {
  :root {
    --social-top-h: 72px;
    --social-nav-h: 82px;
  }
  html body.fatwa-social-shell:not(.fatwa-chat-open) .topbar {
    padding-inline: 12px !important;
  }
  body.fatwa-social-shell #open-sidebar-button,
  body.fatwa-social-shell .top-action-button,
  body.fatwa-social-shell .top-language-control {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }
  body.fatwa-social-shell .topbar-brand-name { font-size: 25px !important; }
  .social-page-head { padding: 12px 13px 9px; }
  .social-page-head strong { font-size: 21px; }
  .social-page-head span { font-size: 10px; }

  .social-feed-stage { padding: 0 8px; }
  .social-feed-post { min-height: 390px; border-radius: 20px; }
  .social-feed-actions { inset-inline-end: 9px; bottom: 72px; }
  .social-feed-actions button { width: 40px; height: 40px; font-size: 19px; }
  .social-feed-caption { left: 12px; right: 62px; bottom: 12px; font-size: 10px; }

  .social-explore-search { margin-inline: 12px; }
  .social-explore-chips { padding-inline: 12px; }
  .social-explore-grid { padding-inline: 8px; gap: 6px; }
  .social-explore-tile { border-radius: 15px; }

  html body.fatwa-social-shell #dashboard {
    padding: 8px 8px 16px !important;
  }
  html body.fatwa-social-shell #dashboard .fatwa-home-grid {
    gap: 7px !important;
  }
  html body.fatwa-social-shell #dashboard .hero-home-banner {
    min-height: 96px !important;
  }
  html body.fatwa-social-shell #dashboard .home-prayer-card {
    min-height: 285px !important;
    padding: 10px !important;
  }
  html body.fatwa-social-shell #dashboard .home-quran-card,
  html body.fatwa-social-shell #dashboard .home-dua-card {
    min-height: 170px !important;
    padding: 9px !important;
  }
  html body.fatwa-social-shell #dashboard .feature-title { font-size: 15px !important; }
  html body.fatwa-social-shell #dashboard .feature-symbol {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    font-size: 14px !important;
  }
  html body.fatwa-social-shell #dashboard .home-prayer-summary {
    min-height: 110px !important;
    height: 110px !important;
  }
  html body.fatwa-social-shell #dashboard .prayer-next-name { font-size: 22px !important; }
  html body.fatwa-social-shell #dashboard .prayer-next-countdown { font-size: 16px !important; }
  html body.fatwa-social-shell #dashboard .prayer-mini { min-height: 66px !important; }
  html body.fatwa-social-shell #dashboard .prayer-mini span:not(.prayer-mini-icon) { font-size: 8px !important; }
  html body.fatwa-social-shell #dashboard .prayer-mini strong { font-size: 13px !important; }
  html body.fatwa-social-shell #dashboard .feature-action { min-height: 40px !important; font-size: 11px !important; }
  html body.fatwa-social-shell #dashboard .quran-highlight--home strong { font-size: 17px !important; }
  html body.fatwa-social-shell #dashboard #quran-card-note,
  html body.fatwa-social-shell #dashboard .dua-copy span { font-size: 8px !important; }

  .social-worship-tools { gap: 7px; }
  .social-worship-tool { min-height: 96px; gap: 8px; padding: 9px; border-radius: 15px; }
  .social-worship-tool-icon { width: 39px; height: 39px; flex-basis: 39px; border-radius: 12px; }
  .social-worship-tool-icon svg { width: 22px; height: 22px; }
  .social-worship-tool strong { font-size: 11px; }
  .social-worship-tool small { font-size: 7.5px; }

  #social-profile-screen { padding-inline: 8px; }
  .social-profile-card { padding-top: 16px; }
  .social-profile-avatar { width: 72px; height: 72px; font-size: 29px; }
  .social-profile-shortcuts { gap: 7px; }
  .social-profile-shortcuts button,
  .social-profile-shortcuts a { min-height: 76px; padding: 9px; }

  #fatwa-bottom-nav .social-nav-item small { font-size: 9px !important; }
  #fatwa-bottom-nav .social-nav-icon-shell { width: 29px !important; height: 29px !important; }
  #fatwa-bottom-nav .social-nav-icon-shell svg { width: 23px !important; height: 23px !important; }
  #fatwa-bottom-nav .social-nav-ask .social-nav-icon-shell {
    width: 44px !important;
    height: 44px !important;
    margin-top: -15px !important;
  }
}

@media (min-width: 701px) {
  .social-explore-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .social-feed-post { min-height: 640px; }
}


/* FATWAAI_SOCIAL_DESIGN_V4_START */

/* =========================================
   SOCIAL PAGES — remove old large app header
   ========================================= */

html body.fatwa-social-shell:not(.fatwa-chat-open):not(.fatwa-chats-open) .topbar {
    display: none !important;
}

html body.fatwa-social-shell:not(.fatwa-chat-open):not(.fatwa-chats-open) #content-scroller {
    height: calc(100dvh - var(--social-nav-h)) !important;
    min-height: 0 !important;
}

/* =========================================
   HOME / FOLLOWING
   ========================================= */

body.fatwa-social-shell #social-home-screen {
    width: min(430px, 100%) !important;
    max-width: 430px !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
}

/* Following title directly above Reel */
body.fatwa-social-shell #social-home-screen .social-page-head {
    min-height: 58px !important;
    padding: 14px 12px 10px !important;
}

body.fatwa-social-shell #social-home-screen .social-page-head > div {
    width: 100% !important;
}

body.fatwa-social-shell #social-home-screen .social-page-head strong {
    font-size: 20px !important;
    font-weight: 800 !important;
}

body.fatwa-social-shell #social-home-screen .social-page-head span {
    display: none !important;
}

body.fatwa-social-shell #social-home-screen .social-live-dot {
    display: none !important;
}

/* Reel uses remaining vertical space */
body.fatwa-social-shell #social-home-screen .social-feed-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 8px !important;
}

body.fatwa-social-shell #social-home-screen .social-feed-post {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    max-height: none !important;
    border-radius: 22px !important;
    margin: 0 !important;
}

/* Stronger Reel image */
body.fatwa-social-shell #social-home-screen .social-feed-media {
    height: 100% !important;
    min-height: 100% !important;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 0%,
            rgba(0,0,0,.02) 45%,
            rgba(0,0,0,.76) 100%
        ),
        url('/static/home/prayer_mosque.png')
        center / cover no-repeat !important;
}

/* Creator: physical upper-right */
body.fatwa-social-shell #social-home-screen .social-feed-user {
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
}

/* Reel actions: PHYSICAL RIGHT even in Arabic RTL */
body.fatwa-social-shell #social-home-screen .social-feed-actions {
    right: 12px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    bottom: 82px !important;
    gap: 9px !important;
}

body.fatwa-social-shell #social-home-screen .social-feed-actions button {
    width: 43px !important;
    height: 43px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.38) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}

/* Caption beside right-side controls */
body.fatwa-social-shell #social-home-screen .social-feed-caption {
    right: 68px !important;
    left: 15px !important;
    bottom: 17px !important;
    text-align: right !important;
    font-size: 12px !important;
}

/* remove temporary development message */
body.fatwa-social-shell #social-home-screen .social-feed-empty-note {
    display: none !important;
}

/* Play button slightly cleaner */
body.fatwa-social-shell #social-home-screen .social-center-play {
    width: 54px !important;
    height: 54px !important;
    background: rgba(0,0,0,.35) !important;
}

/* bottom nav always on top */
html body.fatwa-social-shell #fatwa-bottom-nav {
    z-index: 99999 !important;
}

/* Phone */
@media (max-width: 700px) {
    body.fatwa-social-shell #social-home-screen {
        width: 100% !important;
        max-width: none !important;
    }

    body.fatwa-social-shell #social-home-screen .social-feed-post {
        min-height: 0 !important;
    }
}

/* FATWAAI_SOCIAL_DESIGN_V4_END */


/* FATWAAI_SOCIAL_CLEAN_FIX_V5_START */

/* Hidden screens must stay hidden even against old #dashboard rules */
html body.fatwa-social-shell #dashboard[hidden],
html body.fatwa-social-shell #social-home-screen[hidden],
html body.fatwa-social-shell #social-explore-screen[hidden],
html body.fatwa-social-shell #social-profile-screen[hidden],
html body.fatwa-social-shell .fatwa-social-screen[hidden] {
    display: none !important;
}

/* Reel image */
html body.fatwa-social-shell .social-feed-media {
    position: relative !important;
    overflow: hidden !important;
    background: #03130f !important;
}

html body.fatwa-social-shell .social-feed-image {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: 1 !important;
    pointer-events: none !important;
}

html body.fatwa-social-shell .social-feed-shade {
    z-index: 1 !important;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.03) 52%,
            rgba(0,0,0,.72) 100%
        ) !important;
}

/* Everything interactive above the image */
html body.fatwa-social-shell .social-feed-user,
html body.fatwa-social-shell .social-center-play,
html body.fatwa-social-shell .social-feed-actions,
html body.fatwa-social-shell .social-feed-caption {
    z-index: 3 !important;
}

/* Physical right side regardless of Arabic RTL */
html body.fatwa-social-shell .social-feed-actions {
    right: 12px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
}

/* Home only fills available app area */
html body.fatwa-social-shell #social-home-screen {
    height: calc(100dvh - var(--social-nav-h, 84px)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.fatwa-social-shell #social-home-screen .social-feed-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

html body.fatwa-social-shell #social-home-screen .social-feed-post {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* FATWAAI_SOCIAL_CLEAN_FIX_V5_END */


/* FATWAAI_HOME_REEL_FINAL_START */

html body.fatwa-social-shell #social-home-screen {
    width: min(455px, 100%) !important;
    max-width: 455px !important;
    padding: 0 !important;
    background: #00120d !important;
}

/* Header */
html body.fatwa-social-shell
#social-home-screen .social-page-head {
    height: 55px !important;
    min-height: 55px !important;
    padding: 12px 16px 8px !important;
    background: #00120d !important;
    border: 0 !important;
}

html body.fatwa-social-shell
#social-home-screen .social-page-head strong {
    display: block !important;
    width: 100% !important;
    font-size: 19px !important;
    text-align: right !important;
    color: #fff !important;
}

/* Reel container */
html body.fatwa-social-shell
#social-home-screen .social-feed-stage {
    padding: 0 !important;
}

/* Video */
html body.fatwa-social-shell
#social-home-screen .social-feed-post {
    border-radius: 20px !important;
    border: 1px solid rgba(53,213,138,.27) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body.fatwa-social-shell
#social-home-screen .social-feed-image {
    object-fit: cover !important;
    object-position: 50% 50% !important;
}

/* Creator */
html body.fatwa-social-shell
#social-home-screen .social-feed-user {
    top: 16px !important;
    right: 14px !important;
    flex-direction: row !important;
    gap: 9px !important;
}

html body.fatwa-social-shell
#social-home-screen .social-feed-user strong {
    font-size: 12px !important;
}

html body.fatwa-social-shell
#social-home-screen .social-feed-user small {
    font-size: 9px !important;
    opacity: .78 !important;
}

/* Center play */
html body.fatwa-social-shell
#social-home-screen .social-center-play {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.28) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    backdrop-filter: blur(6px) !important;
}

/* Action rail */
html body.fatwa-social-shell
#social-home-screen .social-feed-actions {
    right: 12px !important;
    left: auto !important;
    bottom: 92px !important;
    gap: 10px !important;
}

html body.fatwa-social-shell
#social-home-screen .social-feed-actions button {
    width: 43px !important;
    height: 43px !important;
    border-radius: 50% !important;

    display: grid !important;
    place-items: center !important;

    color: #fff !important;
    background: rgba(0,0,0,.34) !important;
    border: 1px solid rgba(255,255,255,.28) !important;

    backdrop-filter: blur(8px) !important;
}

/* Caption */
html body.fatwa-social-shell
#social-home-screen .social-feed-caption {
    right: 70px !important;
    left: 18px !important;
    bottom: 20px !important;

    padding: 0 !important;

    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    text-align: right !important;
}

/* dark gradient only where text needs it */
html body.fatwa-social-shell
#social-home-screen .social-feed-shade {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,0) 38%,
            rgba(0,0,0,.08) 58%,
            rgba(0,0,0,.82) 100%
        ) !important;
}

/* Keep navigation visually separated */
html body.fatwa-social-shell #fatwa-bottom-nav {
    border-top:
        1px solid rgba(53,213,138,.18) !important;

    background:
        rgba(0,20,14,.98) !important;
}

/* desktop */
@media (min-width: 701px) {
    html body.fatwa-social-shell
    #social-home-screen {
        padding: 0 5px 4px !important;
    }
}

/* phone */
@media (max-width: 700px) {
    html body.fatwa-social-shell
    #social-home-screen {
        width: 100% !important;
        max-width: none !important;
    }

    html body.fatwa-social-shell
    #social-home-screen .social-feed-post {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

/* FATWAAI_HOME_REEL_FINAL_END */


/* FATWAAI_EXPLORE_V1_START */

html body.fatwa-social-shell #social-explore-screen {
    width: min(455px, 100%) !important;
    max-width: 455px !important;
    height: calc(100dvh - var(--social-nav-h, 84px)) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #00120d !important;
    scrollbar-width: none !important;
}

html body.fatwa-social-shell
#social-explore-screen::-webkit-scrollbar {
    display: none !important;
}

/* Header */
html body.fatwa-social-shell
#social-explore-screen .social-page-head {
    min-height: 62px !important;
    padding: 12px 14px 6px !important;
    background: #00120d !important;
    border: 0 !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-page-head strong {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #fff !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-page-head span {
    display: block !important;
    margin-top: 2px !important;
    font-size: 10px !important;
    color: #83988f !important;
}

/* Search */
html body.fatwa-social-shell
#social-explore-screen .social-explore-search {
    height: 44px !important;

    margin: 0 12px 9px !important;
    padding: 0 12px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(53,213,138,.22) !important;

    background: rgba(5,34,25,.72) !important;

    color: #68daa0 !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-explore-search input {
    font-size: 12px !important;
}

/* Chips */
html body.fatwa-social-shell
#social-explore-screen .social-explore-chips {
    gap: 6px !important;
    padding: 0 12px 10px !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-explore-chips button {
    min-height: 31px !important;

    padding: 5px 11px !important;

    border-radius: 999px !important;

    font-size: 10px !important;

    background: rgba(6,31,23,.84) !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-explore-chips button.active {
    background:
        linear-gradient(
            135deg,
            #35dd89,
            #70e9ac
        ) !important;

    color: #032017 !important;
}

/* 2-column Reels discovery */
html body.fatwa-social-shell
#social-explore-screen .social-explore-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;

    padding: 0 8px 22px !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-explore-tile {
    position: relative !important;

    width: 100% !important;
    aspect-ratio: .76 !important;

    overflow: hidden !important;

    padding: 0 !important;

    border-radius: 16px !important;

    border:
        1px solid
        rgba(53,213,138,.19) !important;

    background: #031a13 !important;

    box-shadow: none !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-explore-tile::after {
    content: "" !important;

    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 35%,
            rgba(0,0,0,.08) 55%,
            rgba(0,0,0,.82) 100%
        ) !important;
}

html body.fatwa-social-shell
#social-explore-screen .social-explore-tile img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transform: scale(1.015) !important;
}

/* Video title */
html body.fatwa-social-shell
#social-explore-screen .social-explore-tile span {
    position: absolute !important;
    z-index: 3 !important;

    right: 9px !important;
    left: 9px !important;
    bottom: 27px !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;

    color: #fff !important;
    text-align: right !important;

    text-shadow:
        0 2px 7px rgba(0,0,0,.72) !important;
}

/* Views */
html body.fatwa-social-shell
#social-explore-screen .social-explore-tile small {
    position: absolute !important;
    z-index: 3 !important;

    left: 9px !important;
    right: auto !important;
    top: auto !important;
    bottom: 8px !important;

    padding: 0 !important;

    background: transparent !important;

    color: rgba(255,255,255,.88) !important;

    font-size: 9px !important;
    font-weight: 700 !important;
}

/* touch */
html body.fatwa-social-shell
#social-explore-screen .social-explore-tile:active {
    transform: scale(.985) !important;
}

/* Phone */
@media (max-width: 700px) {
    html body.fatwa-social-shell
    #social-explore-screen {
        width: 100% !important;
        max-width: none !important;
    }
}

/* FATWAAI_EXPLORE_V1_END */



/* FATWAAI_WORSHIP_DESIGN_V1_START */

/* =========================================
   WORSHIP PAGE
   ========================================= */

html body.fatwa-social-shell #dashboard {
    width: min(455px, 100%) !important;
    max-width: 455px !important;

    height: calc(
        100dvh - var(--social-nav-h, 84px)
    ) !important;

    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 10px 22px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #00120d !important;

    scrollbar-width: none !important;
}

html body.fatwa-social-shell
#dashboard::-webkit-scrollbar {
    display: none !important;
}

/* Must remain hidden on other tabs */
html body.fatwa-social-shell
#dashboard[hidden] {
    display: none !important;
}


/* =========================================
   PAGE HEADER
   ========================================= */

html body.fatwa-social-shell
.social-worship-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;

    min-height: 65px !important;

    display: flex !important;
    align-items: center !important;

    padding: 12px 4px 8px !important;

    background:
        linear-gradient(
            180deg,
            #00120d 78%,
            rgba(0,18,13,0)
        ) !important;
}

html body.fatwa-social-shell
.social-worship-head strong {
    display: block !important;

    color: #fff !important;

    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

html body.fatwa-social-shell
.social-worship-head small {
    display: block !important;

    margin-top: 2px !important;

    color: #80978e !important;

    font-size: 10px !important;
}


/* =========================================
   REMOVE OLD HERO
   ========================================= */

html body.fatwa-social-shell
#dashboard .hero-home-banner {
    display: none !important;
}


/* =========================================
   MAIN GRID
   ========================================= */

html body.fatwa-social-shell
#dashboard .fatwa-home-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================
   COMMON CARDS
   ========================================= */

html body.fatwa-social-shell
#dashboard .feature-card--home {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 14px !important;

    border-radius: 18px !important;

    border:
        1px solid
        rgba(53,213,138,.20) !important;

    background:
        linear-gradient(
            145deg,
            rgba(5,40,29,.96),
            rgba(2,25,18,.96)
        ) !important;

    box-shadow: none !important;
}

html body.fatwa-social-shell
#dashboard .feature-head {
    margin-bottom: 10px !important;
}

html body.fatwa-social-shell
#dashboard .feature-title {
    font-size: 15px !important;
}

html body.fatwa-social-shell
#dashboard .feature-symbol {
    width: 34px !important;
    height: 34px !important;

    font-size: 16px !important;
}


/* =========================================
   PRAYER — FULL WIDTH
   ========================================= */

html body.fatwa-social-shell
#dashboard .home-prayer-card {
    grid-column: 1 / -1 !important;

    min-height: 230px !important;

    padding: 15px !important;
}

html body.fatwa-social-shell
#dashboard .home-prayer-summary {
    min-height: 112px !important;

    border-radius: 15px !important;

    margin-bottom: 10px !important;

    overflow: hidden !important;
}

html body.fatwa-social-shell
#dashboard .prayer-next-label {
    font-size: 10px !important;
}

html body.fatwa-social-shell
#dashboard .prayer-next-name {
    font-size: 24px !important;
}

html body.fatwa-social-shell
#dashboard .prayer-next-countdown {
    font-size: 14px !important;
}

html body.fatwa-social-shell
#dashboard .prayer-location-row--home {
    min-height: 38px !important;

    margin: 7px 0 !important;

    padding: 7px 9px !important;

    border-radius: 11px !important;

    font-size: 9px !important;
}

html body.fatwa-social-shell
#dashboard .prayer-main-action {
    min-height: 42px !important;

    margin-top: 7px !important;
}


/* =========================================
   QURAN + ADHKAR — TWO CARDS
   ========================================= */

html body.fatwa-social-shell
#dashboard .home-quran-card,
html body.fatwa-social-shell
#dashboard .home-dua-card {
    min-height: 185px !important;
}

html body.fatwa-social-shell
#dashboard .home-card-split {
    min-height: 80px !important;
}

html body.fatwa-social-shell
#dashboard .quran-highlight--home strong {
    font-size: 20px !important;
}

html body.fatwa-social-shell
#dashboard #quran-card-note {
    display: none !important;
}

html body.fatwa-social-shell
#dashboard .home-book-art {
    width: 70px !important;
    min-width: 70px !important;
}

html body.fatwa-social-shell
#dashboard .dua-compact-row--home {
    min-height: 83px !important;

    padding: 8px !important;

    border-radius: 13px !important;
}

html body.fatwa-social-shell
#dashboard .dua-copy strong {
    font-size: 12px !important;
}

html body.fatwa-social-shell
#dashboard .dua-copy span {
    font-size: 9px !important;
}


/* =========================================
   ACTION BUTTONS
   ========================================= */

html body.fatwa-social-shell
#dashboard .feature-action {
    min-height: 40px !important;

    padding: 8px 10px !important;

    border-radius: 11px !important;

    font-size: 11px !important;
}


/* =========================================
   MOSQUE + QIBLA
   ========================================= */

html body.fatwa-social-shell
#dashboard .social-worship-tools {
    grid-column: 1 / -1 !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

html body.fatwa-social-shell
#dashboard .social-worship-tool {
    position: relative !important;

    min-height: 138px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 11px !important;

    padding: 15px !important;

    text-align: start !important;

    border-radius: 18px !important;

    border:
        1px solid
        rgba(53,213,138,.20) !important;

    color: #fff !important;

    background:
        linear-gradient(
            145deg,
            rgba(6,42,31,.98),
            rgba(3,27,20,.98)
        ) !important;
}

html body.fatwa-social-shell
#dashboard .social-mosque-tool {
    background:
        linear-gradient(
            145deg,
            rgba(48,39,14,.72),
            rgba(20,30,20,.95)
        ) !important;
}

html body.fatwa-social-shell
#dashboard .social-qibla-tool {
    background:
        linear-gradient(
            145deg,
            rgba(13,42,45,.82),
            rgba(3,28,25,.96)
        ) !important;
}

html body.fatwa-social-shell
#dashboard .social-worship-tool-icon {
    width: 42px !important;
    height: 42px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    color: #7aefb1 !important;

    background:
        rgba(53,213,138,.09) !important;

    border:
        1px solid
        rgba(53,213,138,.30) !important;
}

html body.fatwa-social-shell
#dashboard .social-worship-tool strong {
    display: block !important;

    color: #fff !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}

html body.fatwa-social-shell
#dashboard .social-worship-tool small {
    display: block !important;

    margin-top: 4px !important;

    color: #92a99f !important;

    font-size: 9px !important;
    line-height: 1.45 !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    html body.fatwa-social-shell
    #dashboard {
        width: 100% !important;
        max-width: none !important;
    }

}

@media (max-width: 390px) {

    html body.fatwa-social-shell
    #dashboard .fatwa-home-grid {
        gap: 8px !important;
    }

    html body.fatwa-social-shell
    #dashboard .feature-card--home,
    html body.fatwa-social-shell
    #dashboard .social-worship-tool {
        padding: 11px !important;
    }

}

/* FATWAAI_WORSHIP_DESIGN_V1_END */



/* FATWAAI_ASK_DESIGN_V1_START */

/* ========================================
   ASK FATWAAI
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open {
    background: #00120d !important;
}

/* Hide social content behind Ask */
html body.fatwa-social-shell.fatwa-chat-open
#social-home-screen,
html body.fatwa-social-shell.fatwa-chat-open
#social-explore-screen,
html body.fatwa-social-shell.fatwa-chat-open
#social-profile-screen,
html body.fatwa-social-shell.fatwa-chat-open
#dashboard,
html body.fatwa-social-shell.fatwa-chat-open
.topbar,
html body.fatwa-social-shell.fatwa-chat-open
#fatwa-chat-fab {
    display: none !important;
}


/* ========================================
   CHAT PANEL
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open
#chat-panel {
    display: flex !important;
    flex-direction: column !important;

    position: fixed !important;

    top: 0 !important;
    bottom: 158px !important;

    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    width: min(455px, 100vw) !important;
    max-width: 455px !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #00120d !important;

    overflow: hidden !important;

    z-index: 50000 !important;
}


/* ========================================
   HEADER
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open
.fatwa-chat-header {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        44px 1fr 88px !important;

    align-items: center !important;

    flex: 0 0 62px !important;

    width: 100% !important;
    min-height: 62px !important;

    padding: 8px 10px !important;

    background: #00120d !important;

    border-bottom:
        1px solid
        rgba(53,213,138,.13) !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.fatwa-chat-header-title {
    text-align: center !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.fatwa-chat-header-title strong {
    display: block !important;

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.fatwa-chat-header-title small {
    display: block !important;

    margin-top: 1px !important;

    color: #49df95 !important;

    font-size: 9px !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#chat-back-button,
html body.fatwa-social-shell.fatwa-chat-open
#chat-new-button,
html body.fatwa-social-shell.fatwa-chat-open
#chat-menu-button {
    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;

    border-radius: 12px !important;

    border:
        1px solid
        rgba(53,213,138,.17) !important;

    background:
        rgba(7,40,30,.70) !important;

    color: #dff8ea !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.fatwa-chat-actions {
    display: flex !important;
    justify-content: flex-end !important;

    gap: 6px !important;
}


/* old sub-header */
html body.fatwa-social-shell.fatwa-chat-open
.chat-panel-title {
    display: none !important;
}


/* ========================================
   WELCOME
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-welcome {
    flex: 0 0 auto !important;

    width: 100% !important;

    padding: 34px 18px 12px !important;

    text-align: center !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-welcome[hidden] {
    display: none !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-logo {
    width: 70px !important;
    height: 70px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 auto 17px !important;

    border-radius: 22px !important;

    border:
        1px solid
        rgba(53,213,138,.38) !important;

    color: #56e89d !important;

    background:
        radial-gradient(
            circle,
            rgba(53,213,138,.18),
            rgba(53,213,138,.05)
        ) !important;

    box-shadow:
        0 0 32px
        rgba(53,213,138,.08) !important;

    font-size: 32px !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-copy strong {
    display: block !important;

    color: #8ef0bb !important;

    font-size: 14px !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-copy h2 {
    margin: 4px 0 8px !important;

    color: #fff !important;

    font-size: 22px !important;
    line-height: 1.4 !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-copy p {
    width: min(340px, 100%) !important;

    margin: 0 auto !important;

    color: #91a79e !important;

    font-size: 11px !important;
    line-height: 1.8 !important;
}


/* Suggested questions */
html body.fatwa-social-shell.fatwa-chat-open
.social-ask-suggestions {
    display: grid !important;

    gap: 7px !important;

    width: 100% !important;

    margin-top: 20px !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-suggestion {
    min-height: 43px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    padding: 8px 13px !important;

    border-radius: 999px !important;

    border:
        1px solid
        rgba(53,213,138,.22) !important;

    background:
        rgba(3,31,23,.68) !important;

    color: #e8f6ef !important;

    font-size: 10px !important;

    text-align: start !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.social-ask-suggestion b {
    width: 24px !important;
    height: 24px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    color: #67e9a4 !important;

    border:
        1px solid
        rgba(53,213,138,.20) !important;
}


/* ========================================
   MESSAGES
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open
#chat {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    gap: 10px !important;

    min-height: 0 !important;

    padding: 12px 12px 20px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: none !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#chat::-webkit-scrollbar {
    display: none !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#chat .message {
    max-width: 86% !important;

    padding: 11px 13px !important;

    border-radius: 17px !important;

    font-size: 12px !important;
    line-height: 1.75 !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#chat .message.user {
    background:
        rgba(18,83,59,.80) !important;

    border:
        1px solid
        rgba(78,235,157,.17) !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#chat .message.ai {
    background:
        rgba(18,34,28,.94) !important;

    border:
        1px solid
        rgba(255,255,255,.07) !important;
}


/* ========================================
   COMPOSER
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open
.composer {
    display: block !important;

    position: fixed !important;

    top: auto !important;
    bottom: var(--social-nav-h, 84px) !important;

    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    width: min(455px, 100vw) !important;
    max-width: 455px !important;

    margin: 0 !important;

    padding: 8px 10px !important;

    box-sizing: border-box !important;

    background:
        rgba(0,18,13,.98) !important;

    border-top:
        1px solid
        rgba(53,213,138,.12) !important;

    z-index: 60000 !important;
}

html body.fatwa-social-shell.fatwa-chat-open
.composer .notice {
    display: none !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#chat-form {
    width: 100% !important;
    max-width: none !important;

    min-height: 58px !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 6px !important;

    border-radius: 29px !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        #12261f !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#question {
    flex: 1 1 auto !important;

    min-width: 0 !important;
    min-height: 44px !important;
    max-height: 110px !important;

    padding: 10px 12px !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

    resize: none !important;

    font-size: 13px !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#question::placeholder {
    color: #83978f !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#send-button,
html body.fatwa-social-shell.fatwa-chat-open
#stop-button {
    flex: 0 0 46px !important;

    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;

    padding: 0 !important;

    border-radius: 50% !important;
}

html body.fatwa-social-shell.fatwa-chat-open
#send-button {
    background:
        linear-gradient(
            135deg,
            #35dd89,
            #67e9a4
        ) !important;

    color: #002217 !important;
}


/* ========================================
   BOTTOM NAV STAYS VISIBLE
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open
#fatwa-bottom-nav {
    display: grid !important;

    grid-template-columns:
        repeat(5, 1fr) !important;

    z-index: 70000 !important;
}


/* ========================================
   KEYBOARD OPEN
   ======================================== */

html body.fatwa-social-shell.fatwa-chat-open.fatwa-chat-keyboard
#fatwa-bottom-nav {
    display: none !important;
}

html body.fatwa-social-shell.fatwa-chat-open.fatwa-chat-keyboard
.composer {
    bottom: 0 !important;
}

html body.fatwa-social-shell.fatwa-chat-open.fatwa-chat-keyboard
#chat-panel {
    bottom: 74px !important;
}


/* Phone */
@media (max-width: 700px) {

    html body.fatwa-social-shell.fatwa-chat-open
    #chat-panel,
    html body.fatwa-social-shell.fatwa-chat-open
    .composer {
        width: 100vw !important;
        max-width: none !important;
    }

}

/* FATWAAI_ASK_DESIGN_V1_END */



/* FATWAAI_PROFILE_FINAL_START */

/* =========================================
   PROFILE / ACCOUNT
   ========================================= */

html body.fatwa-social-shell
#social-profile-screen {
    width: min(455px, 100%) !important;
    max-width: 455px !important;

    height: calc(
        100dvh - var(--social-nav-h, 84px)
    ) !important;

    margin: 0 auto !important;
    padding: 0 11px 24px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #00120d !important;

    scrollbar-width: none !important;
}

html body.fatwa-social-shell
#social-profile-screen::-webkit-scrollbar {
    display: none !important;
}

html body.fatwa-social-shell
#social-profile-screen[hidden] {
    display: none !important;
}


/* =========================================
   HEADER
   ========================================= */

html body.fatwa-social-shell
#social-profile-screen .social-page-head {
    min-height: 60px !important;

    display: flex !important;
    align-items: center !important;

    padding: 13px 4px 7px !important;

    border: 0 !important;
    background: #00120d !important;
}

html body.fatwa-social-shell
#social-profile-screen .social-page-head strong {
    color: #fff !important;

    font-size: 21px !important;
    font-weight: 800 !important;
}


/* =========================================
   MAIN PROFILE CARD
   ========================================= */

html body.fatwa-social-shell
.social-profile-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;

    padding: 22px 15px 16px !important;

    overflow: hidden !important;

    border-radius: 22px !important;

    border:
        1px solid
        rgba(53,221,137,.20) !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(53,221,137,.11),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(6,39,29,.96),
            rgba(2,24,18,.98)
        ) !important;

    box-shadow: none !important;
}

html body.fatwa-social-shell
.social-profile-card::before {
    content: "" !important;

    position: absolute !important;

    width: 190px !important;
    height: 190px !important;

    top: -115px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    background:
        rgba(53,221,137,.055) !important;

    filter: blur(6px) !important;

    pointer-events: none !important;
}


/* Avatar */
html body.fatwa-social-shell
.social-profile-avatar {
    position: relative !important;
    z-index: 2 !important;

    width: 82px !important;
    height: 82px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    border:
        2px solid
        rgba(84,232,159,.52) !important;

    background:
        radial-gradient(
            circle at 35% 30%,
            #155a3f,
            #042117 70%
        ) !important;

    color: #75efad !important;

    font-size: 31px !important;
    font-weight: 900 !important;

    box-shadow:
        0 0 0 6px
        rgba(53,221,137,.045) !important;
}


/* Account name */
html body.fatwa-social-shell
.social-profile-card > strong {
    position: relative !important;
    z-index: 2 !important;

    margin-top: 12px !important;

    color: #fff !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.fatwa-social-shell
.social-profile-card > span {
    position: relative !important;
    z-index: 2 !important;

    margin-top: 2px !important;

    color: #82978f !important;

    font-size: 10px !important;
}


/* =========================================
   STATS
   ========================================= */

html body.fatwa-social-shell
.social-profile-stats {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    margin-top: 17px !important;
    padding-top: 14px !important;

    border-top:
        1px solid
        rgba(255,255,255,.065) !important;
}

html body.fatwa-social-shell
.social-profile-stats div {
    min-width: 0 !important;

    text-align: center !important;
}

html body.fatwa-social-shell
.social-profile-stats div + div {
    border-inline-start:
        1px solid
        rgba(255,255,255,.06) !important;
}

html body.fatwa-social-shell
.social-profile-stats strong {
    display: block !important;

    color: #5eeaa0 !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.fatwa-social-shell
.social-profile-stats span {
    display: block !important;

    margin-top: 3px !important;

    color: #91a49c !important;

    font-size: 9px !important;
}


/* =========================================
   SAVED SHORTCUTS
   ========================================= */

html body.fatwa-social-shell
.social-profile-shortcuts {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;

    gap: 9px !important;

    margin-top: 10px !important;
}

html body.fatwa-social-shell
.social-profile-shortcuts button,
html body.fatwa-social-shell
.social-profile-shortcuts a {
    min-width: 0 !important;
    min-height: 88px !important;

    display: grid !important;

    grid-template-columns:
        38px minmax(0,1fr) auto !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 11px !important;

    border-radius: 17px !important;

    border:
        1px solid
        rgba(53,221,137,.17) !important;

    background:
        linear-gradient(
            145deg,
            rgba(6,37,28,.96),
            rgba(3,28,21,.96)
        ) !important;

    color: #fff !important;

    text-decoration: none !important;
    text-align: start !important;

    box-shadow: none !important;
}

html body.fatwa-social-shell
.social-profile-shortcuts span {
    width: 38px !important;
    height: 38px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 12px !important;

    color: #68eba6 !important;

    background:
        rgba(53,221,137,.07) !important;

    border:
        1px solid
        rgba(53,221,137,.16) !important;

    font-size: 21px !important;
}

html body.fatwa-social-shell
.social-profile-shortcuts strong {
    min-width: 0 !important;

    color: #eef8f3 !important;

    font-size: 11px !important;
    line-height: 1.35 !important;
}

html body.fatwa-social-shell
.social-profile-shortcuts small {
    color: #64e9a4 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}


/* =========================================
   ACCOUNT MENU
   ========================================= */

html body.fatwa-social-shell
.social-profile-menu {
    margin-top: 10px !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    border:
        1px solid
        rgba(53,221,137,.16) !important;

    background:
        rgba(3,27,20,.96) !important;
}

html body.fatwa-social-shell
.social-profile-menu button {
    width: 100% !important;
    min-height: 55px !important;

    display: grid !important;

    grid-template-columns:
        36px minmax(0,1fr) 24px !important;

    align-items: center !important;

    gap: 9px !important;

    padding: 8px 12px !important;

    border: 0 !important;

    background: transparent !important;

    color: #edf7f2 !important;

    text-align: start !important;
}

html body.fatwa-social-shell
.social-profile-menu button + button {
    border-top:
        1px solid
        rgba(255,255,255,.055) !important;
}

html body.fatwa-social-shell
.social-profile-menu button > span {
    width: 34px !important;
    height: 34px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 11px !important;

    color: #65eaa3 !important;

    background:
        rgba(53,221,137,.06) !important;
}

html body.fatwa-social-shell
.social-profile-menu button strong {
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body.fatwa-social-shell
.social-profile-menu button b {
    color: #688079 !important;

    font-size: 20px !important;
    font-weight: 400 !important;
}


/* Hover only on mouse devices */
@media (hover:hover) {

    html body.fatwa-social-shell
    .social-profile-menu button:hover,

    html body.fatwa-social-shell
    .social-profile-shortcuts button:hover,

    html body.fatwa-social-shell
    .social-profile-shortcuts a:hover {
        background:
            rgba(53,221,137,.075) !important;
    }

}


/* =========================================
   DEVELOPMENT NOTE
   ========================================= */

html body.fatwa-social-shell
.social-profile-note {
    margin: 11px 4px 0 !important;

    padding: 10px 12px !important;

    border-radius: 13px !important;

    border:
        1px solid
        rgba(53,221,137,.10) !important;

    background:
        rgba(53,221,137,.035) !important;

    color: #779088 !important;

    font-size: 8.5px !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

html body.fatwa-social-shell
.social-profile-note.is-emphasized {
    color: #b9d2c7 !important;

    border-color:
        rgba(53,221,137,.28) !important;
}


/* =========================================
   PHONE
   ========================================= */

@media (max-width:700px) {

    html body.fatwa-social-shell
    #social-profile-screen {
        width: 100% !important;
        max-width: none !important;
    }

}

@media (max-width:390px) {

    html body.fatwa-social-shell
    .social-profile-shortcuts {
        gap: 7px !important;
    }

    html body.fatwa-social-shell
    .social-profile-shortcuts button,
    html body.fatwa-social-shell
    .social-profile-shortcuts a {
        padding: 9px !important;
    }

}

/* FATWAAI_PROFILE_FINAL_END */


/* FATWA_SOCIAL_CHAT_VIEWPORT_FIX */

/*
 * The legacy chat CSS used horizontal centering.
 * social-shell later changed transform only vertically,
 * leaving the composer shifted to the right.
 *
 * Lock it to the viewport instead.
 */
html body.fatwa-social-shell.fatwa-chat-open .composer {
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;
}

html body.fatwa-social-shell.fatwa-chat-open #chat-form {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  min-width: 0 !important;

  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
}

html body.fatwa-social-shell.fatwa-chat-open #question {
  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}

/* The Qibla close control is always a compact X. */
#social-qibla-close {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;

  height: 40px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  line-height: 1 !important;
  font-size: 27px !important;
}


/* FATWA_SUPABASE_PROFILE_AUTH_V1 */

.social-auth-actions {
  width: 100%;
  margin: 9px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.social-auth-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.social-auth-actions #social-auth-logout {
  grid-column: 1 / -1;
}

.social-auth-primary {
  border: 0;
  background: linear-gradient(
    135deg,
    #35dd89,
    #68e8a6
  );
  color: #032017;
}

.social-auth-secondary {
  border: 1px solid rgba(53, 221, 137, .25);
  background: rgba(53, 221, 137, .065);
  color: var(--social-text);
}

.social-auth-modal[hidden] {
  display: none !important;
}

.social-auth-modal {
  position: fixed;
  z-index: 120000;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 18px;

  background: rgba(0, 9, 7, .84);
  backdrop-filter: blur(13px);
}

.social-auth-dialog {
  width: min(420px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;

  box-sizing: border-box;
  padding: 16px;

  border: 1px solid rgba(53, 221, 137, .26);
  border-radius: 23px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(53,221,137,.09),
      transparent 36%
    ),
    #031b14;

  color: var(--social-text);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55);
}

.social-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 14px;
}

.social-auth-head strong {
  font-size: 18px;
}

#social-auth-close {
  width: 39px;
  height: 39px;
  min-width: 39px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 1px solid rgba(53,221,137,.20);
  border-radius: 12px;

  background: rgba(53,221,137,.055);
  color: #f4faf7;

  font: inherit;
  font-size: 26px;
  line-height: 1;

  cursor: pointer;
}

.social-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: 6px;

  padding: 4px;
  margin-bottom: 14px;

  border: 1px solid rgba(53,221,137,.13);
  border-radius: 14px;

  background: rgba(0,0,0,.18);
}

.social-auth-tabs button {
  min-height: 39px;

  padding: 6px;

  border: 0;
  border-radius: 10px;

  background: transparent;
  color: #829a91;

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}

.social-auth-tabs button.active {
  background: rgba(53,221,137,.14);
  color: #69eaa6;
}

#social-auth-form {
  display: grid;
  gap: 12px;
}

#social-auth-form label {
  display: grid;
  gap: 6px;

  color: #adc2ba;

  font-size: 10px;
  font-weight: 700;
}

#social-auth-form input {
  width: 100%;
  min-width: 0;
  height: 47px;

  box-sizing: border-box;

  padding-inline: 13px;

  border: 1px solid rgba(53,221,137,.18);
  border-radius: 13px;

  outline: none;

  background: rgba(0,13,10,.78);
  color: #fff;

  font: inherit;
  font-size: 14px;
}

#social-auth-form input:focus {
  border-color: rgba(53,221,137,.62);

  box-shadow:
    0 0 0 3px rgba(53,221,137,.065);
}

.social-auth-submit {
  width: 100%;
  min-height: 48px;

  margin-top: 2px;

  border: 0;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #35dd89,
      #68e8a6
    );

  color: #032017;

  font: inherit;
  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}

.social-auth-submit:disabled {
  opacity: .55;
  cursor: wait;
}

.social-auth-status {
  min-height: 18px;

  margin: 0;

  color: #7ee5ab;

  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}

.social-auth-status.error {
  color: #ff9b9b;
}

@media (max-width: 700px) {
  .social-auth-modal {
    padding: 12px;
  }

  .social-auth-dialog {
    max-height: calc(100dvh - 24px);
    padding: 14px;
    border-radius: 20px;
  }

  .social-auth-actions button {
    min-height: 42px;
    font-size: 10px;
  }
}


/* FATWA_VIDEO_UPLOAD_V1 */

.social-upload-plus {
  width: 42px;
  height: 42px;
  min-width: 42px;

  display: grid;
  place-items: center;

  margin-inline-start: auto;
  padding: 0;

  border: 1px solid rgba(53,221,137,.32);
  border-radius: 14px;

  background:
    rgba(53,221,137,.10);

  color: var(--social-green-2);

  font: inherit;
  font-size: 29px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}

.social-upload-plus:hover {
  background:
    rgba(53,221,137,.17);
}

.social-uploaded-section,
.social-profile-videos-block {
  margin: 12px 8px;
}

.social-uploaded-title {
  display: block;

  margin: 0 2px 9px;

  color: var(--social-text);

  font-size: 12px;
  font-weight: 800;
}

.social-uploaded-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 7px;
}

.social-video-card {
  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(53,221,137,.13);
  border-radius: 15px;

  background: #031a14;
}

.social-video-card video {
  display: block;

  width: 100%;
  aspect-ratio: 9 / 16;

  object-fit: cover;

  background: #000;
}

.social-video-card-info {
  min-width: 0;

  padding: 8px;
}

.social-video-card-info strong {
  display: block;

  overflow: hidden;

  color: #f0f8f4;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-video-card-info small {
  display: block;

  margin-top: 3px;

  color: var(--social-green-2);

  font-size: 8px;
}

.social-video-empty {
  grid-column: 1 / -1;

  padding: 18px;

  border: 1px dashed rgba(53,221,137,.13);
  border-radius: 14px;

  color: var(--social-muted);

  font-size: 10px;
  text-align: center;
}


.social-upload-modal[hidden] {
  display: none !important;
}

.social-upload-modal {
  position: fixed;
  z-index: 130000;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 16px;

  background:
    rgba(0,8,6,.86);

  backdrop-filter:
    blur(14px);
}

.social-upload-dialog {
  width: min(460px, 100%);

  max-height:
    calc(100dvh - 32px);

  overflow-y: auto;

  box-sizing: border-box;

  padding: 16px;

  border:
    1px solid
    rgba(53,221,137,.25);

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(53,221,137,.10),
      transparent 35%
    ),
    #031b14;

  color: var(--social-text);

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.55);
}

.social-upload-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}

.social-upload-head strong {
  font-size: 18px;
}

#social-upload-close {
  width: 39px;
  height: 39px;

  min-width: 39px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(53,221,137,.19);

  border-radius: 12px;

  background:
    rgba(53,221,137,.055);

  color: white;

  font: inherit;
  font-size: 26px;
  line-height: 1;

  cursor: pointer;
}

#social-upload-form {
  display: grid;

  gap: 12px;
}

.social-video-picker {
  min-height: 88px;

  display: grid;
  place-items: center;

  gap: 4px;

  padding: 12px;

  border:
    1px dashed
    rgba(53,221,137,.35);

  border-radius: 16px;

  background:
    rgba(53,221,137,.055);

  color:
    var(--social-green-2);

  font: inherit;

  cursor: pointer;
}

.social-video-picker span {
  font-size: 30px;
  line-height: 1;
}

.social-video-picker strong {
  font-size: 11px;
}

.social-video-preview {
  width: 100%;

  max-height: 340px;

  border-radius: 16px;

  background: #000;
}

#social-upload-form label {
  display: grid;

  gap: 6px;

  color: #adc2ba;

  font-size: 10px;
  font-weight: 700;
}

#social-upload-form input,
#social-upload-form textarea,
#social-upload-form select {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  padding: 11px 13px;

  border:
    1px solid
    rgba(53,221,137,.18);

  border-radius: 13px;

  outline: none;

  background:
    rgba(0,13,10,.78);

  color: #fff;

  font: inherit;
  font-size: 13px;
}

#social-upload-form input,
#social-upload-form select {
  min-height: 46px;
}

#social-upload-form textarea {
  resize: vertical;
}

#social-upload-form input:focus,
#social-upload-form textarea:focus,
#social-upload-form select:focus {
  border-color:
    rgba(53,221,137,.62);

  box-shadow:
    0 0 0 3px
    rgba(53,221,137,.065);
}

.social-upload-submit {
  min-height: 48px;

  border: 0;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #35dd89,
      #68e8a6
    );

  color: #032017;

  font: inherit;
  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}

.social-upload-submit:disabled {
  opacity: .55;
  cursor: wait;
}

.social-upload-progress {
  height: 5px;

  overflow: hidden;

  border-radius: 99px;

  background:
    rgba(255,255,255,.08);
}

.social-upload-progress i {
  display: block;

  width: 0%;
  height: 100%;

  border-radius: inherit;

  background:
    var(--social-green-2);

  transition:
    width .12s linear;
}

.social-upload-status {
  min-height: 18px;

  margin: 0;

  color: #7ee5ab;

  font-size: 10px;
  line-height: 1.55;

  text-align: center;
}

.social-upload-status.error {
  color: #ff9b9b;
}


@media (max-width: 700px) {

  .social-upload-modal {
    padding: 10px;
  }

  .social-upload-dialog {
    max-height:
      calc(100dvh - 20px);

    padding: 14px;

    border-radius: 20px;
  }

  .social-uploaded-grid {
    gap: 5px;
  }

  .social-video-card-info {
    padding: 6px;
  }
}


/* FATWA_REELS_HOME_FEED_V1 */

/*
 * Start = full vertical video feed.
 */
html body.fatwa-social-shell #social-home-screen {
  padding: 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scroll-snap-type:
    y mandatory !important;

  overscroll-behavior-y:
    contain;

  scrollbar-width:
    none;
}

html body.fatwa-social-shell
#social-home-screen::-webkit-scrollbar {
  display: none;
}


/*
 * The old demo header is no longer needed
 * on the Reels feed.
 */
html body.fatwa-social-shell
#social-home-screen
.social-page-head-feed {
  display: none !important;
}


html body.fatwa-social-shell
#social-home-screen
.social-feed-stage {
  display: block !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


html body.fatwa-social-shell
#social-home-screen
.social-feed-empty-note {
  display: none !important;
}


.social-reel-post {
  position: relative;

  width: 100%;

  min-height:
    calc(
      100dvh -
      var(--social-nav-h, 84px)
    );

  height:
    calc(
      100dvh -
      var(--social-nav-h, 84px)
    );

  margin: 0 auto;

  overflow: hidden;

  scroll-snap-align:
    start;

  scroll-snap-stop:
    always;

  background: #000;
}


.social-reel-video {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #000;

  cursor: pointer;
}


.social-reel-shade {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.18) 0%,
      transparent 24%,
      transparent 52%,
      rgba(0,0,0,.22) 70%,
      rgba(0,0,0,.82) 100%
    );
}


.social-reel-creator {
  position: absolute;

  z-index: 4;

  left: 16px;
  right: 76px;
  bottom: 118px;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #fff;

  pointer-events: auto;
  cursor: pointer;
}


.social-reel-avatar {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(105,234,166,.75);

  border-radius: 50%;

  background:
    rgba(3,27,20,.83);

  color: #69eaa6;

  font-size: 16px;
  font-weight: 900;

  box-shadow:
    0 4px 18px
    rgba(0,0,0,.25);
}


.social-reel-creator strong {
  display: block;

  font-size: 13px;
  font-weight: 850;

  text-shadow:
    0 1px 4px
    rgba(0,0,0,.65);
}


.social-reel-creator span {
  display: block;

  margin-top: 2px;

  font-size: 9px;

  opacity: .78;
}


.social-reel-caption {
  position: absolute;

  z-index: 4;

  left: 16px;
  right: 76px;
  bottom: 58px;

  color: #fff;

  pointer-events: none;

  text-shadow:
    0 1px 5px
    rgba(0,0,0,.72);
}


.social-reel-caption strong {
  display: block;

  font-size: 13px;
  line-height: 1.4;
}


.social-reel-caption p {
  display: -webkit-box;

  overflow: hidden;

  margin:
    4px 0 0;

  font-size: 10px;
  line-height: 1.45;

  opacity: .88;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}


.social-reel-actions {
  position: absolute;

  z-index: 5;

  right: 11px;
  bottom: 64px;

  display: grid;

  gap: 10px;
}


.social-reel-action {
  width: 46px;
  min-width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 50%;

  background:
    rgba(0,22,16,.54);

  color: #fff;

  backdrop-filter:
    blur(8px);

  cursor: pointer;

  box-shadow:
    0 5px 20px
    rgba(0,0,0,.18);
}


.social-reel-action span {
  font-size: 21px;
  line-height: 1;
}


.social-reel-action small {
  display: none;
}


.social-reel-action.active {
  border-color:
    rgba(53,221,137,.62);

  color:
    #55e99a;

  background:
    rgba(16,70,50,.72);
}


.social-reel-sound span {
  font-size: 17px;
}


.social-reel-play-indicator {
  position: absolute;

  z-index: 6;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 50%;

  background:
    rgba(0,0,0,.35);

  color: #fff;

  font-size: 26px;

  pointer-events: none;

  opacity: .92;

  transition:
    opacity .18s ease,
    transform .18s ease;
}


.social-reel-post.is-playing
.social-reel-play-indicator {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(.82);
}


.social-reel-empty {
  min-height:
    calc(
      100dvh -
      var(--social-nav-h, 84px)
    );

  display: grid;
  place-items: center;

  padding: 24px;

  box-sizing: border-box;

  color:
    var(--social-muted);

  font-size: 12px;

  text-align: center;
}


@media (min-width: 760px) {

  .social-reel-post {
    max-width: 560px;

    border-inline:
      1px solid
      rgba(53,221,137,.10);
  }

}


@media (max-width: 700px) {

  .social-reel-creator {
    left: 13px;
    right: 68px;
    bottom: 112px;
  }

  .social-reel-caption {
    left: 13px;
    right: 68px;
    bottom: 54px;
  }

  .social-reel-actions {
    right: 9px;
    bottom: 58px;
  }

  .social-reel-action {
    width: 43px;
    min-width: 43px;
    height: 43px;
  }

}\n

/* FATWA_VIDEO_COMMENTS_V1 */

.social-comments-modal[hidden] {
  display: none !important;
}

.social-comments-modal {
  position: fixed;

  z-index: 140000;

  inset: 0;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  background:
    rgba(0, 8, 6, .56);

  backdrop-filter:
    blur(7px);
}


.social-comments-sheet {
  width: min(560px, 100%);

  max-height: 72dvh;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  padding: 14px;

  border:
    1px solid
    rgba(53,221,137,.22);

  border-radius:
    24px 24px 0 0;

  background:
    #031b14;

  color:
    #f3faf6;

  box-shadow:
    0 -25px 70px
    rgba(0,0,0,.42);
}


.social-comments-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 45px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.social-comments-head strong {
  font-size: 15px;
}


#social-comments-close {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: #fff;

  font-size: 27px;

  cursor: pointer;
}


.social-comments-list {
  flex: 1 1 auto;

  min-height: 180px;
  max-height: 48dvh;

  overflow-y: auto;

  padding: 10px 2px;
}


.social-comment-row {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  padding: 9px 4px;
}


.social-comment-avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(53,221,137,.38);

  border-radius: 50%;

  background:
    rgba(53,221,137,.08);

  color:
    #62e7a0;

  font-size: 12px;
  font-weight: 900;
}


.social-comment-content {
  min-width: 0;
}


.social-comment-content strong {
  display: block;

  font-size: 11px;
}


.social-comment-content p {
  margin: 3px 0 0;

  color:
    #d6e5de;

  font-size: 11px;
  line-height: 1.5;

  overflow-wrap:
    anywhere;
}


.social-comments-empty {
  padding: 35px 10px;

  color:
    #839b91;

  font-size: 11px;

  text-align: center;
}


.social-comment-form {
  display: grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  gap: 7px;

  padding-top: 10px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


#social-comment-input {
  min-width: 0;
  height: 45px;

  box-sizing: border-box;

  padding: 0 13px;

  border:
    1px solid
    rgba(53,221,137,.19);

  border-radius: 99px;

  outline: none;

  background:
    rgba(0,13,10,.82);

  color: #fff;

  font: inherit;
  font-size: 12px;
}


#social-comment-send {
  min-width: 70px;

  border: 0;
  border-radius: 99px;

  padding:
    0 15px;

  background:
    #35dd89;

  color:
    #032017;

  font: inherit;
  font-size: 11px;
  font-weight: 900;

  cursor: pointer;
}


.social-comments-status {
  min-height: 17px;

  margin:
    6px 0 0;

  color:
    #72e5a8;

  font-size: 9px;

  text-align: center;
}


.social-comments-status.error {
  color:
    #ff9696;
}


/* FATWA_REELS_SOCIAL_ACTIONS_V1 */

.social-reel-action {
  position: relative;

  grid-template-rows:
    auto auto;

  align-content: center;

  gap: 1px;
}

.social-reel-action small {
  display: block !important;

  min-height: 10px;

  color: rgba(255,255,255,.92);

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  text-align: center;
}

.social-reel-action.active small {
  color: #6cebaa;
}


/* FATWA_PROFILE_SAVED_VIDEOS_V1 */

.social-saved-videos-modal[hidden] {
  display: none !important;
}

.social-saved-videos-modal {
  position: fixed;
  z-index: 145000;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background:
    rgba(0, 8, 6, .68);

  backdrop-filter:
    blur(8px);
}

.social-saved-videos-sheet {
  width: min(600px, 100%);

  max-height: 82dvh;

  box-sizing: border-box;

  padding: 14px;

  overflow-y: auto;

  border:
    1px solid
    rgba(53,221,137,.23);

  border-radius:
    24px 24px 0 0;

  background:
    #031b14;

  color: #fff;

  box-shadow:
    0 -25px 70px
    rgba(0,0,0,.45);
}

.social-saved-videos-head {
  position: sticky;
  top: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 48px;

  margin-bottom: 12px;

  background:
    #031b14;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.social-saved-videos-head strong {
  font-size: 15px;
}

#social-saved-videos-close {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  background: transparent;

  color: #fff;

  font: inherit;
  font-size: 28px;

  cursor: pointer;
}

.social-saved-videos-list {
  padding-bottom: 10px;
}

.social-saved-videos-status {
  min-height: 18px;

  margin: 8px 0 0;

  color: #ff9b9b;

  font-size: 10px;

  text-align: center;
}

/* FATWA_SAVED_INSTAGRAM_SCROLL_V2 */

.social-saved-videos-modal {
  align-items: stretch !important;
  background: #001a13 !important;
}

.social-saved-videos-sheet {
  width: min(700px, 100%) !important;

  height: 100dvh !important;
  max-height: 100dvh !important;

  margin: 0 auto !important;
  padding:
    calc(12px + env(safe-area-inset-top))
    12px
    calc(18px + env(safe-area-inset-bottom))
    !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border-radius: 0 !important;
}

.social-saved-videos-head {
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;

  margin-bottom: 10px !important;
}

.social-saved-videos-list {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;

  touch-action: pan-y !important;
  overscroll-behavior-y: contain;

  padding:
    0 0
    calc(90px + env(safe-area-inset-bottom))
    !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr))
    !important;

  align-content: start !important;
}

.social-saved-videos-list .social-video-card {
  min-width: 0 !important;
}

.social-saved-videos-list .social-video-card video {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;

  object-fit: cover !important;
}

@media (max-width: 700px) {
  .social-saved-videos-sheet {
    width: 100% !important;
  }

  .social-saved-videos-list {
    gap: 4px !important;
  }

  .social-saved-videos-list .social-video-card {
    border-radius: 8px !important;
  }

  .social-saved-videos-list .social-video-card-info {
    padding: 5px !important;
  }
}



/* FATWA_SAVED_FULLSCREEN_REELS_V1 */

.social-saved-reels-modal[hidden] {
  display: none !important;
}

.social-saved-reels-modal {
  position: fixed;

  z-index: 160000;

  inset: 0;

  width: 100%;
  height: 100dvh;

  overflow: hidden;

  background: #000;
}


.social-saved-reels-stage {
  width: 100%;
  height: 100dvh;

  overflow-x: hidden;
  overflow-y: auto;

  scroll-snap-type:
    y mandatory;

  overscroll-behavior-y:
    contain;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;

  background: #000;
}


.social-saved-reels-stage::-webkit-scrollbar {
  display: none;
}


/*
 * Reuse the exact Reel component from Start,
 * but make it true fullscreen here.
 */
.social-saved-reels-stage
.social-reel-post {
  width: 100% !important;

  height: 100dvh !important;
  min-height: 100dvh !important;

  max-width: 100% !important;

  scroll-snap-align:
    start !important;

  scroll-snap-stop:
    always !important;

  border: 0 !important;
}


/*
 * Extra breathing room at the bottom because
 * this view has no FatwaAI bottom navigation.
 */
.social-saved-reels-stage
.social-reel-caption {
  bottom:
    calc(
      46px +
      env(safe-area-inset-bottom)
    ) !important;
}


.social-saved-reels-stage
.social-reel-creator {
  bottom:
    calc(
      108px +
      env(safe-area-inset-bottom)
    ) !important;
}


.social-saved-reels-stage
.social-reel-actions {
  bottom:
    calc(
      54px +
      env(safe-area-inset-bottom)
    ) !important;
}


#social-saved-reels-close {
  position: fixed;

  z-index: 160010;

  top:
    calc(
      13px +
      env(safe-area-inset-top)
    );

  left: 13px;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 50%;

  background:
    rgba(0,0,0,.42);

  color: #fff;

  backdrop-filter:
    blur(8px);

  font: inherit;
  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}


html[dir="rtl"]
#social-saved-reels-close {
  left: auto;
  right: 13px;
}


body:has(
  .social-saved-reels-modal:not([hidden])
) {
  overflow: hidden !important;
}

/* FATWA_SAVED_REEL_CLICK_FIX_V2 */

#social-saved-videos-list .social-video-card {
  position: relative !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

#social-saved-videos-list .social-video-card video {
  pointer-events: none !important;
}

/* Play symbol belongs to the card, not native video controls */
#social-saved-videos-list .social-video-card::after {
  content: "▶";

  position: absolute;
  z-index: 5;

  left: 50%;
  top: 38%;

  transform: translate(-50%, -50%);

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,.88);

  color: #07120e;

  font-size: 20px;

  pointer-events: none;
}


/* FATWA_VIDEO_OWNER_MENU_V3 */

.social-reel-owner-menu {
  position: absolute !important;

  z-index: 90 !important;

  top:
    calc(
      16px +
      env(safe-area-inset-top)
    ) !important;

  inset-inline-end:
    14px !important;

  width: 44px !important;
  height: 44px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px solid
    rgba(255,255,255,.22)
    !important;

  border-radius:
    50% !important;

  background:
    rgba(0,0,0,.48)
    !important;

  color: #fff !important;

  font-size:
    28px !important;

  line-height:
    1 !important;

  backdrop-filter:
    blur(8px);

  cursor: pointer;
}


/*
 * Fullscreen Saved Reel already has X.
 * Put ⋮ underneath the X.
 */
.social-saved-reels-stage
.social-reel-owner-menu {
  top:
    calc(
      72px +
      env(safe-area-inset-top)
    ) !important;
}

/* FATWA_PROFILE_VIDEO_MANAGER_V1 */

.social-video-card {
  position: relative !important;
}

.social-video-card-menu {
  position: absolute;
  z-index: 20;

  top: 8px;
  inset-inline-end: 8px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(0,0,0,.68);
  color: #fff;

  font-size: 23px;
  line-height: 1;

  backdrop-filter: blur(7px);

  cursor: pointer;
}


.fatwa-video-manager-modal[hidden] {
  display: none !important;
}

.fatwa-video-manager-modal {
  position: fixed;
  z-index: 200000;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background: rgba(0,8,6,.66);

  backdrop-filter: blur(9px);
}


.fatwa-video-manager-sheet {
  width: min(560px, 100%);

  box-sizing: border-box;

  padding:
    16px
    16px
    calc(18px + env(safe-area-inset-bottom));

  border:
    1px solid
    rgba(53,221,137,.24);

  border-radius: 26px 26px 0 0;

  background: #031b14;
  color: #fff;

  box-shadow:
    0 -20px 70px
    rgba(0,0,0,.5);
}


.fatwa-video-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 48px;

  margin-bottom: 10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.fatwa-video-manager-head strong {
  font-size: 16px;
}


#fatwa-video-manager-close {
  width: 40px;
  height: 40px;

  padding: 0;

  border: 0;
  background: transparent;

  color: #fff;

  font-size: 29px;

  cursor: pointer;
}


.fatwa-video-manager-action {
  width: 100%;
  min-height: 58px;

  display: grid;
  grid-template-columns:
    40px 1fr auto;

  align-items: center;
  gap: 8px;

  padding: 8px 10px;

  border: 0;
  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  background: transparent;

  color: #fff;

  text-align: start;

  cursor: pointer;
}


.fatwa-video-manager-action > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    rgba(53,221,137,.09);

  color: #59e59d;

  font-size: 20px;
}


.fatwa-video-manager-action strong {
  font-size: 13px;
}


.fatwa-video-manager-action b {
  color: #688279;

  font-size: 23px;
  font-weight: 400;
}


.fatwa-video-manager-action.danger {
  color: #ff9898;
}


.fatwa-video-manager-action.danger > span {
  background:
    rgba(255,75,75,.08);

  color: #ff9292;
}


#fatwa-video-manager-form {
  display: grid;
  gap: 13px;
}


#fatwa-video-manager-form[hidden],
#fatwa-video-manager-confirm[hidden] {
  display: none !important;
}


#fatwa-video-manager-form label {
  display: grid;
  gap: 6px;
}


#fatwa-video-manager-form label > span {
  color: #93aaa1;

  font-size: 11px;
}


#fatwa-video-manager-form input,
#fatwa-video-manager-form textarea,
#fatwa-video-manager-form select {
  width: 100%;

  box-sizing: border-box;

  padding: 12px;

  border:
    1px solid
    rgba(53,221,137,.20);

  border-radius: 14px;

  outline: none;

  background: #001710;
  color: #fff;

  font: inherit;
}


.fatwa-video-manager-primary,
.fatwa-video-manager-secondary,
.fatwa-video-manager-delete-confirm {
  width: 100%;

  min-height: 47px;

  border-radius: 14px;

  font: inherit;
  font-weight: 800;

  cursor: pointer;
}


.fatwa-video-manager-primary {
  border: 0;

  background: #35dd89;
  color: #032017;
}


.fatwa-video-manager-secondary {
  border:
    1px solid
    rgba(255,255,255,.10);

  background: transparent;

  color: #dbe8e2;
}


#fatwa-video-manager-confirm {
  padding-top: 8px;

  text-align: center;
}


.fatwa-video-manager-confirm-title {
  display: block;

  margin-bottom: 7px;

  font-size: 17px;
}


#fatwa-video-manager-confirm p {
  margin: 0 0 18px;

  color: #94aaa1;

  font-size: 12px;
}


.fatwa-video-manager-delete-confirm {
  margin-bottom: 8px;

  border:
    1px solid
    rgba(255,75,75,.34);

  background:
    rgba(160,25,25,.16);

  color: #ff9696;
}


#fatwa-video-manager-status {
  min-height: 16px;

  margin: 8px 0 0;

  color: #ff9696;

  font-size: 10px;

  text-align: center;
}



/* FATWA_PROFILE_HEADER_MENU_SAFE_V1 */


/* Header */
html body.fatwa-social-shell
#social-profile-screen
.social-page-head {

  position: sticky !important;

  z-index: 12000 !important;

  top: 0 !important;

  min-height: 64px !important;

  overflow: visible !important;

  background:
    rgba(0, 25, 18, .97)
    !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/* =====================================
   + ADD VIDEO — CENTER
   ===================================== */

html body.fatwa-social-shell
#social-profile-screen
.fatwa-profile-upload-center {

  position: absolute !important;

  z-index: 4 !important;

  left: 50% !important;
  right: auto !important;

  top: 50% !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  margin: 0 !important;
}


/* =====================================
   MENU — TOP RIGHT
   ===================================== */

#social-profile-account-button {

  position: absolute !important;

  z-index: 6 !important;

  right: 8px !important;
  left: auto !important;

  top: 50% !important;

  transform:
    translateY(-50%)
    !important;

  width: 44px !important;
  height: 44px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border:
    1px solid
    rgba(53, 221, 137, .30)
    !important;

  border-radius:
    14px !important;

  background:
    rgba(2, 45, 32, .88)
    !important;

  color:
    #35dd89 !important;

  font-size:
    24px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;
}


#social-profile-account-button.active {

  background:
    #35dd89 !important;

  color:
    #002018 !important;
}


/* =====================================
   DROPDOWN / ACCOUNT BOX
   ===================================== */

#social-profile-account-popover[hidden] {
  display: none !important;
}


#social-profile-account-popover {

  position: absolute !important;

  z-index: 15000 !important;

  top: 60px !important;
  right: 8px !important;
  left: auto !important;

  width:
    min(
      360px,
      calc(100vw - 32px)
    ) !important;

  max-height:
    calc(100dvh - 150px)
    !important;

  overflow-y:
    auto !important;

  box-sizing:
    border-box !important;

  padding:
    10px !important;

  border:
    1px solid
    rgba(53, 221, 137, .24)
    !important;

  border-radius:
    20px !important;

  background:
    rgba(1, 31, 22, .98)
    !important;

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, .50)
    !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* Saved + Saved verses inside dropdown */

#social-profile-account-popover
.social-profile-shortcuts {

  width: 100% !important;

  margin: 0 0 8px !important;

  gap: 7px !important;
}


/* Settings / previous questions / support */

#social-profile-account-popover
.social-profile-menu {

  width: 100% !important;

  margin: 0 !important;
}


/* Small note */

#social-profile-account-popover
.social-profile-note {

  margin:
    8px 2px 0 !important;
}


/*
 * The moved boxes must no longer reserve
 * space underneath "Meine Videos".
 */

#social-profile-screen >
.social-profile-shortcuts,

#social-profile-screen >
.social-profile-menu,

#social-profile-screen >
.social-profile-note {

  margin: 0 !important;
}


/* Mobile */

@media (max-width: 700px) {

  #social-profile-account-popover {

    right: 6px !important;

    width:
      calc(100vw - 24px)
      !important;
  }


  #social-profile-account-button {

    right: 4px !important;
  }

}

/* FATWA_PROFILE_MEDIA_V1 */

#social-profile-screen
.social-profile-card {
  position: relative !important;

  overflow: hidden !important;

  padding-top:
    0 !important;
}


/* COVER */

.social-profile-cover {
  position: relative;

  width: 100%;

  height: 150px;

  margin-bottom: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(53,221,137,.22),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #05382a,
      #001b14
    );
}


#social-profile-cover-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


#social-profile-cover-edit {
  position: absolute;

  z-index: 5;

  inset-inline-end: 12px;
  bottom: 12px;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.25);

  border-radius: 50%;

  background:
    rgba(0,0,0,.52);

  color: #fff;

  font-size: 23px;

  backdrop-filter: blur(8px);
}


/* PROFILE PHOTO */

#social-profile-screen
.social-profile-avatar {
  position: relative !important;

  z-index: 8 !important;

  margin-top:
    -46px !important;

  overflow:
    visible !important;

  cursor:
    pointer !important;

  background:
    #003326 !important;

  box-shadow:
    0 0 0 5px #01251b,
    0 10px 30px rgba(0,0,0,.35)
    !important;
}


#social-profile-avatar-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50%;
}


#social-profile-avatar-letter {
  position: relative;

  z-index: 1;
}


.social-profile-avatar-edit {
  position: absolute;

  z-index: 10;

  right: -3px;
  bottom: -3px;

  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border:
    2px solid #01251b;

  border-radius: 50%;

  background: #35dd89;

  color: #002018;

  font-size: 18px;
  font-weight: 900;
}


/* BIO */

.social-profile-bio-row {
  width:
    min(92%, 430px);

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  margin:
    8px auto 4px;
}


#social-profile-bio {
  margin: 0;

  color: #d7e6df;

  font-size: 11px;
  line-height: 1.55;

  text-align: center;

  white-space: pre-wrap;
}


#social-profile-bio.empty {
  color: #66847a;
}


#social-profile-bio-edit {
  flex: 0 0 auto;

  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(53,221,137,.25);

  border-radius: 9px;

  background:
    rgba(53,221,137,.07);

  color: #35dd89;

  font-size: 14px;
}


.social-profile-media-status {
  min-height: 15px;

  margin:
    2px 0 5px;

  color: #52df96;

  font-size: 9px;

  text-align: center;
}


.social-profile-media-status.error {
  color: #ff9696;
}


@media (max-width: 700px) {

  .social-profile-cover {
    height: 132px;
  }

  #social-profile-screen
  .social-profile-avatar {
    margin-top:
      -42px !important;
  }

}


/* FATWA_COMMENT_MANAGER_V1 */


/* ⋮ beside manageable comment */

.social-comment-content {
  position: relative;
  padding-inline-end: 38px;
}


.social-comment-manage-button {
  position: absolute;

  top: 0;
  inset-inline-end: 0;

  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: transparent;

  color: #8ba199;

  font-size: 22px;
  line-height: 1;

  cursor: pointer;
}


.social-comment-manage-button:active {
  background:
    rgba(53,221,137,.10);

  color: #35dd89;
}


/* Bottom sheet */

.fatwa-comment-manager-modal[hidden] {
  display: none !important;
}


.fatwa-comment-manager-modal {
  position: fixed;

  z-index: 220000;

  inset: 0;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  background:
    rgba(0, 8, 6, .64);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.fatwa-comment-manager-sheet {
  width:
    min(560px, 100%);

  box-sizing:
    border-box;

  padding:
    16px
    16px
    calc(
      18px +
      env(safe-area-inset-bottom)
    );

  border:
    1px solid
    rgba(53,221,137,.23);

  border-radius:
    26px 26px 0 0;

  background:
    #031b14;

  color: #fff;

  box-shadow:
    0 -22px 70px
    rgba(0,0,0,.52);
}


.fatwa-comment-manager-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 48px;

  margin-bottom: 9px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.fatwa-comment-manager-head strong {
  font-size: 15px;
}


#fatwa-comment-manager-close {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: #fff;

  font-size: 29px;

  cursor: pointer;
}


.fatwa-comment-manager-action {
  width: 100%;

  min-height: 58px;

  display: grid;

  grid-template-columns:
    40px 1fr auto;

  align-items: center;

  gap: 8px;

  padding: 8px 10px;

  border: 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  background: transparent;

  color: #fff;

  text-align: start;

  cursor: pointer;
}


.fatwa-comment-manager-action[hidden] {
  display: none !important;
}


.fatwa-comment-manager-action > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    rgba(53,221,137,.09);

  color: #55e29a;

  font-size: 19px;
}


.fatwa-comment-manager-action strong {
  font-size: 13px;
}


.fatwa-comment-manager-action b {
  color: #688279;

  font-size: 22px;
  font-weight: 400;
}


.fatwa-comment-manager-action.danger {
  color: #ff9696;
}


.fatwa-comment-manager-action.danger > span {
  background:
    rgba(255,70,70,.09);

  color: #ff9292;
}


/* Edit form */

#fatwa-comment-manager-form[hidden],
#fatwa-comment-manager-confirm[hidden] {
  display: none !important;
}


#fatwa-comment-manager-form {
  display: grid;

  gap: 10px;
}


#fatwa-comment-manager-input {
  width: 100%;

  min-height: 115px;

  box-sizing: border-box;

  padding: 13px;

  resize: vertical;

  border:
    1px solid
    rgba(53,221,137,.20);

  border-radius: 15px;

  outline: none;

  background:
    #001710;

  color: #fff;

  font: inherit;
  line-height: 1.5;
}


.fatwa-comment-manager-primary,
.fatwa-comment-manager-secondary,
.fatwa-comment-manager-delete-confirm {
  width: 100%;

  min-height: 46px;

  border-radius: 14px;

  font: inherit;
  font-weight: 800;

  cursor: pointer;
}


.fatwa-comment-manager-primary {
  border: 0;

  background:
    #35dd89;

  color:
    #032017;
}


.fatwa-comment-manager-secondary {
  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    transparent;

  color:
    #dce8e3;
}


/* Delete confirmation */

#fatwa-comment-manager-confirm {
  padding-top: 7px;

  text-align: center;
}


.fatwa-comment-manager-confirm-title {
  display: block;

  margin-bottom: 6px;

  font-size: 17px;
}


#fatwa-comment-manager-confirm p {
  margin:
    0 0 18px;

  color:
    #92a99f;

  font-size: 12px;
}


.fatwa-comment-manager-delete-confirm {
  margin-bottom: 8px;

  border:
    1px solid
    rgba(255,75,75,.36);

  background:
    rgba(155,20,20,.16);

  color:
    #ff9696;
}


#fatwa-comment-manager-status {
  min-height: 17px;

  margin:
    8px 0 0;

  color:
    #ff9696;

  font-size: 10px;

  text-align: center;
}

/* FATWA_PROFILE_RTL_HEADER_FIX_V1 */

/* DE / EN / TR / ID */
html:not([dir="rtl"]) #social-profile-account-button {
  right: 8px !important;
  left: auto !important;
}

html:not([dir="rtl"]) #social-profile-account-popover {
  right: 8px !important;
  left: auto !important;
}

/* AR */
html[dir="rtl"] #social-profile-account-button {
  left: 8px !important;
  right: auto !important;
}

html[dir="rtl"] #social-profile-account-popover {
  left: 8px !important;
  right: auto !important;
}

html[dir="rtl"] #social-profile-screen .social-page-head {
  padding-right: 10px !important;
  padding-left: 62px !important;
}

html:not([dir="rtl"]) #social-profile-screen .social-page-head {
  padding-left: 10px !important;
  padding-right: 62px !important;
}

/* FATWA_PROFILE_FULLSCREEN_SAFE_V2 */


/* ===== Arabic RTL header ===== */

html[dir="rtl"]
#social-profile-account-button {
  left: 8px !important;
  right: auto !important;
}

html[dir="rtl"]
#social-profile-account-popover {
  left: 8px !important;
  right: auto !important;
}

html[dir="rtl"]
#social-profile-screen
.social-page-head {
  padding-left: 62px !important;
  padding-right: 10px !important;
}


/* Non Arabic */

html:not([dir="rtl"])
#social-profile-account-button {
  right: 8px !important;
  left: auto !important;
}

html:not([dir="rtl"])
#social-profile-account-popover {
  right: 8px !important;
  left: auto !important;
}


/* ===== Profile cards ===== */

.social-profile-video-card {
  position: relative !important;
  cursor: pointer;
  overflow: hidden;
}

.social-profile-video-card video {
  pointer-events: none !important;
}

.social-profile-video-play {
  position: absolute;

  z-index: 8;

  left: 50%;
  top: 43%;

  transform:
    translate(-50%, -50%);

  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.90);

  color: #06110d;

  font-size: 24px;

  pointer-events: none;
}


/* ===== Fullscreen ===== */

.social-profile-reels-modal[hidden] {
  display: none !important;
}

.social-profile-reels-modal {
  position: fixed !important;

  z-index: 300000 !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  background: #000 !important;

  overflow: hidden !important;
}


.social-profile-reels-stage {
  width: 100% !important;
  height: 100dvh !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scroll-snap-type:
    y mandatory !important;

  overscroll-behavior:
    contain !important;

  scrollbar-width:
    none !important;
}

.social-profile-reels-stage::-webkit-scrollbar {
  display: none !important;
}


.social-profile-reels-stage
.social-reel-post {
  width: 100vw !important;

  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  scroll-snap-align:
    start !important;

  scroll-snap-stop:
    always !important;
}


.social-profile-reels-stage
.social-reel-video {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;

  background: #000 !important;
}


/* X */

#social-profile-reels-close {
  position: fixed !important;

  z-index: 300100 !important;

  top:
    calc(
      14px +
      env(safe-area-inset-top)
    ) !important;

  right: 14px !important;

  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px solid
    rgba(255,255,255,.20)
    !important;

  border-radius:
    50% !important;

  background:
    rgba(0,0,0,.48)
    !important;

  color: #fff !important;

  font-size: 31px !important;
}


html[dir="rtl"]
#social-profile-reels-close {
  left: 14px !important;
  right: auto !important;
}

/* FATWA_DOUBLE_TAP_LIKE_V1 */

.social-reel-post {
  position: relative !important;
}


.fatwa-double-tap-heart {
  position: absolute !important;

  z-index: 5000 !important;

  left: 50% !important;
  top: 45% !important;

  transform:
    translate(-50%, -50%)
    scale(.3);

  color: #fff !important;

  font-size:
    clamp(
      88px,
      24vw,
      145px
    ) !important;

  line-height: 1 !important;

  pointer-events:
    none !important;

  text-shadow:
    0 7px 35px
    rgba(0,0,0,.55);

  animation:
    fatwaDoubleTapLikeHeart
    .68s
    ease-out
    forwards;
}


@keyframes fatwaDoubleTapLikeHeart {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(.25);
  }

  20% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.20);
  }

  48% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(.96);
  }

  72% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(1.13);
  }
}

/* FATWA_DOUBLE_TAP_LIKE_V2 */

.social-reel-post {
  touch-action: pan-y pinch-zoom !important;
}

/* FATWA_PROFILE_REELS_COMMENTS_LAYER_FIX_V1 */

/*
 * Profile fullscreen reels are z-index 300000.
 * Comments must appear ABOVE the reel.
 */

html body .social-comments-modal {
  z-index: 320000 !important;
}


/* Comment edit/delete bottom sheet */
html body .fatwa-comment-manager-modal {
  z-index: 330000 !important;
}


/*
 * Keep comment sheet fully usable above fullscreen reel.
 */
html body .social-comments-modal
.social-comments-dialog {
  position: relative !important;
  z-index: 320010 !important;
}


/*
 * When keyboard opens on mobile,
 * comments must remain scrollable.
 */
html body .social-comments-modal {
  overflow: hidden !important;
}

html body .social-comments-modal
.social-comments-dialog {
  max-height: min(78dvh, 720px) !important;
  overflow: hidden !important;
}

html body .social-comments-modal
#social-comments-list {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* FATWA_PUBLIC_PROFILE_V1 */

.social-public-profile[hidden] {
  display: none !important;
}


.social-public-profile {
  position: fixed !important;

  z-index: 240000 !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  background: #001710 !important;

  color: #fff;

  overflow: hidden;
}


.social-public-profile-scroll {
  width: 100%;
  height: 100%;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: none;
}


.social-public-profile-scroll::-webkit-scrollbar {
  display: none;
}


/* Header */

.social-public-profile-head {
  position: sticky;

  z-index: 30;

  top: 0;

  min-height: 58px;

  display: grid;

  grid-template-columns:
    52px 1fr 52px;

  align-items: center;

  padding:
    env(safe-area-inset-top)
    10px
    0;

  box-sizing: border-box;

  background:
    rgba(0,23,16,.90);

  backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}


.social-public-profile-head strong {
  grid-column: 2;

  text-align: center;

  font-size: 15px;
}


#social-public-profile-close {
  grid-column: 1;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: #fff;

  font-size: 30px;

  cursor: pointer;
}


/* Cover */

.social-public-profile-cover {
  width: 100%;
  height: clamp(115px, 18vh, 180px);

  background:
    linear-gradient(
      135deg,
      #063b2b,
      #0a241c
    );

  background-position: center;
  background-size: cover;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


/* Main */

.social-public-profile-main {
  display: flex;

  flex-direction: column;
  align-items: center;

  padding:
    0 18px 20px;
}


.social-public-profile-avatar {
  width: 92px;
  height: 92px;

  margin-top: -47px;

  display: grid;
  place-items: center;

  border:
    4px solid
    #001710;

  border-radius: 50%;

  background:
    #35dd89;

  background-position: center;
  background-size: cover;

  color:
    #032017;

  font-size: 34px;
  font-weight: 900;

  box-shadow:
    0 8px 28px
    rgba(0,0,0,.30);
}


.social-public-profile-avatar.has-image {
  color: transparent;
}


.social-public-profile-name {
  margin-top: 10px;

  font-size: 19px;
}


.social-public-profile-handle {
  margin-top: 3px;

  color:
    #8ba79c;

  font-size: 12px;
}


.social-public-profile-bio {
  max-width: 520px;

  margin:
    13px auto 0;

  color:
    #d4e2dc;

  font-size: 13px;
  line-height: 1.55;

  text-align: center;

  white-space: pre-wrap;
}


.social-public-profile-stats {
  display: flex;

  justify-content: center;

  margin-top: 17px;
}


.social-public-profile-stats > div {
  min-width: 90px;

  display: flex;

  flex-direction: column;
  align-items: center;

  gap: 2px;
}


.social-public-profile-stats strong {
  font-size: 17px;
}


.social-public-profile-stats span {
  color:
    #829a90;

  font-size: 11px;
}


/* Videos */

.social-public-profile-videos {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 2px;

  width: 100%;

  padding-bottom:
    calc(
      30px +
      env(safe-area-inset-bottom)
    );
}


.social-public-profile-videos
.social-video-card {
  position: relative !important;

  aspect-ratio: 9 / 13;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  overflow: hidden;

  background: #031d15;

  cursor: pointer;
}


.social-public-profile-videos
.social-video-card video {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  pointer-events: none;
}


.social-public-profile-videos
.social-video-card-info {
  display: none !important;
}


.social-public-profile-videos
.social-profile-video-play {
  width: 46px;
  height: 46px;

  font-size: 17px;
}


/* Status */

.social-public-profile-status {
  min-height: 20px;

  margin: 10px 16px;

  color: #ff9c9c;

  font-size: 11px;

  text-align: center;
}


/* Reel creator avatar */

.social-reel-avatar {
  background-position:
    center !important;

  background-size:
    cover !important;
}


/* Arabic */

html[dir="rtl"]
.social-public-profile {
  direction: rtl;
}


html[dir="rtl"]
#social-public-profile-close {
  grid-column: 3;
}


html[dir="rtl"]
.social-public-profile-head strong {
  grid-column: 2;
}


/* Other languages */

html:not([dir="rtl"])
.social-public-profile {
  direction: ltr;
}

/* FATWA_FOLLOW_SYSTEM_V1 */

.social-public-profile-stats {
  width: min(420px, 100%) !important;

  display: grid !important;

  grid-template-columns:
    repeat(3, 1fr) !important;

  gap: 0 !important;

  margin-top: 18px !important;
}


.social-public-profile-stats > div {
  min-width: 0 !important;

  padding: 4px 12px;

  border-inline-end:
    1px solid
    rgba(255,255,255,.07);
}


.social-public-profile-stats > div:last-child {
  border-inline-end: 0;
}


.social-public-profile-stats strong {
  font-size: 18px !important;

  color: #35dd89;
}


.social-public-profile-stats span {
  margin-top: 3px;

  color: #879d94;

  font-size: 11px;
}


.social-public-profile-follow {
  width: min(380px, 100%);

  min-height: 46px;

  margin-top: 17px;

  padding: 0 22px;

  border: 0;

  border-radius: 14px;

  background: #35dd89;

  color: #022017;

  font: inherit;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s ease,
    opacity .15s ease,
    background .15s ease;
}


.social-public-profile-follow:active {
  transform: scale(.98);
}


.social-public-profile-follow:disabled {
  opacity: .55;

  cursor: default;
}


.social-public-profile-follow.is-following {
  border:
    1px solid
    rgba(53,221,137,.28);

  background:
    rgba(53,221,137,.08);

  color: #5ae6a0;
}

/* FATWA_EXPLORE_FULLSCREEN_V1 */

/* Explore page must remain vertically scrollable */
html body.fatwa-social-shell
#social-explore-screen {
  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;

  touch-action: pan-y !important;

  padding-bottom:
    calc(
      var(--social-nav-h, 84px)
      + 24px
      + env(safe-area-inset-bottom)
    ) !important;
}


/* Explore uploaded video grid */
html body.fatwa-social-shell
#social-uploaded-videos {
  overflow: visible !important;
}


/* No tiny player controls anymore */
html body.fatwa-social-shell
#social-uploaded-videos
.social-video-card video {
  pointer-events: none !important;

  object-fit: cover !important;
}


/* Cards behave like Reel thumbnails */
html body.fatwa-social-shell
#social-uploaded-videos
.social-explore-video-card {
  cursor: pointer !important;

  touch-action: manipulation !important;
}


/* keep title/language below thumbnail */
html body.fatwa-social-shell
#social-uploaded-videos
.social-video-card-info {
  pointer-events: none !important;
}

/* FATWA_REEL_FOLLOW_V1 */

.social-reel-creator {
  display: flex !important;
  align-items: center !important;

  gap: 9px !important;

  max-width:
    calc(100% - 76px) !important;
}


.social-reel-creator > div:nth-child(2) {
  min-width: 0;

  flex:
    0 1 auto;
}


.social-reel-follow {
  flex: 0 0 auto;

  min-height: 30px;

  margin-inline-start: 4px;

  padding:
    5px 13px;

  border:
    1px solid
    rgba(255,255,255,.78);

  border-radius:
    8px;

  background:
    rgba(0,0,0,.16);

  color: #fff;

  font-family: inherit;
  font-size: 11px;
  font-weight: 800;

  line-height: 1;

  cursor: pointer;

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.social-reel-follow:active {
  transform:
    scale(.96);
}


.social-reel-follow:disabled {
  opacity: .55;

  cursor: default;
}


.social-reel-follow.is-following {
  border-color:
    rgba(53,221,137,.48);

  background:
    rgba(53,221,137,.14);

  color:
    #64e8a7;
}


/* Arabic */
html[dir="rtl"]
.social-reel-creator {
  direction: rtl;
}


/* Other 4 languages */
html:not([dir="rtl"])
.social-reel-creator {
  direction: ltr;
}

/* FATWA_REPOST_SYSTEM_V1 */

.social-reel-repost span {
  font-size: 25px !important;
  line-height: 1 !important;
}

.social-reel-repost.active {
  color: #35dd89 !important;
}

.social-reel-repost.active span {
  color: #35dd89 !important;
}

/* FATWA_PROFILE_REPOSTS_V1 */

.social-profile-media-tabs {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  margin:
    8px 0 12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


.social-profile-media-tab {
  position: relative;

  min-height: 44px;

  padding:
    8px 10px 11px;

  border: 0;

  background: transparent;

  color:
    #81988e;

  font-family: inherit;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;
}


.social-profile-media-tab.active {
  color: #fff;
}


.social-profile-media-tab.active::after {
  content: "";

  position: absolute;

  left: 22%;
  right: 22%;
  bottom: -1px;

  height: 2px;

  border-radius: 999px;

  background:
    #35dd89;
}


/* Important: hidden tab must really disappear */

#social-profile-videos[hidden],
#social-profile-reposts[hidden] {
  display: none !important;
}


/* Repost grid uses same visual layout as profile videos */

#social-profile-reposts {
  width: 100%;
}


/* Arabic */
html[dir="rtl"]
.social-profile-media-tabs {
  direction: rtl;
}


/* DE / EN / TR / ID */
html:not([dir="rtl"])
.social-profile-media-tabs {
  direction: ltr;
}

/* FATWA_PROFILE_REPOST_TAB_CLICK_FIX_V3 */

.social-profile-videos-block {
  position: relative !important;
}

.social-profile-media-tabs {
  position: relative !important;
  z-index: 500 !important;
  pointer-events: auto !important;
}

.social-profile-media-tab {
  position: relative !important;
  z-index: 501 !important;

  pointer-events: auto !important;
  touch-action: manipulation !important;

  cursor: pointer !important;
}

#social-profile-videos,
#social-profile-reposts {
  position: relative;
  z-index: 1;
}


/* FATWA_NOTIFICATIONS_UI_V1 */

#social-profile-notifications-button {
  position: absolute !important;
  z-index: 6 !important;

  left: 8px !important;
  right: auto !important;

  top: 50% !important;

  transform:
    translateY(-50%) !important;

  width: 44px !important;
  height: 44px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border:
    1px solid
    rgba(53,221,137,.30) !important;

  border-radius:
    14px !important;

  background:
    rgba(2,45,32,.88) !important;

  color:
    #35dd89 !important;

  cursor: pointer !important;
}


#social-profile-notifications-button svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


#social-notification-badge {
  position: absolute;

  top: -5px;
  right: -5px;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  display: grid;
  place-items: center;

  border:
    2px solid #001912;

  border-radius: 999px;

  background: #35dd89;

  color: #002017;

  font-size: 9px;
  font-weight: 900;
}


#social-notification-badge[hidden] {
  display: none !important;
}


/* =====================================
   FULL NOTIFICATION LAYER
   ===================================== */

.social-notifications-modal[hidden] {
  display: none !important;
}


.social-notifications-modal {
  position: fixed;

  z-index: 350000;

  inset: 0;

  display: flex;

  justify-content: center;

  padding:
    18px 12px
    calc(18px + env(safe-area-inset-bottom));

  background:
    rgba(0,8,6,.74);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.social-notifications-panel {
  width:
    min(455px, 100%);

  max-height:
    calc(100dvh - 36px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(53,221,137,.24);

  border-radius: 24px;

  background:
    #001912;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.50);
}


.social-notifications-head {
  flex: 0 0 auto;

  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 13px;

  border-bottom:
    1px solid
    rgba(53,221,137,.12);
}


.social-notifications-head strong {
  color: #fff;

  font-size: 18px;
  font-weight: 850;
}


#social-notifications-close {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(53,221,137,.22);

  border-radius: 13px;

  background:
    rgba(53,221,137,.07);

  color: #fff;

  font-size: 24px;

  cursor: pointer;
}


.social-notifications-list {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding: 7px;

  scrollbar-width: none;
}


.social-notifications-list::-webkit-scrollbar {
  display: none;
}


.social-notification-item {
  position: relative;

  width: 100%;

  min-height: 72px;

  display: grid;

  grid-template-columns:
    48px minmax(0,1fr) 38px;

  align-items: center;

  gap: 10px;

  padding: 9px;

  border: 0;
  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  border-radius: 14px;

  background: transparent;

  color: #fff;

  font-family: inherit;

  text-align: start;

  cursor: pointer;
}


.social-notification-item.unread {
  background:
    rgba(53,221,137,.07);
}


.social-notification-item.unread::before {
  content: "";

  position: absolute;

  inset-inline-start: 4px;

  top: 50%;

  width: 5px;
  height: 5px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background: #35dd89;
}


.social-notification-avatar {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(53,221,137,.34);

  border-radius: 50%;

  background:
    #05271d
    center / cover
    no-repeat;

  color: #72e9aa;

  font-size: 15px;
  font-weight: 900;
}


.social-notification-avatar.has-image {
  color: transparent;
}


.social-notification-copy {
  min-width: 0;

  display: block;
}


.social-notification-copy strong {
  display: block;

  color: #eff8f4;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.55;
}


.social-notification-copy small {
  display: block;

  margin-top: 3px;

  color: #718b81;

  font-size: 9px;
}


.social-notification-type {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  justify-self: end;

  border:
    1px solid
    rgba(53,221,137,.17);

  border-radius: 50%;

  background:
    rgba(53,221,137,.055);

  color: #68e6a2;

  font-size: 17px;
  font-weight: 800;
}


.social-notification-type[data-type="like"] {
  color: #ff7d98;
}


.social-notification-type[data-type="comment"] {
  color: #72cfff;
}


.social-notification-type[data-type="repost"] {
  color: #35dd89;
}


.social-notifications-empty {
  min-height: 230px;

  display: grid;
  place-items: center;

  padding: 24px;

  color: #80958d;

  font-size: 11px;

  text-align: center;
}


/* Arabic */
html[dir="rtl"]
.social-notifications-panel {
  direction: rtl;
}


/* DE / EN / TR / ID */
html:not([dir="rtl"])
.social-notifications-panel {
  direction: ltr;
}


@media (max-width: 700px) {

  .social-notifications-modal {
    padding: 0;
  }

  .social-notifications-panel {
    width: 100%;
    max-width: none;

    height: 100dvh;
    max-height: 100dvh;

    border: 0;
    border-radius: 0;
  }
}


/* FATWA_FOLLOW_LISTS_V1 */

/* Profile statistics are clickable */
#social-profile-screen
.social-profile-stats
div:nth-child(1),

#social-profile-screen
.social-profile-stats
div:nth-child(2),

#social-public-profile-following-count,
#social-public-profile-followers-count {
  cursor: pointer !important;
}


/* =====================================
   MODAL
   ===================================== */

.social-follow-list-modal[hidden] {
  display: none !important;
}


.social-follow-list-modal {
  position: fixed;

  z-index: 360000;

  inset: 0;

  display: flex;

  justify-content: center;

  padding:
    18px 12px
    calc(18px + env(safe-area-inset-bottom));

  background:
    rgba(0,8,6,.76);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.social-follow-list-panel {
  width:
    min(455px, 100%);

  max-height:
    calc(100dvh - 36px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(53,221,137,.24);

  border-radius:
    24px;

  background:
    #001912;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.50);
}


.social-follow-list-head {
  flex: 0 0 auto;

  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    10px 13px;

  border-bottom:
    1px solid
    rgba(53,221,137,.12);
}


.social-follow-list-head strong {
  color: #fff;

  font-size: 18px;
  font-weight: 850;
}


#social-follow-list-close {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(53,221,137,.22);

  border-radius: 13px;

  background:
    rgba(53,221,137,.07);

  color: #fff;

  font-size: 24px;

  cursor: pointer;
}


.social-follow-list-content {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding: 7px;

  scrollbar-width: none;
}


.social-follow-list-content::-webkit-scrollbar {
  display: none;
}


.social-follow-list-row {
  width: 100%;

  min-height: 68px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  align-items: center;

  gap: 10px;

  padding: 8px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.social-follow-list-user {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #fff;

  font-family: inherit;

  text-align: start;

  cursor: pointer;
}


.social-follow-list-avatar {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(53,221,137,.34);

  border-radius: 50%;

  background:
    #05271d
    center / cover
    no-repeat;

  color: #72e9aa;

  font-size: 15px;
  font-weight: 900;
}


.social-follow-list-avatar.has-image {
  color: transparent;
}


.social-follow-list-copy {
  min-width: 0;
}


.social-follow-list-copy strong {
  display: block;

  overflow: hidden;

  color: #f1f7f4;

  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.social-follow-list-copy small {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #789087;

  font-size: 9px;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.social-follow-list-action {
  min-width: 76px;
  min-height: 34px;

  padding: 6px 11px;

  border: 0;

  border-radius: 10px;

  background: #35dd89;

  color: #032017;

  font-family: inherit;

  font-size: 10px;
  font-weight: 850;

  cursor: pointer;
}


.social-follow-list-action.is-following {
  border:
    1px solid
    rgba(53,221,137,.28);

  background:
    rgba(53,221,137,.09);

  color: #68e6a2;
}


.social-follow-list-action:disabled {
  opacity: .55;
}


.social-follow-list-empty {
  min-height: 220px;

  display: grid;
  place-items: center;

  padding: 24px;

  color: #80958d;

  font-size: 11px;

  text-align: center;
}


/* Arabic */
html[dir="rtl"]
.social-follow-list-panel {
  direction: rtl;
}


/* DE / EN / TR / ID */
html:not([dir="rtl"])
.social-follow-list-panel {
  direction: ltr;
}


@media (max-width: 700px) {

  .social-follow-list-modal {
    padding: 0;
  }

  .social-follow-list-panel {
    width: 100%;

    height: 100dvh;
    max-height: 100dvh;

    border: 0;
    border-radius: 0;
  }
}


/* FATWA_AR_PROFILE_HEADER_BUTTONS_FIX_V1 */

/* Arabic:
   ☰ stays at far left
   🔔 sits next to it
*/
html[dir="rtl"]
#social-profile-account-button {
  left: 8px !important;
  right: auto !important;
}

html[dir="rtl"]
#social-profile-notifications-button {
  left: 60px !important;
  right: auto !important;
}


/* Give both buttons enough room */
html[dir="rtl"]
#social-profile-screen
.social-page-head {
  padding-left: 112px !important;
  padding-right: 10px !important;
}


/* DE / EN / TR / ID stay as they are */
html:not([dir="rtl"])
#social-profile-notifications-button {
  left: 8px !important;
  right: auto !important;
}

html:not([dir="rtl"])
#social-profile-account-button {
  right: 8px !important;
  left: auto !important;
}


/* FATWA_PROFILE_HEADER_MIRROR_FINAL_V1 */

/* =========================================
   ARABIC RTL
   ☰ far right
   🔔 directly next to it
   ========================================= */

html[dir="rtl"]
#social-profile-account-button {
  right: 8px !important;
  left: auto !important;
}

html[dir="rtl"]
#social-profile-notifications-button {
  right: 60px !important;
  left: auto !important;
}

html[dir="rtl"]
#social-profile-account-popover {
  right: 8px !important;
  left: auto !important;
}


/* =========================================
   DE / EN / TR / ID
   ☰ far left
   🔔 directly next to it
   ========================================= */

html:not([dir="rtl"])
#social-profile-account-button {
  left: 8px !important;
  right: auto !important;
}

html:not([dir="rtl"])
#social-profile-notifications-button {
  left: 60px !important;
  right: auto !important;
}

html:not([dir="rtl"])
#social-profile-account-popover {
  left: 8px !important;
  right: auto !important;
}


/* Plus always exactly in the center */

#social-profile-screen
.fatwa-profile-upload-center {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;

  transform:
    translateX(-50%) !important;
}


/* Mobile must use the same mirrored positions */

@media (max-width: 700px) {

  html[dir="rtl"]
  #social-profile-account-button {
    right: 8px !important;
    left: auto !important;
  }

  html[dir="rtl"]
  #social-profile-notifications-button {
    right: 60px !important;
    left: auto !important;
  }


  html:not([dir="rtl"])
  #social-profile-account-button {
    left: 8px !important;
    right: auto !important;
  }

  html:not([dir="rtl"])
  #social-profile-notifications-button {
    left: 60px !important;
    right: auto !important;
  }
}


/* FATWA_PROFILE_HEADER_LANGUAGE_SIDE_FINAL */

/* ==============================
   ARABIC = LEFT
   ============================== */

html[dir="rtl"] body
#social-profile-account-button {
  left: 8px !important;
  right: auto !important;
}

html[dir="rtl"] body
#social-profile-notifications-button {
  left: 60px !important;
  right: auto !important;
}

html[dir="rtl"] body
#social-profile-account-popover {
  left: 8px !important;
  right: auto !important;
}


/* ==============================
   DE / EN / TR / ID = RIGHT
   ============================== */

html:not([dir="rtl"]) body
#social-profile-account-button {
  right: 8px !important;
  left: auto !important;
}

html:not([dir="rtl"]) body
#social-profile-notifications-button {
  right: 60px !important;
  left: auto !important;
}

html:not([dir="rtl"]) body
#social-profile-account-popover {
  right: 8px !important;
  left: auto !important;
}


/* + ALWAYS CENTER */

html body
#social-profile-screen
.fatwa-profile-upload-center {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}


/* FATWA_PROFILE_POPOVER_COMPACT_TEXT_V1 */

/* Saved / Saved verses */
#social-profile-account-popover
.social-profile-shortcuts strong {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#social-profile-account-popover
.social-profile-shortcuts small {
  font-size: 8px !important;
}

#social-profile-account-popover
.social-profile-shortcuts button,
#social-profile-account-popover
.social-profile-shortcuts a {
  min-height: 64px !important;
  padding: 9px 10px !important;
}

#social-profile-account-popover
.social-profile-shortcuts span {
  font-size: 18px !important;
}


/* Previous questions / Settings / Support */
#social-profile-account-popover
.social-profile-menu button {
  min-height: 46px !important;
  padding: 0 10px !important;
}

#social-profile-account-popover
.social-profile-menu strong {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

#social-profile-account-popover
.social-profile-menu span {
  font-size: 15px !important;
}

#social-profile-account-popover
.social-profile-menu b {
  font-size: 15px !important;
}


/* Signed-in text */
#social-profile-account-popover
.social-profile-note {
  font-size: 7px !important;
}


/* Slightly more compact overall */
#social-profile-account-popover {
  width: min(340px, calc(100vw - 32px)) !important;
  padding: 8px !important;
}


/* FATWA_PROFILE_POPOVER_SMALLER_V2 */

/* Top two cards */
#social-profile-account-popover
.social-profile-shortcuts strong {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

#social-profile-account-popover
.social-profile-shortcuts button,
#social-profile-account-popover
.social-profile-shortcuts a {
  min-height: 54px !important;
  padding: 7px 8px !important;
}

#social-profile-account-popover
.social-profile-shortcuts span {
  font-size: 15px !important;
}


/* Menu rows */
#social-profile-account-popover
.social-profile-menu button {
  min-height: 40px !important;
  padding: 0 8px !important;
}

#social-profile-account-popover
.social-profile-menu strong {
  font-size: 9px !important;
  line-height: 1.2 !important;
}

#social-profile-account-popover
.social-profile-menu span {
  font-size: 13px !important;
}

#social-profile-account-popover
.social-profile-menu b {
  font-size: 13px !important;
}


/* Login info */
#social-profile-account-popover
.social-profile-note {
  font-size: 6px !important;
}


/* Whole popup smaller */
#social-profile-account-popover {
  width: min(310px, calc(100vw - 32px)) !important;
  padding: 6px !important;
}


/* FATWA_PROFILE_POPOVER_TINY_TEXT_FINAL */

/* Gespeichert / Gespeicherte Verse */
html body
#social-profile-account-popover
.social-profile-shortcuts strong {
  font-size: 8px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Frühere Fragen / Einstellungen / Hilfe & Support */
html body
#social-profile-account-popover
.social-profile-menu strong {
  font-size: 8px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Icons smaller too */
html body
#social-profile-account-popover
.social-profile-shortcuts span {
  font-size: 12px !important;
}

html body
#social-profile-account-popover
.social-profile-menu span {
  font-size: 11px !important;
}

/* Smaller rows */
html body
#social-profile-account-popover
.social-profile-shortcuts button,
html body
#social-profile-account-popover
.social-profile-shortcuts a {
  min-height: 45px !important;
  padding: 5px 6px !important;
}

html body
#social-profile-account-popover
.social-profile-menu button {
  min-height: 34px !important;
  padding: 0 7px !important;
}

/* Whole popup */
html body
#social-profile-account-popover {
  width: min(300px, calc(100vw - 28px)) !important;
  padding: 5px !important;
}

/* Login info tiny */
html body
#social-profile-account-popover
.social-profile-note {
  font-size: 5px !important;
}


/* FATWA_PROFILE_MENU_FONT_TINY_FINAL */

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-shortcuts
button strong,

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-shortcuts
a strong,

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-menu
button strong {
  font-size: 7px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
}


/* numbers مثل 5 */
html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-shortcuts small {
  font-size: 6px !important;
}


/* login email */
html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-note {
  font-size: 5px !important;
}


/* FATWA_PROFILE_MENU_FONT_14_FINAL */

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-shortcuts
button strong,

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-shortcuts
a strong,

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-menu
button strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

html body.fatwa-social-shell
#social-profile-account-popover
.social-profile-shortcuts small {
  font-size: 10px !important;
}

/* FATWA_EXPLORE_REAL_SEARCH_SAFE_V2 */

#social-explore-grid {
  display: none !important;
}

#social-uploaded-videos
.social-video-card[hidden] {
  display: none !important;
}

.social-explore-account-results {
  margin: 4px 10px 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.social-explore-account-results[hidden] {
  display: none !important;
}

#social-explore-account-results-title {
  display: block;
  margin: 0 4px 7px;
  color: #fff;
  font-size: 12px;
}

.social-explore-account-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px;
}

.social-explore-account-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  text-align: start;
}

.social-explore-account-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(53,221,137,.3);
  border-radius: 50%;
  background: #05271d center/cover no-repeat;
  color: #68e6a2;
  font-weight: 800;
}

.social-explore-account-avatar.has-image {
  color: transparent;
}

.social-explore-account-copy {
  min-width: 0;
}

.social-explore-account-copy strong {
  display: block;
  font-size: 11px;
}

.social-explore-account-copy small {
  display: block;
  margin-top: 2px;
  color: #789087;
  font-size: 8px;
}

.social-explore-account-follow {
  min-width: 68px;
  min-height: 31px;
  border: 0;
  border-radius: 9px;
  background: #35dd89;
  color: #032017;
  font-size: 9px;
  font-weight: 800;
}

.social-explore-account-follow.is-following {
  border: 1px solid rgba(53,221,137,.3);
  background: rgba(53,221,137,.08);
  color: #64e8a7;
}

.social-explore-account-empty {
  padding: 15px 5px;
  color: #7d9189;
  font-size: 9px;
  text-align: center;
}

/* FATWA_REMOVE_EXPLORE_DEMO_FINAL */

#social-explore-grid,
.social-explore-grid {
  display: none !important;
}

#social-explore-screen
#social-uploaded-videos {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

/* FATWA_BLOCK_REPORT_SAFE_V3 */

.social-reel-post[hidden],
.social-video-card[hidden] {
  display: none !important;
}

.fatwa-reel-more {
  position: absolute !important;
  z-index: 50 !important;

  top: 14px !important;
  right: 14px !important;

  width: 40px !important;
  height: 40px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 50% !important;

  background: rgba(0,0,0,.42) !important;
  color: #fff !important;

  font-size: 22px !important;
  cursor: pointer !important;
}

.fatwa-mod-modal[hidden] {
  display: none !important;
}

.fatwa-mod-modal {
  position: fixed;
  z-index: 500000;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}

.fatwa-mod-sheet[hidden] {
  display: none !important;
}

.fatwa-mod-sheet {
  width: min(430px, 100%);

  display: grid;
  gap: 7px;

  padding: 12px;

  border: 1px solid rgba(53,221,137,.22);
  border-radius: 20px;

  background: #031b14;
}

.fatwa-mod-sheet strong {
  padding: 8px;

  color: #fff;
  font-size: 14px;
  text-align: center;
}

.fatwa-mod-sheet button,
#fatwa-mod-reason {
  width: 100%;
  min-height: 45px;

  border: 1px solid rgba(53,221,137,.16);
  border-radius: 11px;

  background: rgba(53,221,137,.055);
  color: #fff;

  font-family: inherit;
  font-size: 11px;
}

#fatwa-mod-block {
  color: #ff9b9b;
}

#fatwa-mod-send {
  background: #35dd89;
  color: #032017;
  font-weight: 800;
}

#fatwa-mod-reason {
  padding: 0 10px;
  background: #06241b;
}


/* FATWA_ADMIN_MODERATION_UI_V1 */

.fatwa-admin-moderation-modal[hidden] {
  display: none !important;
}

.fatwa-admin-moderation-modal {
  position: fixed;
  z-index: 600000;
  inset: 0;

  display: flex;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.75);
  backdrop-filter: blur(9px);
}

.fatwa-admin-panel {
  width: min(520px,100%);
  height: min(760px,calc(100dvh - 24px));

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(53,221,137,.25);
  border-radius: 22px;

  background: #031b14;
}

.fatwa-admin-head {
  min-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;

  border-bottom: 1px solid rgba(53,221,137,.12);
}

.fatwa-admin-head strong {
  color: #fff;
  font-size: 15px;
}

#fatwa-admin-close {
  width: 38px;
  height: 38px;

  border: 1px solid rgba(53,221,137,.2);
  border-radius: 11px;

  background: rgba(53,221,137,.06);
  color: #fff;

  font-size: 22px;
}

.fatwa-admin-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fatwa-admin-tabs button {
  min-height: 42px;

  border: 0;

  background: transparent;
  color: #718a81;

  font-family: inherit;
  font-size: 11px;
}

.fatwa-admin-tabs button.active {
  color: #35dd89;
  border-bottom: 2px solid #35dd89;
}

.fatwa-admin-report-list {
  flex: 1;
  overflow-y: auto;

  padding: 8px;
}

.fatwa-admin-report-card {
  margin-bottom: 8px;
  padding: 11px;

  border: 1px solid rgba(53,221,137,.14);
  border-radius: 15px;

  background: rgba(53,221,137,.035);
}

.fatwa-admin-report-type {
  display: block;

  margin-bottom: 7px;

  color: #fff;
  font-size: 12px;
}

.fatwa-admin-video-title {
  margin-bottom: 7px;

  color: #35dd89;
  font-size: 10px;
}

.fatwa-admin-report-meta {
  display: grid;
  gap: 4px;

  color: #81978e;
  font-size: 9px;
}

.fatwa-admin-report-meta b {
  color: #dce8e3;
}

.fatwa-admin-report-meta small {
  margin-top: 3px;
  color: #647b72;
}

.fatwa-admin-report-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;

  margin-top: 10px;
}

.fatwa-admin-report-actions button {
  min-height: 34px;

  padding: 5px 9px;

  border: 1px solid rgba(53,221,137,.2);
  border-radius: 9px;

  background: rgba(53,221,137,.07);
  color: #dff8eb;

  font-family: inherit;
  font-size: 9px;
}

.fatwa-admin-report-actions button.danger {
  border-color: rgba(255,90,90,.25);
  color: #ff9d9d;
}

.fatwa-admin-empty {
  min-height: 220px;

  display: grid;
  place-items: center;

  padding: 20px;

  color: #748b82;
  font-size: 10px;
  text-align: center;
}

#fatwa-admin-moderation-button strong {
  font-size: 14px !important;
}


/* FATWA_ADMIN_MODERATION_UI_V1 */

.fatwa-admin-moderation-modal[hidden] {
  display: none !important;
}

.fatwa-admin-moderation-modal {
  position: fixed;
  z-index: 600000;
  inset: 0;

  display: flex;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.75);
  backdrop-filter: blur(9px);
}

.fatwa-admin-panel {
  width: min(520px,100%);
  height: min(760px,calc(100dvh - 24px));

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(53,221,137,.25);
  border-radius: 22px;

  background: #031b14;
}

.fatwa-admin-head {
  min-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;

  border-bottom: 1px solid rgba(53,221,137,.12);
}

.fatwa-admin-head strong {
  color: #fff;
  font-size: 15px;
}

#fatwa-admin-close {
  width: 38px;
  height: 38px;

  border: 1px solid rgba(53,221,137,.2);
  border-radius: 11px;

  background: rgba(53,221,137,.06);
  color: #fff;

  font-size: 22px;
}

.fatwa-admin-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fatwa-admin-tabs button {
  min-height: 42px;

  border: 0;

  background: transparent;
  color: #718a81;

  font-family: inherit;
  font-size: 11px;
}

.fatwa-admin-tabs button.active {
  color: #35dd89;
  border-bottom: 2px solid #35dd89;
}

.fatwa-admin-report-list {
  flex: 1;
  overflow-y: auto;

  padding: 8px;
}

.fatwa-admin-report-card {
  margin-bottom: 8px;
  padding: 11px;

  border: 1px solid rgba(53,221,137,.14);
  border-radius: 15px;

  background: rgba(53,221,137,.035);
}

.fatwa-admin-report-type {
  display: block;

  margin-bottom: 7px;

  color: #fff;
  font-size: 12px;
}

.fatwa-admin-video-title {
  margin-bottom: 7px;

  color: #35dd89;
  font-size: 10px;
}

.fatwa-admin-report-meta {
  display: grid;
  gap: 4px;

  color: #81978e;
  font-size: 9px;
}

.fatwa-admin-report-meta b {
  color: #dce8e3;
}

.fatwa-admin-report-meta small {
  margin-top: 3px;
  color: #647b72;
}

.fatwa-admin-report-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;

  margin-top: 10px;
}

.fatwa-admin-report-actions button {
  min-height: 34px;

  padding: 5px 9px;

  border: 1px solid rgba(53,221,137,.2);
  border-radius: 9px;

  background: rgba(53,221,137,.07);
  color: #dff8eb;

  font-family: inherit;
  font-size: 9px;
}

.fatwa-admin-report-actions button.danger {
  border-color: rgba(255,90,90,.25);
  color: #ff9d9d;
}

.fatwa-admin-empty {
  min-height: 220px;

  display: grid;
  place-items: center;

  padding: 20px;

  color: #748b82;
  font-size: 10px;
  text-align: center;
}

#fatwa-admin-moderation-button strong {
  font-size: 14px !important;
}


/* FATWA_BLOCKED_ACCOUNTS_UI_V1 */

.fatwa-blocked-modal[hidden] {
  display: none !important;
}

.fatwa-blocked-modal {
  position: fixed;
  z-index: 650000;
  inset: 0;

  display: flex;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.74);
  backdrop-filter: blur(9px);
}

.fatwa-blocked-panel {
  width: min(455px,100%);
  max-height: calc(100dvh - 24px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(53,221,137,.24);
  border-radius: 22px;

  background: #031b14;
}

.fatwa-blocked-head {
  min-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;

  border-bottom:
    1px solid rgba(53,221,137,.12);
}

.fatwa-blocked-head strong {
  color: #fff;
  font-size: 15px;
}

#fatwa-blocked-close {
  width: 38px;
  height: 38px;

  border: 1px solid rgba(53,221,137,.2);
  border-radius: 11px;

  background: rgba(53,221,137,.06);
  color: #fff;

  font-size: 22px;
}

.fatwa-blocked-list {
  flex: 1;
  overflow-y: auto;

  padding: 7px;
}

.fatwa-blocked-row {
  min-height: 66px;

  display: grid;
  grid-template-columns:
    46px minmax(0,1fr) auto;

  align-items: center;
  gap: 10px;

  padding: 8px;

  border-bottom:
    1px solid rgba(255,255,255,.055);
}

.fatwa-blocked-avatar {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(53,221,137,.30);
  border-radius: 50%;

  background:
    #05271d
    center / cover
    no-repeat;

  color: #68e6a2;

  font-size: 14px;
  font-weight: 800;
}

.fatwa-blocked-avatar.has-image {
  color: transparent;
}

.fatwa-blocked-copy {
  min-width: 0;
}

.fatwa-blocked-copy strong {
  display: block;

  overflow: hidden;

  color: #fff;
  font-size: 11px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.fatwa-blocked-copy small {
  display: block;

  margin-top: 2px;

  color: #788f86;
  font-size: 8px;
}

.fatwa-unblock-button {
  min-width: 80px;
  min-height: 34px;

  padding: 5px 10px;

  border: 1px solid rgba(53,221,137,.25);
  border-radius: 9px;

  background: rgba(53,221,137,.08);

  color: #64e8a7;

  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
}

.fatwa-unblock-button:disabled {
  opacity: .5;
}

.fatwa-blocked-empty {
  min-height: 220px;

  display: grid;
  place-items: center;

  padding: 20px;

  color: #788e85;

  font-size: 10px;
  text-align: center;
}

html[dir="rtl"]
.fatwa-blocked-panel {
  direction: rtl;
}

html:not([dir="rtl"])
.fatwa-blocked-panel {
  direction: ltr;
}

@media (max-width:700px) {

  .fatwa-blocked-modal {
    padding: 0;
  }

  .fatwa-blocked-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;

    border: 0;
    border-radius: 0;
  }
}


/* FATWA_BLOCKED_ACCOUNTS_UI_SAFE_V2 */

.fatwa-blocked-accounts-modal[hidden] {
  display: none !important;
}

.fatwa-blocked-accounts-modal {
  position: fixed;
  z-index: 700000;
  inset: 0;

  display: flex;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
}

.fatwa-blocked-accounts-panel {
  width: min(460px,100%);
  max-height: calc(100dvh - 24px);

  overflow: hidden;

  border: 1px solid rgba(53,221,137,.22);
  border-radius: 20px;

  background: #031b14;
}

.fatwa-blocked-accounts-head {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;

  border-bottom: 1px solid rgba(53,221,137,.12);
}

.fatwa-blocked-accounts-head strong {
  color: #fff;
  font-size: 14px;
}

#fatwa-blocked-modal-close {
  width: 38px;
  height: 38px;

  border: 1px solid rgba(53,221,137,.2);
  border-radius: 10px;

  background: rgba(53,221,137,.05);
  color: #fff;

  font-size: 21px;
}

.fatwa-blocked-accounts-list {
  max-height: calc(100dvh - 110px);
  overflow-y: auto;

  padding: 8px;
}

.fatwa-blocked-account-row {
  min-height: 62px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fatwa-blocked-user-copy {
  flex: 1;
  min-width: 0;
}

.fatwa-blocked-user-copy strong {
  display: block;

  color: #fff;
  font-size: 11px;
}

.fatwa-blocked-user-copy small {
  display: block;

  margin-top: 3px;

  color: #71877e;
  font-size: 9px;
}

.fatwa-blocked-unblock {
  min-height: 34px;

  padding: 5px 11px;

  border: 1px solid rgba(53,221,137,.25);
  border-radius: 9px;

  background: rgba(53,221,137,.08);
  color: #57e6a0;

  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
}

.fatwa-blocked-empty {
  min-height: 180px;

  display: grid;
  place-items: center;

  padding: 20px;

  color: #778d84;
  font-size: 10px;
  text-align: center;
}

#fatwa-blocked-settings-open {
  min-width: 54px !important;
  cursor: pointer;
}

/* FATWA_ADMIN_SUSPENSION_UI_V1 */

.fatwa-admin-suspension-modal[hidden] {
  display: none !important;
}

.fatwa-admin-suspension-modal {
  position: fixed;
  z-index: 750000;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 12px;

  background: rgba(0,0,0,.76);
  backdrop-filter: blur(9px);
}

.fatwa-admin-suspension-sheet {
  width: min(430px,100%);

  display: grid;
  gap: 9px;

  padding: 13px;

  border: 1px solid rgba(255,100,100,.22);
  border-radius: 20px;

  background: #031b14;
}

.fatwa-admin-suspension-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 4px;
}

.fatwa-admin-suspension-sheet header strong {
  color: #fff;
  font-size: 14px;
}

#fatwa-suspension-close {
  width: 36px;
  height: 36px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;

  background: transparent;
  color: #fff;

  font-size: 20px;
}

.fatwa-admin-suspension-sheet label {
  color: #8ca097;
  font-size: 9px;
}

#fatwa-suspension-duration,
#fatwa-suspension-reason {
  width: 100%;

  padding: 10px;

  border: 1px solid rgba(53,221,137,.18);
  border-radius: 10px;

  outline: none;

  background: #06241b;
  color: #fff;

  font-family: inherit;
  font-size: 10px;
}

#fatwa-suspension-reason {
  resize: vertical;
}

.fatwa-admin-suspension-sheet > button {
  min-height: 42px;

  border: 1px solid rgba(53,221,137,.18);
  border-radius: 10px;

  background: rgba(53,221,137,.06);
  color: #fff;

  font-family: inherit;
  font-size: 10px;
}

#fatwa-suspension-confirm {
  border-color: rgba(255,95,95,.28);
  background: rgba(255,80,80,.12);
  color: #ffaaaa;
  font-weight: 800;
}

.fatwa-admin-report-actions
.fatwa-admin-suspend-button {
  border-color: rgba(255,90,90,.25);
  color: #ffaaaa;
}

.fatwa-admin-report-actions
.fatwa-admin-suspend-button.active-suspension {
  border-color: rgba(53,221,137,.25);
  color: #5be8a3;
}

html[dir="rtl"]
.fatwa-admin-suspension-sheet {
  direction: rtl;
}

html:not([dir="rtl"])
.fatwa-admin-suspension-sheet {
  direction: ltr;
}

/* FATWA_VIDEO_HASHTAGS_REEL_V1 */

.social-reel-hashtags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 7px;
}

.social-reel-hashtag {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #55e69b;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.35;
  cursor: pointer;
}

.social-reel-hashtag:hover {
  text-decoration: underline;
}

.social-reel-hashtag:active {
  opacity: 0.7;
}


/* FATWA_HASHTAG_POINTER_FIX_V3
   Caption remains click-through,
   but hashtags themselves are interactive.
*/

.social-reel-caption .social-reel-hashtags {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

.social-reel-caption .social-reel-hashtag {
  position: relative !important;
  z-index: 51 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
}


/* FATWA_REEL_EDGE_BACK_V1
   Hide fullscreen Reel close button.
   Back navigation is done by right-edge swipe.
*/

#social-profile-reels-close {
  display: none !important;
}


/* FATWA_PASSWORD_RECOVERY_V1 */

.social-auth-forgot {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: -4px 0 12px;
  padding: 4px 0;

  border: 0;
  background: transparent;

  color: #35dd89;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;

  cursor: pointer;
}

.social-auth-forgot:hover {
  text-decoration: underline;
}

.social-auth-forgot:disabled {
  opacity: .55;
  cursor: wait;
}

html[dir="rtl"] .social-auth-forgot {
  margin-left: auto;
  margin-right: 0;
}

#social-auth-password-confirm-row[hidden],
#social-auth-email-row[hidden],
#social-auth-password-confirm-row[hidden],
.social-auth-tabs[hidden],
#social-auth-forgot[hidden] {
  display: none !important;
}



/* FATWA_PASSWORD_RESET_FROM_EMAIL_V3 */

.fatwa-password-reset-modal {
  position: fixed;
  z-index: 250000;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(0, 12, 8, .86);

  backdrop-filter:
    blur(12px);
}


.fatwa-password-reset-dialog {
  width: min(420px, 100%);

  box-sizing: border-box;

  display: grid;
  gap: 16px;

  padding: 22px;

  border:
    1px solid rgba(53,221,137,.3);

  border-radius: 24px;

  background:
    #032117;

  color: #fff;
}


.fatwa-password-reset-title {
  font-size: 1.15rem;
  font-weight: 800;
}


.fatwa-password-reset-dialog label {
  display: grid;
  gap: 7px;
}


.fatwa-password-reset-dialog label span {
  font-size: .85rem;
  opacity: .85;
}


.fatwa-password-reset-dialog input {
  width: 100%;
  height: 48px;

  box-sizing: border-box;

  padding: 0 14px;

  border:
    1px solid rgba(53,221,137,.32);

  border-radius: 14px;

  background:
    #f2f7ff;

  color: #05140e;

  font-size: 16px;

  outline: none;
}


.fatwa-password-reset-dialog input:focus {
  border-color:
    #35dd89;
}


#fatwa-reset-password-submit {
  min-height: 48px;

  border: 0;
  border-radius: 14px;

  background:
    #35dd89;

  color:
    #032117;

  font-weight: 800;

  cursor: pointer;
}


#fatwa-reset-password-submit:disabled {
  opacity: .6;
}


#fatwa-reset-password-status {
  min-height: 18px;

  margin: 0;

  font-size: .82rem;

  text-align: center;
}


html[dir="rtl"]
.fatwa-password-reset-dialog {
  direction: rtl;
  text-align: right;
}



/* =========================================================
   FATWA_DIRECT_MESSAGES_UI_V1
   ========================================================= */

.social-public-profile-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.social-public-profile-actions
.social-public-profile-follow,
.social-public-profile-message {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 14px;
}

.social-public-profile-message {
  border: 1px solid rgba(53,221,137,.45);
  background: rgba(53,221,137,.09);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}


/* Full-screen private messages */

.fatwa-dm-modal[hidden] {
  display: none !important;
}

.fatwa-dm-modal {
  position: fixed;
  z-index: 240000;
  inset: 0;

  background: #00170f;
  color: #fff;
}

.fatwa-dm-panel {
  width: min(720px, 100%);
  height: 100%;
  margin: 0 auto;

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto
    auto;

  background: #001b12;
}


/* Header */

.fatwa-dm-head {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 11px;

  padding:
    max(10px, env(safe-area-inset-top))
    14px
    10px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.fatwa-dm-back {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255,255,255,.06);

  color: #fff;

  font-size: 32px;
  line-height: 1;

  cursor: pointer;
}

.fatwa-dm-avatar {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    #063929;

  background-position: center;
  background-size: cover;

  font-weight: 900;
}

.fatwa-dm-avatar.has-image {
  color: transparent;
}

.fatwa-dm-person {
  min-width: 0;

  display: grid;
  gap: 2px;
}

.fatwa-dm-person strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: .98rem;
}

.fatwa-dm-person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color:
    rgba(255,255,255,.55);

  font-size: .77rem;
}


/* Messages */

.fatwa-dm-messages {
  min-height: 0;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  gap: 7px;

  padding: 16px 13px 22px;

  overscroll-behavior: contain;
}

.fatwa-dm-empty {
  margin: auto;
  padding: 24px;

  color:
    rgba(255,255,255,.54);

  text-align: center;
}

.fatwa-dm-bubble {
  width: fit-content;
  max-width: min(78%, 500px);

  box-sizing: border-box;

  padding:
    9px 11px
    6px;

  border-radius: 17px;

  overflow-wrap: anywhere;
}

.fatwa-dm-bubble p {
  margin: 0;

  white-space: pre-wrap;

  font-size: .96rem;
  line-height: 1.4;
}

.fatwa-dm-bubble small {
  display: block;

  margin-top: 3px;

  opacity: .57;

  font-size: .66rem;
}

.fatwa-dm-bubble.mine {
  align-self: flex-end;

  border-bottom-right-radius: 5px;

  background:
    #35dd89;

  color:
    #002416;
}

.fatwa-dm-bubble.theirs {
  align-self: flex-start;

  border-bottom-left-radius: 5px;

  background:
    rgba(255,255,255,.10);

  color:
    #fff;
}


/* Error / loading */

.fatwa-dm-status {
  min-height: 17px;

  box-sizing: border-box;

  margin: 0;
  padding: 2px 14px;

  color:
    rgba(255,255,255,.57);

  font-size: .72rem;
  text-align: center;
}

.fatwa-dm-status.error {
  color: #ff9999;
}


/* Composer */

.fatwa-dm-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;
  gap: 8px;

  padding:
    9px 12px
    calc(
      10px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid rgba(255,255,255,.08);

  background:
    #00170f;
}

#fatwa-dm-input {
  width: 100%;
  min-height: 46px;
  max-height: 120px;

  box-sizing: border-box;

  resize: none;

  padding:
    12px 14px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 18px;

  background:
    rgba(255,255,255,.07);

  color: #fff;

  font: inherit;
  font-size: 16px;

  outline: none;
}

#fatwa-dm-input:focus {
  border-color:
    rgba(53,221,137,.7);
}

#fatwa-dm-send {
  min-width: 70px;
  min-height: 46px;

  border: 0;
  border-radius: 16px;

  padding: 0 15px;

  background:
    #35dd89;

  color:
    #002416;

  font: inherit;
  font-weight: 900;

  cursor: pointer;
}

#fatwa-dm-send:disabled {
  opacity: .55;
}


/* Arabic / RTL */

html[dir="rtl"]
.fatwa-dm-panel {
  direction: rtl;
}

html[dir="rtl"]
.fatwa-dm-bubble.mine {
  align-self: flex-start;

  border-bottom-right-radius: 17px;
  border-bottom-left-radius: 5px;
}

html[dir="rtl"]
.fatwa-dm-bubble.theirs {
  align-self: flex-end;

  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 5px;
}



/* =========================================================
   FATWA_MESSAGES_BOTTOM_TAB_V1
   ========================================================= */

/* Six bottom navigation items */
html body.fatwa-social-shell #fatwa-bottom-nav {
  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;
}


#fatwa-bottom-nav .social-nav-item {
  width: 100% !important;
  min-width: 0 !important;

  padding-left: 2px !important;
  padding-right: 2px !important;
}


#fatwa-bottom-nav .social-nav-item small {
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: clamp(
    7px,
    1.8vw,
    9px
  ) !important;
}


/* Message icon unread badge */

#fatwa-bottom-nav
.social-nav-messages
.social-nav-icon-shell {
  position: relative;
}


.social-nav-message-badge {
  position: absolute;

  top: -5px;
  right: -8px;

  min-width: 16px;
  height: 16px;

  box-sizing: border-box;

  display: grid;
  place-items: center;

  padding: 0 4px;

  border-radius: 999px;

  background: #35dd89;
  color: #002416;

  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}


.social-nav-message-badge[hidden] {
  display: none !important;
}


/* =========================================================
   Messages screen
   ========================================================= */

.social-messages-screen {
  box-sizing: border-box;

  padding:
    13px
    12px
    calc(
      var(--social-nav-h) +
      16px +
      env(safe-area-inset-bottom)
    );
}


.social-messages-head {
  min-height: 48px;

  display: flex;
  align-items: center;

  padding: 0 3px 8px;
}


.social-messages-head strong {
  font-size: 1.18rem;
  font-weight: 900;
}


.social-messages-search {
  height: 46px;

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;
  gap: 9px;

  margin-bottom: 9px;
  padding: 0 13px;

  border:
    1px solid
    rgba(53,221,137,.14);

  border-radius: 15px;

  background:
    rgba(255,255,255,.045);
}


.social-messages-search span {
  opacity: .55;
  font-size: 20px;
}


#social-messages-search-input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: #fff;

  font: inherit;
  font-size: 16px;
}


.social-messages-list {
  display: grid;
}


.social-message-thread {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 11px;

  padding: 12px 4px;

  border: 0;
  border-bottom:
    1px solid
    rgba(255,255,255,.065);

  background: transparent;
  color: #fff;

  text-align: inherit;

  cursor: pointer;
}


.social-message-thread-avatar {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(53,221,137,.22);

  border-radius: 50%;

  background:
    #063829;

  background-size: cover;
  background-position: center;

  font-weight: 900;
}


.social-message-thread-avatar.has-image {
  color: transparent;
}


.social-message-thread-copy {
  min-width: 0;

  display: grid;
  gap: 5px;
}


.social-message-thread-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: .95rem;
}


.social-message-thread-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color:
    rgba(255,255,255,.55);

  font-size: .78rem;
}


.social-message-thread.has-unread
.social-message-thread-copy strong {
  font-weight: 900;
}


.social-message-thread-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
}


.social-message-thread-meta small {
  color:
    rgba(255,255,255,.45);

  font-size: .69rem;
}


.social-message-thread-meta b {
  min-width: 20px;
  height: 20px;

  box-sizing: border-box;

  display: grid;
  place-items: center;

  padding: 0 5px;

  border-radius: 999px;

  background:
    #35dd89;

  color:
    #002416;

  font-size: 10px;
  font-weight: 900;
}


.social-messages-empty {
  padding: 55px 20px;

  color:
    rgba(255,255,255,.48);

  text-align: center;
}


.social-messages-status {
  min-height: 18px;

  margin: 10px 0 0;

  color:
    rgba(255,255,255,.52);

  font-size: .76rem;
  text-align: center;
}


.social-messages-status.error {
  color: #ff9696;
}


/* Arabic */
html[dir="rtl"]
.social-message-thread-meta {
  justify-items: start;
}


html[dir="rtl"]
.social-messages-screen {
  direction: rtl;
}



/* =========================================================
   FATWA_DM_KEYBOARD_VIEWPORT_V1
   ========================================================= */

#fatwa-dm-modal:not([hidden]) {
  position: fixed !important;

  top:
    var(
      --fatwa-dm-visible-top,
      0px
    ) !important;

  bottom: auto !important;

  height:
    var(
      --fatwa-dm-visible-height,
      100dvh
    ) !important;

  max-height:
    var(
      --fatwa-dm-visible-height,
      100dvh
    ) !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}


/*
 * Messages area must be allowed to shrink
 * when the keyboard opens.
 */

#fatwa-dm-messages {
  min-height: 0 !important;

  overflow-y: auto !important;

  overscroll-behavior-y: contain;

  scroll-padding-bottom:
    20px !important;
}


/*
 * Composer always remains inside the
 * visible area, directly above keyboard.
 */

#fatwa-dm-form {
  position: relative !important;

  flex-shrink: 0 !important;

  z-index: 20 !important;

  box-sizing: border-box !important;

  padding-bottom:
    max(
      8px,
      env(safe-area-inset-bottom)
    ) !important;

  background:
    #001b14 !important;
}


/*
 * Prevent textarea itself from being
 * pushed below keyboard.
 */

#fatwa-dm-input {
  scroll-margin-bottom:
    100px !important;
}



/* =========================================================
   FATWA_NEW_MESSAGE_V1
   ========================================================= */

.social-messages-head {
  justify-content:
    space-between;
}


.social-messages-new {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(53,221,137,.28);

  border-radius: 13px;

  background:
    rgba(53,221,137,.08);

  color: #35dd89;

  font-size: 21px;
  font-weight: 900;

  cursor: pointer;
}


.fatwa-new-message-modal {
  position: fixed;

  inset: 0;

  z-index: 16000;

  display: grid;

  background:
    rgba(0,12,9,.62);
}


.fatwa-new-message-modal[hidden] {
  display: none !important;
}


.fatwa-new-message-sheet {
  width: min(
    100%,
    520px
  );

  height: 100%;

  margin: 0 auto;

  box-sizing: border-box;

  padding:
    calc(
      12px +
      env(safe-area-inset-top)
    )
    14px
    calc(
      18px +
      env(safe-area-inset-bottom)
    );

  background:
    #001b14;

  color: #fff;

  overflow-y: auto;
}


.fatwa-new-message-head {
  min-height: 52px;

  display: grid;

  grid-template-columns:
    44px
    minmax(0,1fr)
    44px;

  align-items: center;
}


.fatwa-new-message-head strong {
  text-align: center;

  font-size: 1.05rem;
}


.fatwa-new-message-back {
  width: 42px;
  height: 42px;

  border: 0;

  background: transparent;
  color: #fff;

  font-size: 34px;

  cursor: pointer;
}


.fatwa-new-message-search {
  height: 48px;

  display: grid;

  grid-template-columns:
    auto
    minmax(0,1fr);

  align-items: center;

  gap: 10px;

  padding: 0 14px;

  margin: 8px 0 10px;

  border:
    1px solid
    rgba(53,221,137,.16);

  border-radius: 15px;

  background:
    rgba(255,255,255,.045);
}


#fatwa-new-message-search-input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font-size: 16px;
}


.fatwa-new-message-results {
  display: grid;
}


.fatwa-new-message-user {
  width: 100%;

  display: grid;

  grid-template-columns:
    48px
    minmax(0,1fr);

  gap: 12px;

  align-items: center;

  padding: 11px 4px;

  border: 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  background:
    transparent;

  color: #fff;

  text-align: inherit;

  cursor: pointer;
}


.fatwa-new-message-avatar {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #063829;

  background-size: cover;
  background-position: center;

  border:
    1px solid
    rgba(53,221,137,.22);

  font-weight: 900;
}


.fatwa-new-message-avatar.has-image {
  color: transparent;
}


.fatwa-new-message-user-copy {
  min-width: 0;

  display: grid;

  gap: 4px;
}


.fatwa-new-message-user-copy strong,
.fatwa-new-message-user-copy small {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.fatwa-new-message-user-copy small {
  color:
    rgba(255,255,255,.5);
}


.fatwa-new-message-status {
  padding: 25px 10px;

  text-align: center;

  color:
    rgba(255,255,255,.5);

  font-size: .8rem;
}


html[dir="rtl"]
.fatwa-new-message-sheet {
  direction: rtl;
}



/* =========================================================
   FATWA MESSAGES — INSTAGRAM / WHATSAPP STYLE V2
   ========================================================= */

.social-messages-screen {
  padding:
    10px
    14px
    calc(
      var(--social-nav-h) +
      18px +
      env(safe-area-inset-bottom)
    ) !important;

  background: #001b14 !important;
}


/* Header */

.social-messages-head {
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 2px 8px !important;
}


.social-messages-head strong {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
}


/* Compose button */

.social-messages-new {
  width: 42px !important;
  height: 42px !important;

  border: 0 !important;
  border-radius: 50% !important;

  display: grid !important;
  place-items: center !important;

  background: transparent !important;
  color: #35dd89 !important;

  font-size: 25px !important;
}


/* Search */

.social-messages-search {
  height: 44px !important;

  margin:
    2px
    0
    8px !important;

  padding:
    0
    13px !important;

  border: 0 !important;
  border-radius: 14px !important;

  background:
    rgba(255,255,255,.065) !important;
}


.social-messages-search span {
  font-size: 18px !important;
  opacity: .6 !important;
}


#social-messages-search-input {
  font-size: 15px !important;
}


/* Conversation list */

.social-messages-list {
  display: block !important;
}


.social-message-thread {
  min-height: 72px !important;

  display: grid !important;

  grid-template-columns:
    56px
    minmax(0,1fr)
    auto !important;

  gap: 12px !important;

  align-items: center !important;

  padding:
    8px
    2px !important;

  border: 0 !important;

  background: transparent !important;

  border-radius: 12px !important;
}


/* subtle touch feedback */

.social-message-thread:active {
  background:
    rgba(255,255,255,.045) !important;
}


/* Avatar */

.social-message-thread-avatar {
  width: 56px !important;
  height: 56px !important;

  border-radius: 50% !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  background:
    #063829 !important;

  background-size: cover !important;
  background-position: center !important;

  font-size: 17px !important;
}


/* Name + preview */

.social-message-thread-copy {
  gap: 4px !important;
}


.social-message-thread-copy strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}


.social-message-thread-copy small {
  font-size: 13px !important;

  color:
    rgba(255,255,255,.55) !important;
}


/* unread conversation */

.social-message-thread.has-unread
.social-message-thread-copy strong {
  color: #fff !important;
  font-weight: 900 !important;
}


.social-message-thread.has-unread
.social-message-thread-copy small {
  color:
    rgba(255,255,255,.85) !important;

  font-weight: 650 !important;
}


/* right side */

.social-message-thread-meta {
  min-width: 42px !important;

  display: grid !important;

  justify-items: end !important;

  gap: 6px !important;
}


.social-message-thread-meta small {
  font-size: 11px !important;

  color:
    rgba(255,255,255,.42) !important;
}


.social-message-thread.has-unread
.social-message-thread-meta small {
  color: #35dd89 !important;
}


/* WhatsApp / Instagram unread bubble */

.social-message-thread-meta b {
  min-width: 19px !important;
  height: 19px !important;

  padding: 0 5px !important;

  border-radius: 999px !important;

  background: #35dd89 !important;
  color: #002416 !important;

  font-size: 10px !important;
  font-weight: 900 !important;
}


/* Empty state */

.social-messages-empty {
  padding-top: 85px !important;

  color:
    rgba(255,255,255,.42) !important;

  font-size: 14px !important;
}


/* Mobile */

@media (max-width: 700px) {

  .social-messages-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .social-message-thread {
    grid-template-columns:
      54px
      minmax(0,1fr)
      auto !important;
  }

  .social-message-thread-avatar {
    width: 54px !important;
    height: 54px !important;
  }
}


/* RTL */

html[dir="rtl"]
.social-message-thread {
  direction: rtl !important;
}

html[dir="rtl"]
.social-message-thread-meta {
  justify-items: start !important;
}


/* Instagram-style compose icon */

.social-messages-compose-icon {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;
}

.social-messages-compose-icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-messages-new {
  background: transparent !important;
  border: 0 !important;
  color: #35dd89 !important;
}


/* Größeres Quadrat-mit-Stift Icon */

.social-messages-new {
  width: 52px !important;
  height: 52px !important;
}

.social-messages-compose-icon {
  width: 34px !important;
  height: 34px !important;
}

.social-messages-compose-icon svg {
  width: 34px !important;
  height: 34px !important;

  stroke-width: 2 !important;
}



/* =========================================================
   FATWA DM — WHATSAPP STYLE V1
   visual only
   ========================================================= */


/* Chat background */
#fatwa-dm-modal:not([hidden]) {
  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(255,255,255,.018) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 75% 60%,
      rgba(255,255,255,.014) 0 1px,
      transparent 1.5px
    ),
    #071d17 !important;

  background-size:
    27px 27px,
    35px 35px,
    auto !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.fatwa-dm-head,
.fatwa-dm-header {
  min-height: 62px !important;

  box-sizing: border-box !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.07) !important;

  background:
    rgba(0,27,20,.98) !important;

  backdrop-filter:
    blur(14px);
}


.fatwa-dm-avatar {
  width: 42px !important;
  height: 42px !important;

  border-radius: 50% !important;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  background-size:
    cover !important;

  background-position:
    center !important;
}


.fatwa-dm-user strong,
.fatwa-dm-profile strong {
  font-size: 15px !important;
  font-weight: 800 !important;
}


.fatwa-dm-user small,
.fatwa-dm-profile small {
  font-size: 11px !important;

  color:
    rgba(255,255,255,.54) !important;
}


/* =========================================================
   MESSAGE AREA
   ========================================================= */

#fatwa-dm-messages {
  display: flex !important;
  flex-direction: column !important;

  gap: 3px !important;

  padding:
    16px
    13px
    12px !important;

  min-height: 0 !important;

  overflow-y: auto !important;

  scroll-behavior: smooth;

  scrollbar-width: none;
}


#fatwa-dm-messages::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   BUBBLES
   ========================================================= */

.fatwa-dm-bubble {
  position: relative !important;

  width: fit-content !important;
  max-width: min(78%, 520px) !important;

  box-sizing: border-box !important;

  padding:
    7px
    9px
    5px !important;

  margin:
    1px
    0 !important;

  border: 0 !important;

  box-shadow:
    0 1px 1px
    rgba(0,0,0,.16) !important;

  font-size: 14px !important;

  line-height: 1.35 !important;
}


/* My messages */
.fatwa-dm-bubble.mine {
  align-self: flex-end !important;

  margin-left:
    auto !important;

  margin-right:
    1px !important;

  border-radius:
    8px
    2px
    8px
    8px !important;

  background:
    #075e4d !important;

  color:
    #f5fffb !important;
}


/* Received messages */
.fatwa-dm-bubble.theirs {
  align-self: flex-start !important;

  margin-right:
    auto !important;

  margin-left:
    1px !important;

  border-radius:
    2px
    8px
    8px
    8px !important;

  background:
    #202d29 !important;

  color:
    #f6fbf9 !important;
}


/* WhatsApp bubble tails */
.fatwa-dm-bubble.mine::after {
  content: "";

  position: absolute;

  top: 0;
  right: -7px;

  width: 0;
  height: 0;

  border-top:
    7px solid
    #075e4d;

  border-right:
    7px solid
    transparent;
}


.fatwa-dm-bubble.theirs::before {
  content: "";

  position: absolute;

  top: 0;
  left: -7px;

  width: 0;
  height: 0;

  border-top:
    7px solid
    #202d29;

  border-left:
    7px solid
    transparent;
}


/* Message text */
.fatwa-dm-bubble p {
  margin:
    0
    0
    2px !important;

  white-space:
    pre-wrap !important;

  overflow-wrap:
    anywhere !important;

  font-size:
    14px !important;

  line-height:
    1.4 !important;
}


/* Time */
.fatwa-dm-bubble small {
  display: block !important;

  margin-top:
    2px !important;

  color:
    rgba(255,255,255,.52) !important;

  font-size:
    9.5px !important;

  line-height:
    1 !important;

  text-align:
    right !important;
}


.fatwa-dm-bubble.mine small {
  color:
    rgba(210,255,239,.68) !important;
}


/* =========================================================
   COMPOSER — WhatsApp style
   ========================================================= */

#fatwa-dm-form {
  flex-shrink: 0 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    48px !important;

  align-items:
    end !important;

  gap:
    7px !important;

  padding:
    7px
    9px
    max(
      8px,
      env(safe-area-inset-bottom)
    ) !important;

  border-top:
    1px solid
    rgba(255,255,255,.05) !important;

  background:
    #061b15 !important;
}


/* Message input */
#fatwa-dm-input {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    45px !important;

  max-height:
    120px !important;

  box-sizing:
    border-box !important;

  padding:
    11px
    16px !important;

  border:
    0 !important;

  border-radius:
    23px !important;

  outline:
    0 !important;

  resize:
    none !important;

  background:
    #20302c !important;

  color:
    #fff !important;

  font-size:
    16px !important;

  line-height:
    1.35 !important;
}


#fatwa-dm-input::placeholder {
  color:
    rgba(255,255,255,.45) !important;
}


#fatwa-dm-input:focus {
  border:
    0 !important;

  box-shadow:
    none !important;
}


/* Send circle */
#fatwa-dm-send {
  width:
    47px !important;

  height:
    47px !important;

  min-width:
    47px !important;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    #35dd89 !important;

  color:
    #002b1c !important;

  font-size:
    20px !important;

  font-weight:
    900 !important;

  box-shadow:
    none !important;
}


#fatwa-dm-send:active {
  transform:
    scale(.93);
}


#fatwa-dm-send:disabled {
  opacity:
    .45 !important;
}


/* =========================================================
   Arabic RTL
   Keep user message sides consistent like WhatsApp
   ========================================================= */

html[dir="rtl"]
#fatwa-dm-messages {
  direction:
    ltr !important;
}


html[dir="rtl"]
.fatwa-dm-bubble {
  direction:
    rtl !important;

  text-align:
    right !important;
}


html[dir="rtl"]
#fatwa-dm-input {
  direction:
    rtl !important;

  text-align:
    right !important;
}


/* Composer + Send button squared */

#fatwa-dm-input {
  border-radius: 10px !important;
}

#fatwa-dm-send {
  width: 47px !important;
  height: 47px !important;
  min-width: 47px !important;

  border-radius: 10px !important;
}


/* =========================================================
   WHATSAPP COMPOSER V2
   pill input + icon-only send button
   ========================================================= */

#fatwa-dm-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Message field like WhatsApp */
#fatwa-dm-input {
  min-height: 50px !important;
  max-height: 120px !important;

  padding: 12px 17px !important;

  border: 0 !important;
  border-radius: 26px !important;

  background: #202d2a !important;
  color: #fff !important;

  font-size: 16px !important;
}

/* Round green send button */
#fatwa-dm-send {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  display: grid !important;
  place-items: center !important;

  background: #35dd89 !important;
  color: #002b1c !important;

  /* hide "Senden / إرسال / Send..." */
  font-size: 0 !important;
}

/* Arrow only */
#fatwa-dm-send::before {
  content: "➤";

  display: block;

  font-size: 24px !important;
  line-height: 1 !important;

  transform: translateX(1px);
}

html[dir="rtl"] #fatwa-dm-send::before {
  transform: scaleX(-1) translateX(1px);
}


/* Fix WhatsApp send icon */

#fatwa-dm-send::before {
  content: "" !important;

  width: 24px !important;
  height: 22px !important;

  display: block !important;

  background: #002b1c !important;

  clip-path: polygon(
    0 0,
    100% 50%,
    0 100%,
    22% 58%,
    68% 50%,
    22% 42%
  );

  transform: none !important;
}

/* Do NOT flip the send icon in Arabic */
html[dir="rtl"] #fatwa-dm-send::before {
  transform: none !important;
}


/* Perfectly center DM send icon */

#fatwa-dm-send {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#fatwa-dm-send::before {
  width: 22px !important;
  height: 20px !important;

  margin: 0 !important;

  position: relative !important;
  left: 1px !important;
  top: 0 !important;

  transform: none !important;
}



/* =========================================================
   FATWA DM — WHATSAPP DETAILS V1
   ========================================================= */


/* Heute / Gestern / Datum */

.fatwa-dm-day-separator {
  align-self: center !important;

  width: fit-content !important;

  margin:
    10px auto
    8px !important;

  padding:
    5px
    10px !important;

  border-radius:
    7px !important;

  background:
    rgba(20,45,38,.96) !important;

  color:
    rgba(255,255,255,.72) !important;

  box-shadow:
    0 1px 2px
    rgba(0,0,0,.18);

  font-size:
    10px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  direction:
    auto !important;
}


/* Time + checkmarks on one line */

.fatwa-dm-message-meta {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap:
    3px !important;

  min-height:
    11px !important;

  margin-top:
    2px !important;
}


.fatwa-dm-message-meta small {
  margin:
    0 !important;

  padding:
    0 !important;

  font-size:
    9.5px !important;

  line-height:
    1 !important;

  color:
    rgba(255,255,255,.52) !important;
}


/* ✓ / ✓✓ */

.fatwa-dm-checks {
  display:
    inline-block !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    rgba(255,255,255,.55) !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  line-height:
    10px !important;

  letter-spacing:
    -3px !important;

  transform:
    translateX(-1px);
}


/* Read = WhatsApp-like blue/green accent */

.fatwa-dm-checks.read {
  color:
    #53d7ff !important;
}


/* Keep metadata direction stable */

html[dir="rtl"]
.fatwa-dm-message-meta {
  direction:
    ltr !important;
}



/* =========================================================
   FATWA DM — WHATSAPP DETAILS V1
   ========================================================= */


/* Heute / Gestern / Datum */

.fatwa-dm-day-separator {
  align-self: center !important;

  width: fit-content !important;

  margin:
    10px auto
    8px !important;

  padding:
    5px
    10px !important;

  border-radius:
    7px !important;

  background:
    rgba(20,45,38,.96) !important;

  color:
    rgba(255,255,255,.72) !important;

  box-shadow:
    0 1px 2px
    rgba(0,0,0,.18);

  font-size:
    10px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  direction:
    auto !important;
}


/* Time + checkmarks on one line */

.fatwa-dm-message-meta {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap:
    3px !important;

  min-height:
    11px !important;

  margin-top:
    2px !important;
}


.fatwa-dm-message-meta small {
  margin:
    0 !important;

  padding:
    0 !important;

  font-size:
    9.5px !important;

  line-height:
    1 !important;

  color:
    rgba(255,255,255,.52) !important;
}


/* ✓ / ✓✓ */

.fatwa-dm-checks {
  display:
    inline-block !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    rgba(255,255,255,.55) !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  line-height:
    10px !important;

  letter-spacing:
    -3px !important;

  transform:
    translateX(-1px);
}


/* Read = WhatsApp-like blue/green accent */

.fatwa-dm-checks.read {
  color:
    #53d7ff !important;
}


/* Keep metadata direction stable */

html[dir="rtl"]
.fatwa-dm-message-meta {
  direction:
    ltr !important;
}



/* =========================================================
   FATWA DM — DELIVERY CHECKS V2
   ========================================================= */


/* Sent to server */
.fatwa-dm-checks.sent {
  color:
    rgba(255,255,255,.58) !important;
}


/* Delivered to recipient device/app */
.fatwa-dm-checks.delivered {
  color:
    rgba(255,255,255,.66) !important;
}


/* Seen/read */
.fatwa-dm-checks.read {
  color:
    #35dd89 !important;
}


/*
 * Two checks should stay visually close,
 * WhatsApp style.
 */
.fatwa-dm-checks {
  letter-spacing:
    -3px !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;
}


/* Hide background DM refresh errors when inbox already has content */
#social-messages-list:not(:empty)
+ #social-messages-status.error {
  display: none !important;
}

/* Same inside an already loaded conversation */
#fatwa-dm-messages:not(:empty)
~ #fatwa-dm-status.error {
  display: none !important;
}



/* =========================================================
   DM ONLINE / TYPING
   ========================================================= */

#fatwa-dm-handle.is-online {
  color: #35dd89 !important;
  opacity: 1 !important;
}

#fatwa-dm-handle.is-typing {
  color: #35dd89 !important;
  opacity: 1 !important;

  font-weight: 650 !important;
}



/* =========================================================
   FATWA DM — FIRST UNREAD MARKER
   ========================================================= */

.fatwa-dm-unread-divider {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px !important;

  margin:
    12px 0
    10px !important;

  color:
    #35dd89 !important;

  font-size:
    10px !important;

  font-weight:
    750 !important;
}


.fatwa-dm-unread-divider::before,
.fatwa-dm-unread-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    rgba(53,221,137,.34);
}


.fatwa-dm-unread-divider span {
  flex: 0 0 auto;

  padding:
    4px
    9px;

  border-radius:
    999px;

  background:
    rgba(53,221,137,.09);

  white-space:
    nowrap;
}


/* Arabic */
html[dir="rtl"]
.fatwa-dm-unread-divider {
  direction: rtl;
}



/* Last seen */

#fatwa-dm-handle.is-last-seen {
  color:
    rgba(255,255,255,.55) !important;

  opacity: 1 !important;

  font-size: 10.5px !important;
}



/* =========================================================
   FATWA DM — WHATSAPP SWIPE REPLY
   ========================================================= */

#fatwa-dm-form {
  grid-template-rows:
    auto
    auto !important;
}


/* Reply preview above input */

.fatwa-dm-reply-preview {
  grid-column:
    1 / -1;

  width:
    100%;

  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    38px;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px
    8px
    8px
    12px;

  margin-bottom:
    2px;

  border-left:
    3px solid
    #35dd89;

  border-radius:
    9px;

  background:
    #172824;
}


.fatwa-dm-reply-preview[hidden] {
  display:
    none !important;
}


.fatwa-dm-reply-preview-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.fatwa-dm-reply-preview-copy strong {
  color:
    #35dd89;

  font-size:
    12px;
}


.fatwa-dm-reply-preview-copy small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    rgba(255,255,255,.65);

  font-size:
    11px;
}


.fatwa-dm-reply-close {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    rgba(255,255,255,.65);

  font-size:
    23px;
}


/* Quoted message inside sent bubble */

.fatwa-dm-reply-quote {
  min-width:
    120px;

  max-width:
    100%;

  box-sizing:
    border-box;

  display:
    grid;

  gap:
    3px;

  margin:
    0
    0
    5px;

  padding:
    6px
    8px;

  border-left:
    3px solid
    #35dd89;

  border-radius:
    6px;

  background:
    rgba(0,0,0,.17);
}


.fatwa-dm-reply-quote strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #35dd89;

  font-size:
    11px;

  line-height:
    1.2;
}


.fatwa-dm-reply-quote small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  margin:
    0 !important;

  color:
    rgba(255,255,255,.67) !important;

  font-size:
    10.5px !important;

  text-align:
    inherit !important;
}


/* Makes swipe feel natural */

.fatwa-dm-bubble {
  touch-action:
    pan-y !important;

  will-change:
    transform;
}


/* Arabic */

html[dir="rtl"]
.fatwa-dm-reply-preview,
html[dir="rtl"]
.fatwa-dm-reply-quote {
  border-left:
    0;

  border-right:
    3px solid
    #35dd89;
}



/* =========================================================
   FATWA DM — REPLY JUMP + QUICK BOTTOM
   ========================================================= */

.fatwa-dm-panel {
  position: relative !important;
}


/* Clickable quoted message */

.fatwa-dm-reply-quote {
  cursor: pointer !important;
}

.fatwa-dm-reply-quote:active {
  opacity: .78;
}


/* Original message flash after jumping */

@keyframes fatwaDmJumpHighlight {
  0% {
    box-shadow:
      0 0 0 0
      rgba(53,221,137,0);
  }

  25% {
    box-shadow:
      0 0 0 3px
      rgba(53,221,137,.48);
  }

  65% {
    box-shadow:
      0 0 0 3px
      rgba(53,221,137,.25);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(53,221,137,0);
  }
}


.fatwa-dm-bubble.fatwa-dm-jump-highlight {
  animation:
    fatwaDmJumpHighlight
    1.4s
    ease-out !important;
}


/* WhatsApp-style jump-to-bottom button */

.fatwa-dm-bottom-button {
  position: absolute !important;

  right: 15px !important;

  bottom:
    calc(
      69px +
      env(safe-area-inset-bottom)
    ) !important;

  z-index: 60 !important;

  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px solid
    rgba(255,255,255,.08) !important;

  border-radius: 50% !important;

  background:
    #1e302b !important;

  color:
    rgba(255,255,255,.82) !important;

  box-shadow:
    0 2px 8px
    rgba(0,0,0,.3) !important;

  cursor: pointer !important;
}


.fatwa-dm-bottom-button[hidden] {
  display: none !important;
}


.fatwa-dm-bottom-button svg {
  width: 22px !important;
  height: 22px !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 2 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.fatwa-dm-bottom-button:active {
  transform:
    scale(.92);
}


/* RTL */

html[dir="rtl"]
.fatwa-dm-bottom-button {
  right: auto !important;
  left: 15px !important;
}



/* =========================================================
   FATWA DM — IN APP NOTIFICATION
   ========================================================= */

.fatwa-dm-toast {
  position:
    fixed !important;

  z-index:
    17500 !important;

  left:
    50% !important;

  bottom:
    calc(
      var(--social-nav-h, 84px) +
      14px +
      env(safe-area-inset-bottom)
    ) !important;

  width:
    min(
      calc(100% - 24px),
      460px
    ) !important;

  min-height:
    66px !important;

  box-sizing:
    border-box !important;

  display:
    grid !important;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    24px !important;

  align-items:
    center !important;

  gap:
    11px !important;

  padding:
    9px
    10px !important;

  border:
    1px solid
    rgba(53,221,137,.2) !important;

  border-radius:
    16px !important;

  background:
    rgba(15,38,31,.97) !important;

  color:
    #fff !important;

  box-shadow:
    0 7px 25px
    rgba(0,0,0,.38) !important;

  backdrop-filter:
    blur(15px);

  text-align:
    inherit !important;

  opacity:
    0;

  transform:
    translate(
      -50%,
      14px
    );

  transition:
    opacity .2s ease,
    transform .2s ease;

  cursor:
    pointer !important;
}


.fatwa-dm-toast[hidden] {
  display:
    none !important;
}


.fatwa-dm-toast.show {
  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );
}


.fatwa-dm-toast-avatar {
  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #064332;

  background-size:
    cover;

  background-position:
    center;

  border:
    1px solid
    rgba(53,221,137,.25);

  color:
    #35dd89;

  font-size:
    16px;

  font-weight:
    900;
}


.fatwa-dm-toast-avatar.has-image {
  color:
    transparent;
}


.fatwa-dm-toast-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}


.fatwa-dm-toast-copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    14px;

  font-weight:
    850;
}


.fatwa-dm-toast-copy small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    rgba(255,255,255,.68);

  font-size:
    12px;
}


.fatwa-dm-toast-arrow {
  color:
    #35dd89;

  font-size:
    27px;

  font-weight:
    500;

  line-height:
    1;
}


html[dir="rtl"]
.fatwa-dm-toast {
  direction:
    rtl;
}


html[dir="rtl"]
.fatwa-dm-toast-arrow {
  transform:
    scaleX(-1);
}


/*
 * If the mobile keyboard is open,
 * do not cover the message composer.
 */
html body.fatwa-keyboard-active
.fatwa-dm-toast {
  bottom:
    14px !important;
}



/* =========================================================
   FATWA_PUSH_CLIENT_V1
   ========================================================= */

.fatwa-push-control {
  margin:
    10px 14px 8px;

  padding:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  border:
    1px solid
    rgba(53,221,137,.16);

  border-radius:
    16px;

  background:
    rgba(53,221,137,.055);
}


.fatwa-push-control-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.fatwa-push-control-copy strong {
  font-size:
    14px;

  font-weight:
    850;
}


.fatwa-push-control-copy small {
  color:
    rgba(255,255,255,.58);

  font-size:
    11px;

  line-height:
    1.35;
}


.fatwa-push-enable {
  flex:
    0 0 auto;

  min-height:
    40px;

  max-width:
    190px;

  padding:
    8px 13px;

  border:
    0;

  border-radius:
    999px;

  background:
    #35dd89;

  color:
    #052b1c;

  font-size:
    12px;

  font-weight:
    900;

  cursor:
    pointer;
}


.fatwa-push-enable.enabled {
  background:
    rgba(53,221,137,.13);

  color:
    #35dd89;

  border:
    1px solid
    rgba(53,221,137,.3);
}


.fatwa-push-enable:disabled {
  opacity:
    .55;

  cursor:
    default;
}


html[dir="rtl"]
.fatwa-push-control {
  direction:
    rtl;
}


@media (max-width: 520px) {

  .fatwa-push-control {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .fatwa-push-enable {
    width:
      100%;

    max-width:
      none;
  }
}



/* =========================================================
   FATWA_DM_MEDIA_CLIENT_V2
   ========================================================= */

.fatwa-dm-form {
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto !important;
}


.fatwa-dm-reply-preview,
.fatwa-dm-media-preview {
  grid-column:
    1 / -1;
}


.fatwa-dm-attach {
  width: 46px;
  height: 46px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255,255,255,.09);

  color:
    #35dd89;

  font-size: 28px;
  line-height: 1;

  cursor: pointer;
}


.fatwa-dm-attach:disabled {
  opacity: .45;
}


.fatwa-dm-media-preview {
  width: 100%;

  box-sizing:
    border-box;

  padding:
    4px 0 2px;
}


.fatwa-dm-media-preview[hidden] {
  display:
    none !important;
}


.fatwa-dm-media-preview-stage {
  position: relative;

  width:
    min(220px, 70vw);

  max-height:
    220px;

  overflow:
    hidden;

  border-radius:
    14px;

  background:
    #071f17;
}


.fatwa-dm-media-preview-stage img,
.fatwa-dm-media-preview-stage video {
  display: block;

  width: 100%;
  max-height: 220px;

  object-fit: cover;
}


.fatwa-dm-media-preview-stage img[hidden],
.fatwa-dm-media-preview-stage video[hidden] {
  display:
    none !important;
}


.fatwa-dm-media-remove {
  position: absolute;

  top: 7px;
  right: 7px;

  width: 32px;
  height: 32px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background:
    rgba(0,0,0,.72);

  color: #fff;

  font-size: 22px;

  cursor: pointer;
}


html[dir="rtl"]
.fatwa-dm-media-remove {
  right: auto;
  left: 7px;
}


.fatwa-dm-media {
  position: relative;

  width:
    min(270px, 70vw);

  min-height: 40px;

  margin:
    2px 0 5px;

  overflow: hidden;

  border-radius:
    13px;

  background:
    rgba(0,0,0,.17);
}


.fatwa-dm-media-loading {
  min-height: 70px;

  display: grid;
  place-items: center;

  padding: 10px;

  color:
    rgba(255,255,255,.6);

  font-size: 12px;
}


.fatwa-dm-media-image-button {
  display: block;

  width: 100%;

  padding: 0;

  border: 0;

  background:
    transparent;

  cursor: pointer;
}


.fatwa-dm-media-image {
  display: block;

  width: 100%;
  max-height: 360px;

  object-fit: cover;
}


.fatwa-dm-media-video {
  display: block;

  width: 100%;
  max-height: 360px;

  background: #000;
}


.fatwa-dm-media-expand {
  position: absolute;

  top: 8px;
  right: 8px;

  width: 34px;
  height: 34px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background:
    rgba(0,0,0,.65);

  color: #fff;

  font-size: 19px;

  cursor: pointer;
}


html[dir="rtl"]
.fatwa-dm-media-expand {
  right: auto;
  left: 8px;
}


.fatwa-dm-body[hidden] {
  display:
    none !important;
}


/* Fullscreen */

.fatwa-dm-media-viewer {
  position: fixed;

  z-index: 21000;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing:
    border-box;

  padding:
    56px 12px 20px;

  background:
    rgba(0,0,0,.96);
}


.fatwa-dm-media-viewer[hidden] {
  display:
    none !important;
}


.fatwa-dm-media-viewer img,
.fatwa-dm-media-viewer video {
  max-width: 100%;

  max-height:
    calc(100dvh - 90px);

  object-fit: contain;
}


.fatwa-dm-media-viewer-back {
  position: fixed;

  z-index: 2;

  top:
    calc(
      12px +
      env(safe-area-inset-top)
    );

  left: 14px;

  width: 44px;
  height: 44px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255,255,255,.12);

  color: #fff;

  font-size: 34px;

  cursor: pointer;
}


html[dir="rtl"]
.fatwa-dm-media-viewer-back {
  left: auto;
  right: 14px;

  transform:
    scaleX(-1);
}






/* =========================================================
   FATWA_DM_COMPOSER_FINAL_V4
   ONE CLEAN LAYOUT ONLY
   ========================================================= */


/*
 * Form:
 * previews above
 * composer row below
 */
#fatwa-dm-form {
  display:
    flex !important;

  flex-direction:
    column !important;

  flex-wrap:
    nowrap !important;

  width:
    100% !important;

  min-width:
    0 !important;

  box-sizing:
    border-box !important;

  gap:
    8px !important;
}


/*
 * Reply / selected photo-video preview
 */
#fatwa-dm-form
.fatwa-dm-reply-preview,

#fatwa-dm-form
.fatwa-dm-media-preview {
  position:
    static !important;

  display:
    block;

  flex:
    none !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}


#fatwa-dm-form
.fatwa-dm-reply-preview[hidden],

#fatwa-dm-form
.fatwa-dm-media-preview[hidden] {
  display:
    none !important;
}


/*
 * The actual WhatsApp-style row
 *
 * + | message field | send
 */
#fatwa-dm-form
.fatwa-dm-composer-row {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    46px !important;

  grid-template-rows:
    auto !important;

  align-items:
    end !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  box-sizing:
    border-box !important;

  gap:
    8px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* + */

#fatwa-dm-form
.fatwa-dm-composer-row
#fatwa-dm-attach {
  grid-column:
    1 !important;

  position:
    static !important;

  inset:
    auto !important;

  float:
    none !important;

  order:
    0 !important;

  flex:
    none !important;

  justify-self:
    start !important;

  align-self:
    end !important;

  width:
    46px !important;

  min-width:
    46px !important;

  max-width:
    46px !important;

  height:
    46px !important;

  min-height:
    46px !important;

  max-height:
    46px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    none !important;
}


/* Text field */

#fatwa-dm-form
.fatwa-dm-composer-row
#fatwa-dm-input {
  grid-column:
    2 !important;

  position:
    static !important;

  inset:
    auto !important;

  float:
    none !important;

  order:
    0 !important;

  flex:
    none !important;

  justify-self:
    stretch !important;

  align-self:
    end !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  min-height:
    46px !important;

  max-height:
    120px !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  transform:
    none !important;

  resize:
    none !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;
}


/* Send */

#fatwa-dm-form
.fatwa-dm-composer-row
#fatwa-dm-send {
  grid-column:
    3 !important;

  position:
    static !important;

  inset:
    auto !important;

  float:
    none !important;

  order:
    0 !important;

  flex:
    none !important;

  justify-self:
    end !important;

  align-self:
    end !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    46px !important;

  min-width:
    46px !important;

  max-width:
    46px !important;

  height:
    46px !important;

  min-height:
    46px !important;

  max-height:
    46px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    none !important;

  border-radius:
    50% !important;
}


#fatwa-dm-form
.fatwa-dm-composer-row
#fatwa-dm-send::before {
  position:
    static !important;

  inset:
    auto !important;

  margin:
    0 !important;
}


/*
 * File chooser never participates in layout
 */
#fatwa-dm-media-input {
  display:
    none !important;
}


/*
 * RTL:
 * + on the right
 * send on the left
 */
html[dir="rtl"]
#fatwa-dm-form
.fatwa-dm-composer-row {
  direction:
    rtl !important;
}



/* =========================================================
   FATWA_DM_VOICE_MESSAGES_V1
   ========================================================= */


/* Empty composer = microphone */

#fatwa-dm-send.voice-mode::before {
  display:
    none !important;
}


#fatwa-dm-send
.fatwa-dm-mic-icon {
  width:
    23px;

  height:
    23px;

  display:
    grid;

  place-items:
    center;

  pointer-events:
    none;
}


#fatwa-dm-send
.fatwa-dm-mic-icon svg {
  width:
    23px;

  height:
    23px;

  fill:
    none;

  stroke:
    #002b1c;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


#fatwa-dm-send.voice-mode {
  touch-action:
    none !important;

  user-select:
    none !important;
}


#fatwa-dm-send.recording-mode {
  transform:
    scale(1.08) !important;
}


/* Recording strip replaces textarea while holding mic */

.fatwa-dm-recording-bar {
  grid-column:
    2 !important;

  min-width:
    0;

  height:
    46px;

  box-sizing:
    border-box;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    0 12px;

  border-radius:
    20px;

  background:
    rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.9);
}


.fatwa-dm-recording-bar[hidden] {
  display:
    none !important;
}


.fatwa-dm-composer-row.recording
#fatwa-dm-input {
  display:
    none !important;
}


.fatwa-dm-composer-row.recording
#fatwa-dm-attach {
  opacity:
    .35;

  pointer-events:
    none;
}


.fatwa-dm-recording-dot {
  width:
    8px;

  height:
    8px;

  flex:
    0 0 8px;

  border-radius:
    50%;

  background:
    #ff4d5e;

  animation:
    fatwaDmVoicePulse
    1s
    ease-in-out
    infinite;
}


.fatwa-dm-recording-bar strong {
  font-size:
    13px;

  font-variant-numeric:
    tabular-nums;
}


.fatwa-dm-recording-bar small {
  min-width:
    0;

  margin-inline-start:
    auto;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    rgba(255,255,255,.55);

  font-size:
    11px;

  transition:
    color .15s ease,
    transform .15s ease;
}


.fatwa-dm-recording-bar.cancel-ready
small {
  color:
    #ff7581;

  transform:
    translateX(-8px);
}


html[dir="rtl"]
.fatwa-dm-recording-bar.cancel-ready
small {
  transform:
    translateX(8px);
}


@keyframes fatwaDmVoicePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}


/* Voice bubble */

.fatwa-dm-media.voice {
  width:
    min(300px, 72vw);

  min-height:
    0;

  overflow:
    visible;

  background:
    transparent;
}


.fatwa-dm-voice-player {
  display:
    grid;

  grid-template-columns:
    40px
    minmax(120px, 1fr)
    auto;

  align-items:
    center;

  gap:
    9px;

  min-width:
    235px;

  padding:
    4px 2px;
}


.fatwa-dm-voice-play {
  width:
    40px;

  height:
    40px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.16);

  color:
    inherit;

  cursor:
    pointer;
}


.fatwa-dm-voice-play svg {
  width:
    21px;

  height:
    21px;

  fill:
    currentColor;
}


.fatwa-dm-voice-center {
  position:
    relative;

  min-width:
    0;

  height:
    34px;

  display:
    flex;

  align-items:
    center;
}


.fatwa-dm-voice-wave {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    2px;

  pointer-events:
    none;
}


.fatwa-dm-voice-wave i {
  width:
    2px;

  height:
    var(--h);

  flex:
    1 1 2px;

  max-width:
    3px;

  border-radius:
    999px;

  background:
    currentColor;

  opacity:
    .32;
}


.fatwa-dm-voice-progress {
  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  opacity:
    .001;

  cursor:
    pointer;
}


.fatwa-dm-voice-player > small {
  min-width:
    34px;

  color:
    rgba(255,255,255,.65);

  font-size:
    11px;

  font-variant-numeric:
    tabular-nums;

  text-align:
    end;
}


html[dir="rtl"]
.fatwa-dm-voice-player {
  direction:
    rtl;
}



/* =========================================================
   FATWA_DM_AUDIO_CALLS_V1
   ========================================================= */

.fatwa-dm-audio-call {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;
  color: #35dd89;

  cursor: pointer;
}


.fatwa-dm-audio-call:active {
  background: rgba(53,221,137,.10);
}


.fatwa-dm-audio-call svg {
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Full call screen */

.fatwa-dm-call-modal {
  position: fixed;

  z-index: 23000;

  inset: 0;

  display: flex;

  align-items: stretch;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 18%,
      #174535 0,
      #06251a 36%,
      #00140d 100%
    );

  color: #fff;
}


.fatwa-dm-call-modal[hidden] {
  display: none !important;
}


.fatwa-dm-call-panel {
  width: min(100%, 560px);
  min-height: 100dvh;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  align-items: center;

  padding:
    calc(60px + env(safe-area-inset-top))
    24px
    calc(32px + env(safe-area-inset-bottom));

  text-align: center;
}


.fatwa-dm-call-avatar {
  width: 118px;
  height: 118px;

  flex: 0 0 118px;

  display: grid;
  place-items: center;

  margin-top: 7vh;

  border-radius: 50%;

  background:
    rgba(53,221,137,.13);

  background-size: cover;
  background-position: center;

  border:
    2px solid
    rgba(53,221,137,.28);

  color: #35dd89;

  font-size: 38px;
  font-weight: 900;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.32);
}


.fatwa-dm-call-avatar.has-image {
  color: transparent;
}


.fatwa-dm-call-name {
  margin-top: 24px;

  max-width: 90%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 27px;
  font-weight: 850;
}


.fatwa-dm-call-status {
  margin-top: 8px;

  color:
    rgba(255,255,255,.66);

  font-size: 15px;
}


.fatwa-dm-call-time {
  min-height: 24px;

  margin-top: 8px;

  color:
    rgba(255,255,255,.8);

  font-size: 14px;

  font-variant-numeric:
    tabular-nums;
}


.fatwa-dm-call-incoming-actions,
.fatwa-dm-call-active-actions {
  width: min(100%, 330px);

  margin-top: auto;

  display: flex;

  align-items: flex-start;
  justify-content: space-around;

  gap: 30px;
}


.fatwa-dm-call-incoming-actions[hidden],
.fatwa-dm-call-active-actions[hidden] {
  display: none !important;
}


.fatwa-dm-call-action,
.fatwa-dm-call-control {
  min-width: 80px;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 9px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #fff;

  cursor: pointer;
}


.fatwa-dm-call-action > span,
.fatwa-dm-call-control > span {
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.14);

  font-size: 25px;
}


.fatwa-dm-call-action small,
.fatwa-dm-call-control small {
  color:
    rgba(255,255,255,.83);

  font-size: 12px;
}


.fatwa-dm-call-action.reject > span,
.fatwa-dm-call-control.end > span {
  background: #ef4358;
}


.fatwa-dm-call-action.accept > span {
  background: #35dd89;

  color: #00321f;
}


.fatwa-dm-call-control.muted > span {
  background:
    rgba(53,221,137,.22);

  color: #35dd89;
}


#fatwa-dm-call-remote-audio {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: .001;
  pointer-events: none;
}


html[dir="rtl"]
.fatwa-dm-call-modal {
  direction: rtl;
}



/* =========================================================
   FATWA_DM_CALL_OVERLAY_FIX_V2
   Incoming calls must appear above EVERYTHING
   ========================================================= */

html body #fatwa-dm-call-modal {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  z-index: 2147483000 !important;

  isolation: isolate !important;

  pointer-events: auto !important;

  overflow: hidden !important;
}


html body #fatwa-dm-call-modal[hidden] {
  display: none !important;
}


html body #fatwa-dm-call-modal:not([hidden]) {
  display: flex !important;
}


/* Keep the call screen itself above its background */

html body #fatwa-dm-call-modal
.fatwa-dm-call-panel {
  position: relative !important;

  z-index: 2 !important;

  width: min(100%, 560px) !important;

  min-height: 100dvh !important;
}


/* Everything from the normal app remains underneath */

#fatwa-dm-modal,
#fatwa-bottom-nav,
.fatwa-bottom-nav,
.social-bottom-nav {
  isolation: auto;
}



/* =========================================================
   FATWA_DM_CALL_DESIGN_V3
   FaceTime / WhatsApp inspired call screen
   ========================================================= */

html body #fatwa-dm-call-modal {
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(53,221,137,.20) 0,
      rgba(9,48,34,.92) 28%,
      #031911 62%,
      #00100a 100%
    ) !important;

  color: #fff !important;
}


/* soft light */

html body #fatwa-dm-call-modal::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,.055),
      transparent 36%
    );
}


/* Call content */

html body #fatwa-dm-call-modal
.fatwa-dm-call-panel {
  position: relative !important;

  width: 100% !important;
  max-width: 520px !important;

  min-height: 100dvh !important;

  padding:
    calc(55px + env(safe-area-inset-top))
    24px
    calc(30px + env(safe-area-inset-bottom))
    !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;
}


/* Avatar */

html body #fatwa-dm-call-modal
.fatwa-dm-call-avatar {
  position: relative !important;

  width: 136px !important;
  height: 136px !important;

  flex: 0 0 136px !important;

  margin-top: 7vh !important;

  border-radius: 50% !important;

  border:
    3px solid
    rgba(255,255,255,.18)
    !important;

  background-color:
    rgba(53,221,137,.13)
    !important;

  background-size: cover !important;
  background-position: center !important;

  color: #35dd89 !important;

  font-size: 42px !important;
  font-weight: 800 !important;

  box-shadow:
    0 0 0 10px rgba(53,221,137,.045),
    0 0 0 20px rgba(53,221,137,.022),
    0 24px 60px rgba(0,0,0,.38)
    !important;
}


/* Name */

html body #fatwa-dm-call-modal
.fatwa-dm-call-name {
  margin-top: 30px !important;

  max-width: 90% !important;

  font-size: 29px !important;
  line-height: 1.15 !important;

  font-weight: 750 !important;

  letter-spacing: -.4px !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}


/* Calling / Incoming / Connected */

html body #fatwa-dm-call-modal
.fatwa-dm-call-status {
  margin-top: 10px !important;

  font-size: 15px !important;
  font-weight: 450 !important;

  color:
    rgba(255,255,255,.62)
    !important;
}


/* Timer */

html body #fatwa-dm-call-modal
.fatwa-dm-call-time {
  min-height: 24px !important;

  margin-top: 5px !important;

  font-size: 14px !important;

  color:
    rgba(255,255,255,.82)
    !important;

  font-variant-numeric:
    tabular-nums !important;
}


/* Bottom control area */

html body #fatwa-dm-call-modal
.fatwa-dm-call-incoming-actions,

html body #fatwa-dm-call-modal
.fatwa-dm-call-active-actions {
  width: calc(100% - 16px) !important;
  max-width: 390px !important;

  min-height: 120px !important;

  margin-top: auto !important;

  padding:
    22px
    20px
    14px
    !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: flex-start !important;
  justify-content: space-around !important;

  gap: 20px !important;

  border:
    1px solid
    rgba(255,255,255,.08)
    !important;

  border-radius: 32px !important;

  background:
    rgba(255,255,255,.065)
    !important;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.24)
    !important;

  backdrop-filter:
    blur(22px)
    !important;

  -webkit-backdrop-filter:
    blur(22px)
    !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-incoming-actions[hidden],

html body #fatwa-dm-call-modal
.fatwa-dm-call-active-actions[hidden] {
  display: none !important;
}


/* Individual control */

html body #fatwa-dm-call-modal
.fatwa-dm-call-action,

html body #fatwa-dm-call-modal
.fatwa-dm-call-control {
  min-width: 86px !important;

  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;

  gap: 10px !important;

  border: 0 !important;

  background: transparent !important;

  color: #fff !important;
}


/* Round control buttons */

html body #fatwa-dm-call-modal
.fatwa-dm-call-action > span,

html body #fatwa-dm-call-modal
.fatwa-dm-call-control > span {
  width: 68px !important;
  height: 68px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,.14)
    !important;

  color: #fff !important;

  font-size: 27px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 24px rgba(0,0,0,.22)
    !important;

  transition:
    transform .12s ease,
    filter .12s ease
    !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-action:active > span,

html body #fatwa-dm-call-modal
.fatwa-dm-call-control:active > span {
  transform:
    scale(.93)
    !important;
}


/* Labels */

html body #fatwa-dm-call-modal
.fatwa-dm-call-action small,

html body #fatwa-dm-call-modal
.fatwa-dm-call-control small {
  font-size: 12px !important;
  font-weight: 500 !important;

  color:
    rgba(255,255,255,.78)
    !important;
}


/* Reject */

html body #fatwa-dm-call-modal
.fatwa-dm-call-action.reject > span,

html body #fatwa-dm-call-modal
.fatwa-dm-call-control.end > span {
  background:
    #f04455
    !important;

  color:
    #fff
    !important;
}


/* Accept */

html body #fatwa-dm-call-modal
.fatwa-dm-call-action.accept > span {
  background:
    #35dd89
    !important;

  color:
    #002f1e
    !important;

  box-shadow:
    0 12px 30px
    rgba(53,221,137,.25)
    !important;
}


/* Muted state */

html body #fatwa-dm-call-modal
.fatwa-dm-call-control.muted > span {
  background:
    #fff
    !important;

  color:
    #071c14
    !important;
}


/* Better phone button inside chat header */

html body
#fatwa-dm-audio-call {
  width: 42px !important;
  height: 42px !important;

  flex: 0 0 42px !important;

  border-radius: 50% !important;

  color: #35dd89 !important;

  transition:
    background .15s ease,
    transform .12s ease
    !important;
}


html body
#fatwa-dm-audio-call:hover {
  background:
    rgba(53,221,137,.09)
    !important;
}


html body
#fatwa-dm-audio-call:active {
  transform:
    scale(.92)
    !important;
}


/* Mobile */

@media (max-width: 520px) {

  html body #fatwa-dm-call-modal
  .fatwa-dm-call-avatar {
    width: 126px !important;
    height: 126px !important;

    flex-basis: 126px !important;

    margin-top: 6vh !important;
  }


  html body #fatwa-dm-call-modal
  .fatwa-dm-call-name {
    font-size: 27px !important;
  }


  html body #fatwa-dm-call-modal
  .fatwa-dm-call-incoming-actions,

  html body #fatwa-dm-call-modal
  .fatwa-dm-call-active-actions {
    width: 100% !important;

    border-radius: 28px !important;
  }

}


/* Arabic */

html[dir="rtl"]
#fatwa-dm-call-modal {
  direction: rtl !important;
}



/* =========================================================
   FATWA_DM_VIDEO_CALLS_V1
   ========================================================= */


/* Video button in chat */

#fatwa-dm-video-call {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: #35dd89;

  cursor: pointer;
}


#fatwa-dm-video-call svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


#fatwa-dm-video-call:active {
  transform: scale(.92);

  background:
    rgba(53,221,137,.10);
}


/* Remote video */

#fatwa-dm-call-modal
.fatwa-dm-call-remote-video {
  position: absolute !important;

  z-index: 0 !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  background: #000 !important;
}


#fatwa-dm-call-modal
.fatwa-dm-call-remote-video[hidden] {
  display: none !important;
}


/* Local camera preview */

#fatwa-dm-call-modal
.fatwa-dm-call-local-video {
  position: absolute !important;

  z-index: 8 !important;

  top:
    calc(
      18px +
      env(safe-area-inset-top)
    )
    !important;

  right: 18px !important;

  width: 118px !important;
  height: 164px !important;

  object-fit: cover !important;

  border-radius: 20px !important;

  border:
    1px solid
    rgba(255,255,255,.24)
    !important;

  background: #09130f !important;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.38)
    !important;

  transform:
    scaleX(-1);
}


#fatwa-dm-call-modal
.fatwa-dm-call-local-video[hidden] {
  display: none !important;
}


/* During actual video call */

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-panel {
  max-width: none !important;

  padding:
    calc(30px + env(safe-area-inset-top))
    20px
    calc(25px + env(safe-area-inset-bottom))
    !important;
}


/*
 * Name/avatar remain visible while ringing.
 * Once remote video arrives, video sits behind controls.
 */

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-avatar,

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-name,

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-status,

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-time {
  position: relative !important;

  z-index: 5 !important;
}


#fatwa-dm-call-modal.video-call
.fatwa-dm-call-incoming-actions,

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-active-actions {
  position: relative !important;

  z-index: 10 !important;

  background:
    rgba(7,18,14,.55)
    !important;

  border:
    1px solid
    rgba(255,255,255,.13)
    !important;

  backdrop-filter:
    blur(24px)
    !important;

  -webkit-backdrop-filter:
    blur(24px)
    !important;
}


/* subtle overlay so buttons/text stay readable */

#fatwa-dm-call-modal.video-call::after {
  content: "";

  position: absolute;

  z-index: 1;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.24),
      transparent 34%,
      transparent 55%,
      rgba(0,0,0,.48)
    );
}


html[dir="rtl"]
#fatwa-dm-call-modal
.fatwa-dm-call-local-video {
  right: auto !important;
  left: 18px !important;
}


@media (max-width: 520px) {

  #fatwa-dm-call-modal
  .fatwa-dm-call-local-video {
    width: 102px !important;
    height: 142px !important;

    top:
      calc(
        14px +
        env(safe-area-inset-top)
      )
      !important;

    right: 14px !important;

    border-radius: 17px !important;
  }


  html[dir="rtl"]
  #fatwa-dm-call-modal
  .fatwa-dm-call-local-video {
    right: auto !important;
    left: 14px !important;
  }

}



/* =========================================================
   FATWA_DM_VIDEO_CONTROLS_V2
   ========================================================= */

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-active-actions {
  max-width:
    470px !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    )
    !important;

  align-items:
    start !important;

  gap:
    8px !important;

  padding:
    18px 10px
    13px
    !important;
}


#fatwa-dm-call-modal.video-call
.fatwa-dm-call-active-actions[hidden] {
  display:
    none !important;
}


#fatwa-dm-call-modal.video-call
.fatwa-dm-call-control {
  min-width:
    0 !important;

  width:
    100% !important;
}


#fatwa-dm-call-modal.video-call
.fatwa-dm-call-control > span {
  width:
    60px !important;

  height:
    60px !important;

  margin:
    0 auto !important;

  font-size:
    24px !important;
}


#fatwa-dm-call-modal.video-call
.fatwa-dm-call-control small {
  display:
    block !important;

  max-width:
    86px !important;

  margin:
    0 auto !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


#fatwa-dm-call-camera.off > span {
  background:
    #fff !important;

  color:
    #071c14 !important;
}


/* Front camera mirrors like FaceTime */

#fatwa-dm-call-local-video {
  transform:
    scaleX(-1)
    !important;
}


/* Rear camera must NOT be mirrored */

#fatwa-dm-call-local-video.environment {
  transform:
    none !important;
}


/* Camera switch button */

#fatwa-dm-call-flip-camera > span {
  font-size:
    30px !important;
  font-weight:
    400 !important;
}


/* Mobile */

@media (max-width:520px) {

  #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-active-actions {
    width:
      calc(100% - 8px)
      !important;

    gap:
      4px !important;

    padding:
      16px 5px
      12px
      !important;
  }


  #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-control > span {
    width:
      56px !important;

    height:
      56px !important;
  }


  #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-control small {
    max-width:
      72px !important;

    font-size:
      10px !important;
  }

}



/* =========================================================
   FATWA_DM_GROUP_CALLS_V1
   ========================================================= */


/* Add participant */

#fatwa-dm-call-add-user > span {
  font-size: 22px !important;
}


#fatwa-dm-call-add-user:disabled {
  opacity: .35 !important;
  pointer-events: none !important;
}


/* =========================================================
   INVITE SHEET
   ========================================================= */

.fatwa-dm-call-invite-sheet {
  position: absolute !important;

  z-index: 80 !important;

  left: 50% !important;
  bottom: 0 !important;

  transform:
    translateX(-50%) !important;

  width:
    min(100%, 520px) !important;

  max-height:
    min(72dvh, 650px) !important;

  box-sizing:
    border-box !important;

  padding:
    18px
    16px
    calc(
      22px +
      env(safe-area-inset-bottom)
    )
    !important;

  border-radius:
    28px
    28px
    0
    0
    !important;

  background:
    rgba(9,28,21,.97)
    !important;

  border:
    1px solid
    rgba(255,255,255,.10)
    !important;

  box-shadow:
    0 -20px 50px
    rgba(0,0,0,.38)
    !important;

  backdrop-filter:
    blur(28px)
    !important;

  overflow:
    auto !important;
}


.fatwa-dm-call-invite-sheet[hidden] {
  display: none !important;
}


.fatwa-dm-call-invite-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}


.fatwa-dm-call-invite-head strong {
  font-size: 18px;
}


#fatwa-dm-call-invite-close {
  width: 36px;
  height: 36px;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255,255,255,.10);

  color: #fff;

  font-size: 23px;
}


#fatwa-dm-call-invite-search {
  width: 100%;
  height: 46px;

  box-sizing: border-box;

  padding: 0 15px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 16px;

  outline: none;

  background:
    rgba(255,255,255,.07);

  color: #fff;

  font: inherit;
}


.fatwa-dm-call-invite-results {
  margin-top: 12px;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.fatwa-dm-call-invite-user {
  width: 100%;

  display: grid;

  grid-template-columns:
    46px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 11px;

  padding: 8px;

  border: 0;

  border-radius: 15px;

  background: transparent;

  color: #fff;

  text-align: start;
}


.fatwa-dm-call-invite-user:active {
  background:
    rgba(255,255,255,.08);
}


.fatwa-dm-call-invite-avatar {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(53,221,137,.14);

  background-position: center;
  background-size: cover;

  color: #35dd89;

  font-weight: 800;
}


.fatwa-dm-call-invite-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.fatwa-dm-call-invite-copy strong,
.fatwa-dm-call-invite-copy small {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.fatwa-dm-call-invite-copy small {
  color:
    rgba(255,255,255,.50);
}


.fatwa-dm-call-invite-user > b {
  color: #35dd89;

  font-size: 12px;
}


.fatwa-dm-call-invite-status,
.fatwa-dm-call-invite-empty {
  color:
    rgba(255,255,255,.56);

  font-size: 12px;
}


.fatwa-dm-call-invite-status.error {
  color: #ff6c79;
}


/* =========================================================
   GROUP VIDEO GRID
   ========================================================= */

.fatwa-dm-call-group-grid {
  position: absolute !important;

  z-index: 2 !important;

  inset: 0 !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    )
    !important;

  grid-auto-rows:
    minmax(0,1fr)
    !important;

  gap: 3px !important;

  padding: 3px !important;

  box-sizing:
    border-box !important;

  background: #020806 !important;
}


.fatwa-dm-call-group-grid[hidden] {
  display: none !important;
}


.fatwa-dm-group-video-tile {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  border-radius: 18px;

  background:
    #0d1b16;
}


.fatwa-dm-group-video-tile video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  background: #07100c;
}


.fatwa-dm-group-video-tile video.mirror {
  transform: scaleX(-1);
}


.fatwa-dm-group-video-tile > span {
  position: absolute;

  z-index: 3;

  left: 10px;
  bottom: 10px;

  max-width:
    calc(100% - 20px);

  padding:
    5px
    8px;

  border-radius: 999px;

  background:
    rgba(0,0,0,.48);

  color: #fff;

  font-size: 11px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/*
 * Once 3rd participant joins,
 * the FaceTime grid owns video rendering.
 */

#fatwa-dm-call-modal.group-video-call
#fatwa-dm-call-remote-video,

#fatwa-dm-call-modal.group-video-call
#fatwa-dm-call-local-video,

#fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-avatar {
  display: none !important;
}


#fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-name,

#fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-status,

#fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-time {
  position: relative !important;

  z-index: 15 !important;

  text-shadow:
    0 2px 10px
    rgba(0,0,0,.8);
}


#fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-active-actions {
  position: relative !important;

  z-index: 20 !important;
}


/* 5 buttons in group video */

#fatwa-dm-call-modal.video-call
.fatwa-dm-call-active-actions {
  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    )
    !important;
}


@media (max-width:520px) {

  #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-control > span {
    width: 50px !important;
    height: 50px !important;

    font-size: 20px !important;
  }


  #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-control small {
    max-width: 60px !important;

    font-size: 9px !important;
  }


  .fatwa-dm-call-group-grid {
    gap: 2px !important;

    padding: 2px !important;
  }

}


html[dir="rtl"]
.fatwa-dm-group-video-tile > span {
  left: auto;
  right: 10px;
}



/* =========================================================
   FATWA_CALL_UI_V4
   Clean FaceTime-style fullscreen design
   ========================================================= */


/* ---------------------------------------------------------
   FULLSCREEN — hide the chat completely
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  z-index: 2147483000 !important;

  background:
    radial-gradient(
      circle at 50% 16%,
      #174f3a 0%,
      #073123 30%,
      #031b13 58%,
      #00110b 100%
    ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: hidden !important;
}


html body #fatwa-dm-call-modal::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(53,221,137,.10),
      transparent 38%
    ) !important;

  pointer-events: none !important;
}


/* ---------------------------------------------------------
   MAIN CONTENT CENTERED
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
.fatwa-dm-call-panel {

  position: relative !important;
  z-index: 2 !important;

  width: 100% !important;
  max-width: none !important;

  height: 100dvh !important;
  min-height: 100dvh !important;

  margin: 0 !important;

  padding:
    calc(52px + env(safe-area-inset-top))
    24px
    calc(26px + env(safe-area-inset-bottom))
    !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;
}


/* ---------------------------------------------------------
   AVATAR
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
.fatwa-dm-call-avatar {

  width: 150px !important;
  height: 150px !important;

  flex: 0 0 150px !important;

  margin:
    clamp(35px, 8vh, 90px)
    auto
    0
    !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  border:
    2px solid
    rgba(255,255,255,.22)
    !important;

  background-color:
    rgba(53,221,137,.13)
    !important;

  background-size: cover !important;
  background-position: center !important;

  color: #42e693 !important;

  font-size: 46px !important;
  font-weight: 800 !important;

  box-shadow:
    0 0 0 10px rgba(53,221,137,.045),
    0 0 0 22px rgba(53,221,137,.018),
    0 26px 70px rgba(0,0,0,.38)
    !important;
}


/* ---------------------------------------------------------
   NAME / STATUS
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
.fatwa-dm-call-name {

  margin-top: 30px !important;

  max-width: min(90vw, 600px) !important;

  font-size:
    clamp(28px, 3vw, 36px)
    !important;

  line-height: 1.1 !important;

  font-weight: 760 !important;

  color: #fff !important;

  letter-spacing: -.5px !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-status {

  margin-top: 11px !important;

  font-size: 15px !important;

  color:
    rgba(255,255,255,.64)
    !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-time {

  margin-top: 7px !important;

  min-height: 24px !important;

  font-size: 14px !important;

  color:
    rgba(255,255,255,.82)
    !important;
}


/* ---------------------------------------------------------
   BOTTOM CALL DOCK
   IMPORTANT: stronger specificity than old CSS
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
.fatwa-dm-call-active-actions,

html body #fatwa-dm-call-modal.video-call
.fatwa-dm-call-active-actions {

  position: relative !important;
  z-index: 40 !important;

  width:
    min(
      calc(100vw - 32px),
      620px
    )
    !important;

  max-width: 620px !important;

  min-height: auto !important;

  margin:
    auto
    auto
    0
    !important;

  padding:
    15px
    14px
    !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    )
    !important;

  align-items: center !important;

  gap: 8px !important;

  border:
    1px solid
    rgba(255,255,255,.11)
    !important;

  border-radius: 34px !important;

  background:
    rgba(18,48,38,.82)
    !important;

  box-shadow:
    0 22px 70px
    rgba(0,0,0,.35)
    !important;

  backdrop-filter:
    blur(28px)
    !important;

  -webkit-backdrop-filter:
    blur(28px)
    !important;

  overflow: visible !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-active-actions[hidden] {

  display: none !important;
}


/* Audio calls don't need camera controls */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-active-actions {

  width:
    min(
      calc(100vw - 32px),
      430px
    )
    !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )
    !important;
}


/* ---------------------------------------------------------
   CONTROL BUTTON
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
.fatwa-dm-call-control {

  width: 100% !important;
  min-width: 0 !important;

  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  border: 0 !important;

  background: transparent !important;

  color: #fff !important;

  cursor: pointer !important;

  overflow: visible !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-control > span {

  width: 62px !important;
  height: 62px !important;

  flex: 0 0 62px !important;

  margin: 0 auto !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,.13)
    !important;

  color: #fff !important;

  font-size: 25px !important;

  line-height: 1 !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.10),
    0 9px 24px
    rgba(0,0,0,.20)
    !important;

  transition:
    transform .12s ease,
    background .15s ease
    !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-control:active > span {

  transform:
    scale(.91)
    !important;
}


/* Labels */

html body #fatwa-dm-call-modal
.fatwa-dm-call-control small {

  display: block !important;

  width: 100% !important;
  max-width: 96px !important;

  margin: 0 auto !important;

  overflow: hidden !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;

  color:
    rgba(255,255,255,.75)
    !important;

  font-size: 11px !important;
  font-weight: 500 !important;

  line-height: 1.2 !important;

  text-align: center !important;
}


/* ---------------------------------------------------------
   ADD PERSON
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
#fatwa-dm-call-add-user > span {

  background:
    rgba(53,221,137,.14)
    !important;

  color: #54e99d !important;

  font-size: 22px !important;
}


/* ---------------------------------------------------------
   MUTE
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
#fatwa-dm-call-mute.muted > span {

  background: #fff !important;
  color: #071b13 !important;
}


/* ---------------------------------------------------------
   CAMERA OFF
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
#fatwa-dm-call-camera.off > span {

  background: #fff !important;
  color: #071b13 !important;
}


/* ---------------------------------------------------------
   END CALL — ALWAYS VISIBLE
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
#fatwa-dm-call-end > span {

  background:
    #f04656
    !important;

  color: #fff !important;

  box-shadow:
    0 10px 28px
    rgba(240,70,86,.30)
    !important;
}


/* ---------------------------------------------------------
   INCOMING CALL
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal
.fatwa-dm-call-incoming-actions {

  position: relative !important;
  z-index: 40 !important;

  width:
    min(
      calc(100vw - 32px),
      380px
    )
    !important;

  max-width: 380px !important;

  min-height: 112px !important;

  margin:
    auto
    auto
    0
    !important;

  padding:
    17px 24px
    !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-around !important;

  gap: 40px !important;

  box-sizing: border-box !important;

  border:
    1px solid
    rgba(255,255,255,.10)
    !important;

  border-radius: 34px !important;

  background:
    rgba(18,48,38,.82)
    !important;

  backdrop-filter:
    blur(28px)
    !important;

  -webkit-backdrop-filter:
    blur(28px)
    !important;

  box-shadow:
    0 22px 70px
    rgba(0,0,0,.35)
    !important;
}


html body #fatwa-dm-call-modal
.fatwa-dm-call-incoming-actions[hidden] {

  display: none !important;
}


/* ---------------------------------------------------------
   VIDEO CALL
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal.video-call
.fatwa-dm-call-remote-video {

  position: absolute !important;

  z-index: 0 !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  background: #020806 !important;
}


html body #fatwa-dm-call-modal.video-call
.fatwa-dm-call-local-video {

  position: absolute !important;

  z-index: 50 !important;

  top:
    calc(
      18px +
      env(safe-area-inset-top)
    )
    !important;

  right: 18px !important;

  width: 116px !important;
  height: 160px !important;

  border-radius: 22px !important;

  border:
    1px solid
    rgba(255,255,255,.25)
    !important;

  object-fit: cover !important;

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.42)
    !important;
}


/* ---------------------------------------------------------
   GROUP VIDEO
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-group-grid {

  position: absolute !important;

  z-index: 1 !important;

  inset: 0 !important;

  padding: 4px !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    )
    !important;

  grid-template-rows:
    repeat(
      2,
      minmax(0,1fr)
    )
    !important;

  gap: 4px !important;

  background: #020806 !important;
}


html body #fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-name,

html body #fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-status,

html body #fatwa-dm-call-modal.group-video-call
.fatwa-dm-call-time {

  z-index: 20 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

  html body #fatwa-dm-call-modal
  .fatwa-dm-call-avatar {

    width: 126px !important;
    height: 126px !important;

    flex-basis: 126px !important;

    margin-top: 6vh !important;
  }


  html body #fatwa-dm-call-modal
  .fatwa-dm-call-name {

    font-size: 27px !important;
  }


  html body #fatwa-dm-call-modal
  .fatwa-dm-call-active-actions,

  html body #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-active-actions {

    width:
      calc(100vw - 20px)
      !important;

    padding:
      13px 5px
      !important;

    gap: 2px !important;

    border-radius:
      28px !important;
  }


  html body #fatwa-dm-call-modal
  .fatwa-dm-call-control > span {

    width: 52px !important;
    height: 52px !important;

    flex-basis: 52px !important;

    font-size: 21px !important;
  }


  html body #fatwa-dm-call-modal
  .fatwa-dm-call-control small {

    max-width: 62px !important;

    font-size: 9px !important;
  }


  html body #fatwa-dm-call-modal.video-call
  .fatwa-dm-call-local-video {

    width: 100px !important;
    height: 138px !important;

    top:
      calc(
        12px +
        env(safe-area-inset-top)
      )
      !important;

    right: 12px !important;
  }

}


/* Arabic */

html[dir="rtl"]
#fatwa-dm-call-modal {

  direction: rtl !important;
}


html[dir="rtl"]
#fatwa-dm-call-modal.video-call
.fatwa-dm-call-local-video {

  right: auto !important;
  left: 18px !important;
}



/* =========================================================
   FATWA_VOICE_CALL_UI_V5
   Audio calls only — do not touch video calls
   ========================================================= */


/* ---------------------------------------------------------
   NEVER show video controls during an audio call
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-video-control,

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-camera,

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-flip-camera {
  display: none !important;
}


/* hidden must always stay hidden */
html body #fatwa-dm-call-modal
.fatwa-dm-call-control[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   AUDIO CALL — cleaner background
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal:not(.video-call) {
  background:
    radial-gradient(
      circle at 50% 22%,
      #16583f 0%,
      #0a3a2a 24%,
      #04251a 48%,
      #01150e 78%,
      #000d08 100%
    )
    !important;
}


/* ---------------------------------------------------------
   AVATAR — larger and cleaner
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-avatar {
  width: 158px !important;
  height: 158px !important;

  flex-basis: 158px !important;

  margin-top:
    clamp(
      52px,
      9vh,
      110px
    )
    !important;

  border:
    2px solid
    rgba(112,255,185,.28)
    !important;

  box-shadow:
    0 0 0 10px rgba(53,221,137,.055),
    0 0 0 22px rgba(53,221,137,.025),
    0 0 60px rgba(53,221,137,.10),
    0 30px 70px rgba(0,0,0,.36)
    !important;
}


/* subtle calling pulse */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-avatar {
  animation:
    fatwaVoiceCallPulse
    2.2s
    ease-in-out
    infinite;
}


@keyframes fatwaVoiceCallPulse {

  0%,
  100% {
    box-shadow:
      0 0 0 10px rgba(53,221,137,.055),
      0 0 0 22px rgba(53,221,137,.025),
      0 0 55px rgba(53,221,137,.08),
      0 30px 70px rgba(0,0,0,.36);
  }

  50% {
    box-shadow:
      0 0 0 14px rgba(53,221,137,.07),
      0 0 0 30px rgba(53,221,137,.025),
      0 0 75px rgba(53,221,137,.15),
      0 30px 70px rgba(0,0,0,.36);
  }

}


/* ---------------------------------------------------------
   NAME / STATUS
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-name {
  margin-top: 34px !important;

  font-size:
    clamp(
      29px,
      3vw,
      38px
    )
    !important;

  font-weight: 760 !important;
}


html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-status {
  margin-top: 10px !important;

  font-size: 15px !important;

  color:
    rgba(255,255,255,.64)
    !important;
}


html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-time {
  margin-top: 6px !important;

  font-size: 15px !important;

  font-variant-numeric:
    tabular-nums !important;
}


/* ---------------------------------------------------------
   AUDIO DOCK — exactly 3 controls
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-active-actions {
  width:
    min(
      calc(100vw - 36px),
      430px
    )
    !important;

  max-width: 430px !important;

  min-height: 128px !important;

  margin:
    auto
    auto
    0
    !important;

  padding:
    18px
    18px
    15px
    !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )
    !important;

  align-items: center !important;

  gap: 14px !important;

  border-radius:
    36px !important;

  border:
    1px solid
    rgba(255,255,255,.10)
    !important;

  background:
    rgba(19,52,40,.82)
    !important;

  box-shadow:
    0 24px 75px
    rgba(0,0,0,.38)
    !important;

  backdrop-filter:
    blur(30px)
    !important;

  -webkit-backdrop-filter:
    blur(30px)
    !important;
}


/* ---------------------------------------------------------
   AUDIO CONTROL CIRCLES
   --------------------------------------------------------- */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-control > span {
  width: 68px !important;
  height: 68px !important;

  flex-basis: 68px !important;

  font-size: 26px !important;
}


html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-control small {
  max-width: 100px !important;

  font-size: 11px !important;
}


/* Add person */

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-add-user > span {
  background:
    rgba(53,221,137,.15)
    !important;

  color:
    #55e99e !important;
}


/* Mute */

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-mute > span {
  background:
    rgba(255,255,255,.14)
    !important;

  color: #fff !important;
}


html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-mute.muted > span {
  background: #fff !important;

  color: #062016 !important;
}


/* End */

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-end > span {
  background:
    #f04455
    !important;

  color: #fff !important;

  box-shadow:
    0 12px 32px
    rgba(240,68,85,.32)
    !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 520px) {

  html body #fatwa-dm-call-modal:not(.video-call)
  .fatwa-dm-call-avatar {
    width: 134px !important;
    height: 134px !important;

    flex-basis: 134px !important;

    margin-top: 7vh !important;
  }


  html body #fatwa-dm-call-modal:not(.video-call)
  .fatwa-dm-call-active-actions {
    width:
      calc(100vw - 22px)
      !important;

    padding:
      15px 10px
      13px
      !important;

    gap: 7px !important;

    border-radius:
      30px !important;
  }


  html body #fatwa-dm-call-modal:not(.video-call)
  .fatwa-dm-call-control > span {
    width: 60px !important;
    height: 60px !important;

    flex-basis: 60px !important;
  }

}



/* =========================================================
   FATWA_INCOMING_CALL_CONTROLS_FIX_V6
   Incoming: Accept / Reject only
   Active: Mute / Add person / Hang up
   ========================================================= */


/*
 * CRITICAL:
 * hidden must ALWAYS win over all previous
 * display:flex / display:grid rules.
 */

html body #fatwa-dm-call-modal
.fatwa-dm-call-incoming-actions[hidden],

html body #fatwa-dm-call-modal
.fatwa-dm-call-active-actions[hidden],

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-active-actions[hidden],

html body #fatwa-dm-call-modal.video-call
.fatwa-dm-call-active-actions[hidden] {

  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* =========================================================
   INCOMING VOICE CALL
   Accept / Reject centered at bottom
   ========================================================= */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-incoming-actions:not([hidden]) {

  position: relative !important;

  z-index: 40 !important;

  width:
    min(
      calc(100vw - 28px),
      430px
    )
    !important;

  max-width: 430px !important;

  min-height: 150px !important;

  margin:
    auto
    auto
    0
    !important;

  padding:
    22px
    30px
    18px
    !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    )
    !important;

  align-items: center !important;

  justify-items: center !important;

  gap: 42px !important;

  border:
    1px solid
    rgba(255,255,255,.10)
    !important;

  border-radius:
    36px !important;

  background:
    rgba(17,52,39,.80)
    !important;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.35)
    !important;

  backdrop-filter:
    blur(30px)
    !important;

  -webkit-backdrop-filter:
    blur(30px)
    !important;
}


/* Incoming buttons */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-incoming-actions
.fatwa-dm-call-action {

  width: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 11px !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color: #fff !important;
}


html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-incoming-actions
.fatwa-dm-call-action > span {

  width: 74px !important;

  height: 74px !important;

  display: grid !important;

  place-items: center !important;

  border-radius: 50% !important;

  font-size: 29px !important;

  line-height: 1 !important;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.25)
    !important;
}


/* Accept */

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-accept > span {

  background:
    #20e887
    !important;

  color:
    #00291a
    !important;

  box-shadow:
    0 12px 34px
    rgba(32,232,135,.25)
    !important;
}


/* Reject */

html body #fatwa-dm-call-modal:not(.video-call)
#fatwa-dm-call-reject > span {

  background:
    #ff3f59
    !important;

  color:
    #fff
    !important;

  box-shadow:
    0 12px 34px
    rgba(255,63,89,.24)
    !important;
}


/* Incoming labels */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-incoming-actions
small {

  color:
    rgba(255,255,255,.82)
    !important;

  font-size:
    13px !important;

  font-weight:
    500 !important;

  text-align:
    center !important;
}


/* =========================================================
   ACTIVE VOICE CALL
   Only after user accepts
   ========================================================= */

html body #fatwa-dm-call-modal:not(.video-call)
.fatwa-dm-call-active-actions:not([hidden]) {

  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )
    !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:520px) {

  html body #fatwa-dm-call-modal:not(.video-call)
  .fatwa-dm-call-incoming-actions:not([hidden]) {

    width:
      calc(100vw - 24px)
      !important;

    min-height:
      142px !important;

    padding:
      18px
      20px
      16px
      !important;

    gap:
      30px !important;

    border-radius:
      31px !important;
  }


  html body #fatwa-dm-call-modal:not(.video-call)
  .fatwa-dm-call-incoming-actions
  .fatwa-dm-call-action > span {

    width:
      68px !important;

    height:
      68px !important;

    font-size:
      27px !important;
  }

}


/* Arabic RTL */

html[dir="rtl"]
#fatwa-dm-call-modal
.fatwa-dm-call-incoming-actions {

  direction: rtl !important;
}



/* =========================================================
   FATWA_IN_APP_CALL_BANNER_V1
   ========================================================= */

.fatwa-incoming-call-banner {
  position: fixed !important;

  z-index: 2147483600 !important;

  top:
    calc(
      10px +
      env(safe-area-inset-top)
    )
    !important;

  left: 50% !important;

  transform:
    translateX(-50%)
    !important;

  width:
    min(
      calc(100vw - 20px),
      520px
    )
    !important;

  min-height: 72px !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    48px
    minmax(0,1fr)
    auto
    !important;

  align-items: center !important;

  gap: 11px !important;

  padding:
    10px
    11px
    !important;

  border:
    1px solid
    rgba(255,255,255,.12)
    !important;

  border-radius:
    22px !important;

  background:
    rgba(12,42,32,.96)
    !important;

  box-shadow:
    0 16px 45px
    rgba(0,0,0,.38)
    !important;

  backdrop-filter:
    blur(26px)
    !important;

  -webkit-backdrop-filter:
    blur(26px)
    !important;

  color: #fff !important;

  animation:
    fatwaCallBannerIn
    .22s
    ease-out
    both;
}


.fatwa-incoming-call-banner[hidden] {
  display: none !important;
}


@keyframes fatwaCallBannerIn {

  from {
    opacity: 0;

    transform:
      translate(
        -50%,
        -20px
      );
  }

  to {
    opacity: 1;

    transform:
      translate(
        -50%,
        0
      );
  }
}


/* avatar */

.fatwa-call-banner-avatar {
  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  border-radius: 50% !important;

  background:
    rgba(53,221,137,.16)
    !important;

  color: #46e797 !important;

  font-weight: 800 !important;

  font-size: 18px !important;
}


.fatwa-call-banner-avatar img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
}


/* text */

.fatwa-call-banner-copy {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 3px !important;

  text-align: start !important;
}


.fatwa-call-banner-copy strong {
  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  color: #fff !important;

  font-size: 15px !important;
  font-weight: 760 !important;
}


.fatwa-call-banner-copy small {
  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  color:
    rgba(255,255,255,.62)
    !important;

  font-size: 11px !important;
}


/* actions */

.fatwa-call-banner-actions {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;
}


.fatwa-call-banner-actions button {
  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;

  display: grid !important;

  place-items: center !important;

  border: 0 !important;

  border-radius: 50% !important;

  color: #fff !important;

  font-size: 19px !important;

  font-weight: 800 !important;

  cursor: pointer !important;
}


.fatwa-call-banner-actions
.reject {
  background:
    #ef4053
    !important;
}


.fatwa-call-banner-actions
.accept {
  background:
    #20d97d
    !important;
}


/* Arabic */

html[dir="rtl"]
.fatwa-incoming-call-banner {
  direction: rtl !important;
}


@media (max-width:420px) {

  .fatwa-incoming-call-banner {
    grid-template-columns:
      44px
      minmax(0,1fr)
      auto
      !important;

    gap: 8px !important;

    padding:
      9px
      !important;
  }


  .fatwa-call-banner-avatar {
    width: 42px !important;
    height: 42px !important;
  }


  .fatwa-call-banner-actions {
    gap: 6px !important;
  }


  .fatwa-call-banner-actions button {
    width: 39px !important;
    height: 39px !important;
  }

}



/* =========================================================
   FATWA_IN_APP_CALL_BANNER_V1
   ========================================================= */

.fatwa-incoming-call-banner {
  position: fixed !important;

  z-index: 2147483600 !important;

  top:
    calc(
      10px +
      env(safe-area-inset-top)
    )
    !important;

  left: 50% !important;

  transform:
    translateX(-50%)
    !important;

  width:
    min(
      calc(100vw - 20px),
      520px
    )
    !important;

  min-height: 72px !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    48px
    minmax(0,1fr)
    auto
    !important;

  align-items: center !important;

  gap: 11px !important;

  padding:
    10px
    11px
    !important;

  border:
    1px solid
    rgba(255,255,255,.12)
    !important;

  border-radius:
    22px !important;

  background:
    rgba(12,42,32,.96)
    !important;

  box-shadow:
    0 16px 45px
    rgba(0,0,0,.38)
    !important;

  backdrop-filter:
    blur(26px)
    !important;

  -webkit-backdrop-filter:
    blur(26px)
    !important;

  color: #fff !important;

  animation:
    fatwaCallBannerIn
    .22s
    ease-out
    both;
}


.fatwa-incoming-call-banner[hidden] {
  display: none !important;
}


@keyframes fatwaCallBannerIn {

  from {
    opacity: 0;

    transform:
      translate(
        -50%,
        -20px
      );
  }

  to {
    opacity: 1;

    transform:
      translate(
        -50%,
        0
      );
  }
}


/* avatar */

.fatwa-call-banner-avatar {
  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  border-radius: 50% !important;

  background:
    rgba(53,221,137,.16)
    !important;

  color: #46e797 !important;

  font-weight: 800 !important;

  font-size: 18px !important;
}


.fatwa-call-banner-avatar img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
}


/* text */

.fatwa-call-banner-copy {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 3px !important;

  text-align: start !important;
}


.fatwa-call-banner-copy strong {
  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  color: #fff !important;

  font-size: 15px !important;
  font-weight: 760 !important;
}


.fatwa-call-banner-copy small {
  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  color:
    rgba(255,255,255,.62)
    !important;

  font-size: 11px !important;
}


/* actions */

.fatwa-call-banner-actions {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;
}


.fatwa-call-banner-actions button {
  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;

  display: grid !important;

  place-items: center !important;

  border: 0 !important;

  border-radius: 50% !important;

  color: #fff !important;

  font-size: 19px !important;

  font-weight: 800 !important;

  cursor: pointer !important;
}


.fatwa-call-banner-actions
.reject {
  background:
    #ef4053
    !important;
}


.fatwa-call-banner-actions
.accept {
  background:
    #20d97d
    !important;
}


/* Arabic */

html[dir="rtl"]
.fatwa-incoming-call-banner {
  direction: rtl !important;
}


@media (max-width:420px) {

  .fatwa-incoming-call-banner {
    grid-template-columns:
      44px
      minmax(0,1fr)
      auto
      !important;

    gap: 8px !important;

    padding:
      9px
      !important;
  }


  .fatwa-call-banner-avatar {
    width: 42px !important;
    height: 42px !important;
  }


  .fatwa-call-banner-actions {
    gap: 6px !important;
  }


  .fatwa-call-banner-actions button {
    width: 39px !important;
    height: 39px !important;
  }

}



/* =========================================================
   FATWA_DM_MISSED_CALL_EVENT_V1
   ========================================================= */

.fatwa-dm-call-event {
  align-self: center !important;

  width:
    fit-content !important;

  max-width:
    min(
      84%,
      360px
    )
    !important;

  margin:
    10px
    auto
    !important;

  padding:
    9px
    14px
    !important;

  box-sizing:
    border-box !important;

  display: grid !important;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto
    !important;

  align-items: center !important;

  gap: 8px !important;

  border:
    1px solid
    rgba(255,255,255,.07)
    !important;

  border-radius:
    999px !important;

  background:
    rgba(255,255,255,.055)
    !important;

  color:
    rgba(255,255,255,.86)
    !important;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.08)
    !important;
}


.fatwa-dm-call-event-icon {
  width: 25px !important;
  height: 25px !important;

  display: grid !important;

  place-items: center !important;

  border-radius: 50% !important;

  background:
    rgba(239,64,83,.13)
    !important;

  font-size: 13px !important;
}


.fatwa-dm-call-event strong {
  min-width: 0 !important;

  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  font-size: 12px !important;

  font-weight: 650 !important;
}


.fatwa-dm-call-event small {
  color:
    rgba(255,255,255,.40)
    !important;

  font-size: 9px !important;

  font-variant-numeric:
    tabular-nums !important;
}


html[dir="rtl"]
.fatwa-dm-call-event {
  direction: rtl !important;
}


@media (max-width:420px) {

  .fatwa-dm-call-event {
    max-width:
      90% !important;

    padding:
      8px
      12px
      !important;
  }

}



/* =========================================================
   FATWA_MESSAGES_CALL_HISTORY_V1
   ========================================================= */

.fatwa-messages-tabs {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 6px;

  margin:
    4px 0
    12px;

  padding: 4px;

  box-sizing: border-box;

  border-radius: 16px;

  background:
    rgba(255,255,255,.045);
}


.fatwa-messages-tabs button {
  height: 38px;

  border: 0;
  border-radius: 12px;

  background: transparent;

  color:
    rgba(255,255,255,.55);

  font: inherit;

  font-size: 13px;
  font-weight: 650;

  cursor: pointer;
}


.fatwa-messages-tabs button.active {
  background:
    rgba(53,221,137,.13);

  color: #35dd89;
}


.fatwa-messages-calls-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.fatwa-messages-calls-list[hidden] {
  display: none !important;
}


.fatwa-call-history-row {
  width: 100%;

  min-height: 72px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    48px;

  align-items: center;

  gap: 5px;

  box-sizing: border-box;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}


.fatwa-call-history-main {
  min-width: 0;

  display: grid;

  grid-template-columns:
    48px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 11px;

  padding:
    9px
    6px;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: start;

  cursor: pointer;
}


.fatwa-call-history-avatar {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  flex: 0 0 46px;

  overflow: hidden;

  border-radius: 50%;

  background:
    rgba(53,221,137,.12);

  background-position: center;
  background-size: cover;

  color: #35dd89;

  font-size: 17px;
  font-weight: 800;
}


.fatwa-call-history-avatar.has-image {
  color: transparent;
}


.fatwa-call-history-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.fatwa-call-history-copy strong {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  color:
    rgba(255,255,255,.94);

  font-size: 14px;
  font-weight: 700;
}


.fatwa-call-history-copy small {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  color:
    rgba(255,255,255,.48);

  font-size: 11px;
}


.fatwa-call-history-row.is-missed
.fatwa-call-history-copy small {
  color: #f36878;
}


.fatwa-call-history-meta {
  display: flex;

  align-items: center;

  justify-content: flex-end;
}


.fatwa-call-history-meta small {
  color:
    rgba(255,255,255,.34);

  font-size: 10px;

  white-space: nowrap;
}


.fatwa-call-history-redial {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(53,221,137,.09);

  color: #35dd89;

  font-size: 18px;

  cursor: pointer;
}


.fatwa-call-history-redial:active {
  transform: scale(.92);

  background:
    rgba(53,221,137,.17);
}


html[dir="rtl"]
.fatwa-call-history-main {
  text-align: start;
}


html[dir="rtl"]
.fatwa-messages-tabs,

html[dir="rtl"]
.fatwa-messages-calls-list {
  direction: rtl;
}


@media (max-width:420px) {

  .fatwa-call-history-row {
    grid-template-columns:
      minmax(0,1fr)
      44px;
  }


  .fatwa-call-history-main {
    grid-template-columns:
      44px
      minmax(0,1fr)
      auto;

    gap: 9px;
  }


  .fatwa-call-history-avatar {
    width: 42px;
    height: 42px;
  }


  .fatwa-call-history-redial {
    width: 40px;
    height: 40px;
  }

}



/* =========================================================
   FATWA_NOTIFICATIONS_DM_CALLS_V2
   ========================================================= */

.social-notification-type[data-type="message"] {
  background:
    rgba(53,221,137,.13);

  color:
    #35dd89;
}


.social-notification-type[data-type="missed_audio_call"],
.social-notification-type[data-type="missed_video_call"] {
  background:
    rgba(239,64,83,.12);

  color:
    #f36878;
}



/* FATWA_DM_PUSH_EXACT_MESSAGE_CLIENT_V1 */

.fatwa-dm-bubble.fatwa-dm-push-target {
  animation:
    fatwaDmPushTarget
    1.8s
    ease-out;
}


@keyframes fatwaDmPushTarget {

  0%,
  35% {
    box-shadow:
      0 0 0 3px
      rgba(53,221,137,.48);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(53,221,137,0);
  }
}



/* FATWA_COMMENT_PUSH_DEEPLINK_V1 */

.social-comment-row.fatwa-comment-push-target {
  border-radius: 14px;

  animation:
    fatwaCommentPushTarget
    1.8s
    ease-out;
}


@keyframes fatwaCommentPushTarget {

  0%,
  35% {
    background:
      rgba(53,221,137,.18);

    box-shadow:
      0 0 0 2px
      rgba(53,221,137,.38);
  }

  100% {
    background:
      transparent;

    box-shadow:
      0 0 0 0
      rgba(53,221,137,0);
  }
}



/* =========================================================
   FATWA_DM_MESSAGE_ACTIONS_V1
   ========================================================= */

.fatwa-dm-message-actions {
  position: fixed;
  z-index: 2147483600;

  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding:
    16px
    12px
    calc(
      16px +
      env(safe-area-inset-bottom)
    );

  box-sizing: border-box;

  background:
    rgba(0,0,0,.46);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}


.fatwa-dm-message-actions[hidden] {
  display: none !important;
}


.fatwa-dm-message-actions-sheet {
  width:
    min(
      100%,
      480px
    );

  display: flex;
  flex-direction: column;

  gap: 4px;

  padding: 7px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 22px;

  background:
    #08251b;

  box-shadow:
    0 22px 70px
    rgba(0,0,0,.48);
}


.fatwa-dm-message-actions-sheet button {
  width: 100%;
  min-height: 54px;

  display: grid;

  grid-template-columns:
    36px
    minmax(0,1fr);

  align-items: center;

  gap: 7px;

  padding:
    0 13px;

  border: 0;
  border-radius: 15px;

  background:
    transparent;

  color:
    rgba(255,255,255,.94);

  font: inherit;

  text-align: start;

  cursor: pointer;
}


.fatwa-dm-message-actions-sheet
button:active {
  background:
    rgba(255,255,255,.07);
}


.fatwa-dm-message-actions-sheet
button > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.06);

  font-size: 18px;
}


.fatwa-dm-message-actions-sheet
button strong {
  font-size: 14px;
  font-weight: 650;
}


.fatwa-dm-message-actions-sheet
button.danger {
  color: #ff7d88;
}


.fatwa-dm-message-actions-sheet
button.cancel {
  grid-template-columns: 1fr;

  margin-top: 3px;

  text-align: center;

  color:
    rgba(255,255,255,.62);

  background:
    rgba(255,255,255,.035);
}


html[dir="rtl"]
.fatwa-dm-message-actions-sheet {
  direction: rtl;
}


/* Chat header -> profile */

#fatwa-dm-avatar,
#fatwa-dm-modal .fatwa-dm-person {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


#fatwa-dm-avatar:active,
#fatwa-dm-modal .fatwa-dm-person:active {
  opacity: .72;
}



/* =========================================================
   FATWA_REEL_FULLSCREEN_NAV_V1
   Full viewport while watching Reels
   ========================================================= */

html body.fatwa-reel-fullscreen-open
#fatwa-bottom-nav,

html body.fatwa-reel-fullscreen-open
.fatwa-bottom-nav,

html body.fatwa-reel-fullscreen-open
.social-bottom-nav {
  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/*
 * Prevent the normal page behind the Reel
 * from moving while swiping videos.
 */
html body.fatwa-reel-fullscreen-open {
  overflow: hidden !important;
}


/*
 * Reel always owns the entire visible
 * mobile viewport.
 */
html body.fatwa-reel-fullscreen-open
.social-profile-reels-modal,

html body.fatwa-reel-fullscreen-open
.social-profile-reels-stage,

html body.fatwa-reel-fullscreen-open
.social-profile-reels-stage
.social-reel-post {
  height: 100dvh !important;

  min-height: 100dvh !important;

  max-height: 100dvh !important;
}



/* =========================================================
   FATWA_COMMENTS_KEYBOARD_VIEWPORT_V1
   ========================================================= */

/*
 * Modal follows Android's visible viewport,
 * not the larger layout viewport hidden
 * behind the software keyboard.
 */
html body
#social-comments-modal:not([hidden]) {
  position: fixed !important;

  left: 0 !important;
  right: 0 !important;

  top:
    var(
      --fatwa-comments-visible-top,
      0px
    ) !important;

  bottom: auto !important;

  width: 100vw !important;

  height:
    var(
      --fatwa-comments-visible-height,
      100dvh
    ) !important;

  max-height:
    var(
      --fatwa-comments-visible-height,
      100dvh
    ) !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}


/*
 * Normal state:
 * comments remain a bottom sheet.
 */
html body
#social-comments-modal
.social-comments-sheet {
  display: flex !important;

  flex-direction: column !important;

  box-sizing: border-box !important;

  max-height:
    min(
      76dvh,
      calc(
        var(
          --fatwa-comments-visible-height,
          100dvh
        )
        - 12px
      )
    ) !important;

  overflow: hidden !important;
}


/*
 * Keyboard state:
 * use more of the remaining visible screen
 * instead of crushing the comments area.
 */
html body.fatwa-comments-keyboard-open
#social-comments-modal
.social-comments-sheet {
  height:
    calc(
      var(
        --fatwa-comments-visible-height,
        100dvh
      )
      - 8px
    ) !important;

  max-height:
    calc(
      var(
        --fatwa-comments-visible-height,
        100dvh
      )
      - 8px
    ) !important;
}


/*
 * Header never collapses.
 */
html body
#social-comments-modal
.social-comments-head {
  flex:
    0 0 auto !important;
}


/*
 * Comment list owns all remaining space.
 */
html body
#social-comments-modal
#social-comments-list {
  flex:
    1 1 auto !important;

  min-height: 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch;
}


/*
 * Composer always stays visible above keyboard.
 */
html body
#social-comments-modal
.social-comment-form {
  flex:
    0 0 auto !important;

  position: relative !important;

  z-index: 4 !important;

  padding-bottom:
    max(
      8px,
      env(safe-area-inset-bottom)
    ) !important;
}


html body.fatwa-comments-keyboard-open
#social-comments-modal
.social-comment-form {
  padding-bottom:
    8px !important;
}


/*
 * Status message must not steal the whole
 * remaining height.
 */
html body
#social-comments-modal
.social-comments-status {
  flex:
    0 0 auto !important;
}



/* =========================================================
   FATWA_REEL_LOADING_STATE_V1
   ========================================================= */

.social-reel-post
.fatwa-reel-loader {
  position: absolute !important;

  z-index: 12 !important;

  inset: 0 !important;

  display: grid !important;
  place-items: center !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle at center,
      rgba(10,50,36,.24),
      rgba(0,0,0,.76)
    ) !important;

  opacity: 1 !important;

  transition:
    opacity .18s ease !important;
}


.social-reel-post.fatwa-reel-media-ready
.fatwa-reel-loader {
  opacity: 0 !important;

  visibility: hidden !important;
}


.fatwa-reel-loader-ring {
  width: 38px !important;
  height: 38px !important;

  display: block !important;

  border-radius: 50% !important;

  border:
    3px solid
    rgba(255,255,255,.18) !important;

  border-top-color:
    #35dd89 !important;

  animation:
    fatwaReelLoaderSpin
    .72s
    linear
    infinite !important;
}


@keyframes fatwaReelLoaderSpin {

  to {
    transform:
      rotate(360deg);
  }
}



/* =========================================================
   FATWA_REEL_TAP_HIGHLIGHT_FIX_V1
   Prevent Android/Chrome blue/teal flash on Reel taps
   ========================================================= */

.social-reel-post,
.social-reel-post *,
.social-profile-reels-stage,
.social-profile-reels-stage * {
  -webkit-tap-highlight-color:
    transparent !important;
}


.social-reel-post {
  outline:
    none !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;
}


.social-reel-post:focus,
.social-reel-post:active,
.social-reel-post:focus-visible {
  outline:
    none !important;

  box-shadow:
    none !important;
}


/*
 * Keep normal interactive controls usable.
 */
.social-reel-post button,
.social-reel-post a,
.social-reel-post input,
.social-reel-post textarea {
  user-select:
    auto !important;

  -webkit-user-select:
    auto !important;
}



/* =========================================================
   FATWA_DM_HEADER_PROFILE_OPEN_FIX_V2
   ========================================================= */

#fatwa-dm-avatar,
#fatwa-dm-modal .fatwa-dm-person {
  touch-action: manipulation;

  -webkit-tap-highlight-color:
    transparent;

  user-select: none;

  -webkit-user-select: none;
}


#fatwa-dm-avatar.fatwa-profile-opening,
#fatwa-dm-modal
.fatwa-dm-person.fatwa-profile-opening {
  opacity: .55;

  transition:
    opacity .12s ease;
}



/* =========================================================
   FATWA_PUBLIC_PROFILE_LAYER_FIX_V1
   Public profile must appear above Direct Messages
   ========================================================= */

html body
.social-public-profile:not([hidden]) {
  z-index: 260000 !important;
}



/* =========================================================
   FATWA_PROFILE_VIDEO_PREVIEW_V1
   ========================================================= */

.social-video-card.fatwa-video-preview-card {
  position: relative !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(53,221,137,.11),
      rgba(3,26,20,.98) 62%
    ) !important;
}


.fatwa-video-preview-card
.fatwa-video-card-media {
  opacity: 0 !important;

  transition:
    opacity .22s ease !important;
}


.fatwa-video-preview-card
.fatwa-video-preview-loader {
  position: absolute !important;

  z-index: 2 !important;

  inset: 0 !important;

  display: grid !important;
  place-items: center !important;

  pointer-events: none !important;

  opacity: 1 !important;

  transition:
    opacity .18s ease !important;
}


.fatwa-video-preview-card
.fatwa-video-preview-spinner {
  width: 25px !important;
  height: 25px !important;

  display: block !important;

  border:
    2.5px solid
    rgba(255,255,255,.15) !important;

  border-top-color:
    #35dd89 !important;

  border-radius:
    50% !important;

  animation:
    fatwaVideoPreviewSpin
    .72s
    linear
    infinite !important;
}


.fatwa-video-preview-card
.social-profile-video-play {
  position: absolute !important;

  z-index: 4 !important;
}


.fatwa-video-preview-card
.social-video-card-menu {
  z-index: 5 !important;
}


.fatwa-video-preview-card.fatwa-video-preview-ready
.fatwa-video-card-media {
  opacity: 1 !important;
}


.fatwa-video-preview-card.fatwa-video-preview-ready
.fatwa-video-preview-loader {
  opacity: 0 !important;

  visibility: hidden !important;
}


@keyframes fatwaVideoPreviewSpin {

  to {
    transform:
      rotate(360deg);
  }
}



/* =========================================================
   FATWA_PUBLIC_PROFILE_BLOCK_MENU_V1
   ========================================================= */

.social-public-profile-more {
  flex: 0 0 46px;

  width: 46px;
  min-width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(53,221,137,.18);

  border-radius: 14px;

  background:
    rgba(53,221,137,.055);

  color: #f4fff9;

  font: inherit;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}

.social-public-profile-more:active {
  transform: scale(.96);
}



/* =========================================================
   FATWA_BLOCKED_INBOX_V1
   ========================================================= */

.social-message-thread.fatwa-message-thread-blocked {
  opacity: .72;
}

.social-message-thread.fatwa-message-thread-blocked
.social-message-thread-avatar {
  filter: grayscale(.6);
}

.social-message-thread
.fatwa-message-blocked-label {
  font-weight: 800 !important;

  opacity: .82;
}



/* =========================================================
   FATWA_DM_BLOCKED_READONLY_V1
   ========================================================= */

.fatwa-dm-blocked-banner {
  margin:
    8px 12px 10px;

  padding:
    11px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    9px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.055);

  text-align:
    center;
}


.fatwa-dm-blocked-banner[hidden] {
  display:
    none !important;
}


#fatwa-dm-blocked-text {
  color:
    rgba(255,255,255,.78);

  font-size:
    12px;

  font-weight:
    700;
}


#fatwa-dm-unblock {
  min-height:
    34px;

  padding:
    7px 12px;

  border:
    1px solid
    rgba(53,221,137,.30);

  border-radius:
    11px;

  background:
    rgba(53,221,137,.10);

  color:
    #35dd89;

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    800;

  cursor:
    pointer;
}


.fatwa-dm-modal.fatwa-dm-readonly
#fatwa-dm-form {
  display:
    none !important;
}


.fatwa-dm-modal.fatwa-dm-readonly
#fatwa-dm-audio-call,

.fatwa-dm-modal.fatwa-dm-readonly
#fatwa-dm-video-call {
  display:
    none !important;
}



/* =========================================================
   FATWA_PUBLIC_PROFILE_ACTION_ALIGNMENT_V1
   Follow / Message / More on exactly one level
   ========================================================= */

.social-public-profile-actions {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;

  gap: 10px !important;

  width: 100% !important;
}


.social-public-profile-actions
.social-public-profile-follow,

.social-public-profile-actions
.social-public-profile-message,

.social-public-profile-actions
.social-public-profile-more {
  box-sizing: border-box !important;

  height: 52px !important;
  min-height: 52px !important;

  margin: 0 !important;

  align-self: stretch !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
}


.social-public-profile-actions
.social-public-profile-follow {
  flex: 1 1 0 !important;
}


.social-public-profile-actions
.social-public-profile-message {
  flex: 1 1 0 !important;
}


.social-public-profile-actions
.social-public-profile-more {
  flex: 0 0 52px !important;

  width: 52px !important;
  min-width: 52px !important;
}



/* =========================================================
   FATWA_NOTIFICATIONS_CENTER_V2
   ========================================================= */

.social-notifications-head {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    10px !important;
}


#social-notifications-title {
  flex:
    1 1 auto;
}


.social-notifications-mark-all {
  flex:
    0 0 auto;

  min-height:
    34px;

  padding:
    6px 10px;

  border:
    1px solid
    rgba(53,221,137,.20);

  border-radius:
    11px;

  background:
    rgba(53,221,137,.07);

  color:
    #35dd89;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


.social-notifications-mark-all[hidden] {
  display:
    none !important;
}


.social-notification-item {
  position:
    relative !important;

  transition:
    background .16s ease,
    transform .12s ease !important;
}


.social-notification-item.unread {
  background:
    linear-gradient(
      90deg,
      rgba(53,221,137,.10),
      rgba(53,221,137,.025)
    ) !important;
}


.social-notification-item.unread
.social-notification-copy strong {
  color:
    #ffffff !important;

  font-weight:
    800 !important;
}


.social-notification-unread-dot {
  position:
    absolute;

  top:
    50%;

  inset-inline-start:
    5px;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #35dd89;

  transform:
    translateY(-50%);

  box-shadow:
    0 0 10px
    rgba(53,221,137,.65);
}


.social-notification-item:active {
  transform:
    scale(.985);
}


.social-notification-type {
  display:
    grid !important;

  place-items:
    center !important;

  min-width:
    32px !important;

  width:
    32px !important;

  height:
    32px !important;

  border-radius:
    50% !important;

  background:
    rgba(53,221,137,.08) !important;

  font-size:
    15px !important;
}


.social-notification-avatar {
  flex:
    0 0 auto !important;
}



/* =========================================================
   FATWA_SOCIAL_STORIES_STRIP_V1
   ========================================================= */

#social-home-screen .fatwa-stories-strip {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  padding: 10px 0 9px;
  overflow: hidden;
  border-bottom: 1px solid rgba(128, 128, 128, 0.14);
  background: var(--surface, transparent);
}


#social-home-screen .fatwa-stories-scroll {
  display: flex;
  align-items: flex-start;
  gap: 13px;

  width: 100%;
  padding: 0 12px 2px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}


#social-home-screen .fatwa-stories-scroll::-webkit-scrollbar {
  display: none;
}


#social-home-screen .fatwa-story-item {
  appearance: none;
  -webkit-appearance: none;

  border: 0;
  outline: 0;
  background: transparent;

  width: 72px;
  min-width: 72px;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  color: inherit;
  font: inherit;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


#social-home-screen .fatwa-story-ring {
  position: relative;

  width: 66px;
  height: 66px;

  flex: 0 0 66px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  padding: 3px;

  background:
    linear-gradient(
      140deg,
      #34df89 0%,
      #19b76d 48%,
      #70efad 100%
    );
}


#social-home-screen .fatwa-story-avatar {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  border: 3px solid
    var(--surface, #ffffff);

  background:
    linear-gradient(
      145deg,
      #24322b,
      #52635a
    );

  color: #ffffff;

  font-size: 20px;
  font-weight: 750;
  line-height: 1;
}


#social-home-screen .fatwa-story-own-ring {
  background:
    rgba(128, 128, 128, 0.2);
}


#social-home-screen .fatwa-story-add {
  position: absolute;

  right: -1px;
  bottom: -1px;

  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border: 2px solid
    var(--surface, #ffffff);

  background: #35dd89;
  color: #092217;

  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}


html[dir="rtl"]
#social-home-screen
.fatwa-story-add {
  right: auto;
  left: -1px;
}


#social-home-screen .fatwa-story-name {
  display: block;

  width: 100%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: center;

  font-size: 11px;
  font-weight: 620;
  line-height: 1.2;

  opacity: 0.9;
}


#social-home-screen .fatwa-story-item:active
.fatwa-story-ring {
  transform: scale(0.94);
}


#social-home-screen .fatwa-story-ring {
  transition:
    transform 120ms ease;
}


@media (max-width: 390px) {

  #social-home-screen .fatwa-stories-scroll {
    gap: 10px;
    padding-inline: 10px;
  }

  #social-home-screen .fatwa-story-item {
    width: 67px;
    min-width: 67px;
  }

  #social-home-screen .fatwa-story-ring {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
}


/* =========================================================
   FATWA_INSTAGRAM_HOME_FEED_V1
   Stories + normal feed + fullscreen on video tap
   ========================================================= */


/*
 * Home is now a normal vertical page.
 * Fullscreen snapping remains inside the Reel modal only.
 */
html body.fatwa-social-shell
#social-home-screen {
  overflow-y: auto !important;
  overflow-x: hidden !important;

  scroll-snap-type: none !important;
  overscroll-behavior-y: auto !important;
}


/*
 * The Home feed must grow naturally underneath Stories.
 */
html body.fatwa-social-shell
#social-home-screen
.social-feed-stage {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;

  scroll-snap-type: none !important;

  gap: 14px !important;

  padding:
    8px
    10px
    calc(var(--home-nav-h, 90px) + 24px)
    !important;
}


/*
 * Instagram-style inline video card.
 *
 * Fullscreen Reel CSS is NOT changed because
 * this selector is restricted to Home.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-post {
  position: relative !important;

  width: 100% !important;
  max-width: 620px !important;

  height: auto !important;
  min-height: 0 !important;

  aspect-ratio: 4 / 5 !important;

  margin:
    0
    auto !important;

  overflow: hidden !important;

  border-radius: 17px !important;

  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;

  background: #000 !important;
}


/*
 * Fill the Instagram-style card.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-video {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: inherit !important;

  cursor: pointer;
}


/*
 * Keep the overlay/shade inside the card.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-shade {
  position: absolute !important;
  inset: 0 !important;

  border-radius: inherit !important;
}


/*
 * Do not let old Reel snap rules force a full viewport.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-post {
  flex:
    0
    0
    auto !important;
}


/*
 * Stories stay at the top of normal Home content,
 * not inside the fullscreen video area.
 */
html body.fatwa-social-shell
#social-home-screen
.fatwa-stories-strip {
  flex:
    0
    0
    auto !important;
}


/*
 * Small phones: slightly taller card,
 * still leaving Stories visible above it.
 */
@media (max-width: 430px) {

  html body.fatwa-social-shell
  #social-home-screen
  .social-feed-stage {
    padding-inline:
      8px !important;

    gap:
      11px !important;
  }


  html body.fatwa-social-shell
  #social-home-screen
  .social-reel-post {
    max-width:
      none !important;

    border-radius:
      14px !important;

    aspect-ratio:
      4 / 5 !important;
  }
}


/* =========================================================
   FATWA_INSTAGRAM_HOME_V2
   Clean Instagram-style Home feed
   ========================================================= */


/* ---------------------------------------------------------
   Feed itself: edge-to-edge like Instagram
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-feed-stage {
  width: 100% !important;

  padding:
    0
    0
    calc(var(--social-nav-h, 84px) + 18px)
    !important;

  gap: 18px !important;

  background: #00120d !important;
}


/* ---------------------------------------------------------
   One Home post.
   It is NOT fullscreen anymore.
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-post {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  aspect-ratio: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #000 !important;

  box-shadow: none !important;

  scroll-snap-align: none !important;
}


/* ---------------------------------------------------------
   VIDEO
   Similar proportion to your Instagram screenshot.
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-video {
  position: relative !important;

  inset: auto !important;

  order: 1 !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  aspect-ratio: 9 / 13 !important;

  flex: none !important;

  object-fit: cover !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #000 !important;

  cursor: pointer !important;

  touch-action: manipulation;
}


/*
 * In Home we don't want the dark Reel gradient.
 * Fullscreen Reel keeps it.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-shade {
  display: none !important;
}


/*
 * Clicking Home video opens fullscreen,
 * therefore no center play-circle is necessary.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-play-indicator {
  display: none !important;
}


/* ---------------------------------------------------------
   Remove fullscreen-style overlay text from Home.
   It stays normally visible inside fullscreen Reel.
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-creator,

html body.fatwa-social-shell
#social-home-screen
.social-reel-caption {
  display: none !important;
}


/* ---------------------------------------------------------
   Instagram style action row UNDER video
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-actions {
  position: relative !important;

  z-index: 10 !important;

  inset: auto !important;

  order: 2 !important;

  width: 100% !important;
  min-height: 58px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 12px !important;

  padding:
    5px
    12px
    7px
    !important;

  box-sizing: border-box !important;

  background: #00120d !important;

  color: #fff !important;
}


/* ---------------------------------------------------------
   Like / Comment / Repost / Share icons
   no round floating buttons
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action {
  position: relative !important;

  width: auto !important;
  min-width: 42px !important;

  height: 46px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  margin: 0 !important;
  padding: 0 3px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: #f4f8f6 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Bigger Instagram-like icons */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action > span {
  font-size: 27px !important;

  line-height: 1 !important;
}


/* Counts beside icons */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action > small {
  display: inline !important;

  margin: 0 !important;

  color: #f4f8f6 !important;

  font-size: 13px !important;
  font-weight: 750 !important;

  line-height: 1 !important;
}


html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action > small:empty {
  display: none !important;
}


/* Active Like / Save etc */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action.active {
  color: #55e99a !important;

  background: transparent !important;
}


/* ---------------------------------------------------------
   Instagram action order:

   Like
   Comment
   Repost
   Share
                   Save
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action:nth-child(1) {
  order: 1 !important;
}


html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action:nth-child(2) {
  order: 2 !important;
}


html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action:nth-child(3) {
  order: 3 !important;
}


/* Share */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-action:nth-child(5) {
  order: 4 !important;
}


/* Save goes to opposite side */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
[data-reel-action="save"] {
  order: 5 !important;

  margin-inline-start: auto !important;
}


/*
 * Sound control remains available inside Fullscreen Reel.
 * Hide it from Home action row.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions
.social-reel-sound {
  display: none !important;
}


/* ---------------------------------------------------------
   Own-video menu stays over media, but cleaner
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-owner-menu {
  top: 12px !important;

  inset-inline-end: 12px !important;

  width: 42px !important;
  min-width: 42px !important;

  height: 42px !important;

  border:
    1px solid
    rgba(255,255,255,.18)
    !important;

  border-radius: 50% !important;

  background:
    rgba(0,0,0,.42)
    !important;

  color: #fff !important;

  backdrop-filter: blur(7px);
}


/* ---------------------------------------------------------
   Separate posts subtly — no rounded cards
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.social-reel-post + .social-reel-post {
  border-top:
    1px solid
    rgba(255,255,255,.07)
    !important;
}


/* ---------------------------------------------------------
   Stories: more like Instagram, connected directly to feed
   --------------------------------------------------------- */

html body.fatwa-social-shell
#social-home-screen
.fatwa-stories-strip {
  padding:
    12px
    0
    11px
    !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.07)
    !important;

  background: #00120d !important;
}


/* No card margins around the first video */
html body.fatwa-social-shell
#social-home-screen
.fatwa-stories-strip
+
.social-feed-stage {
  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 430px) {

  html body.fatwa-social-shell
  #social-home-screen
  .social-reel-video {
    aspect-ratio:
      9 / 13 !important;
  }


  html body.fatwa-social-shell
  #social-home-screen
  .social-reel-actions {
    min-height:
      55px !important;

    gap:
      9px !important;

    padding-inline:
      10px !important;
  }


  html body.fatwa-social-shell
  #social-home-screen
  .social-reel-actions
  .social-reel-action > span {
    font-size:
      25px !important;
  }

}



/* =========================================================
   FATWA_HOME_VIDEO_FULLSCREEN_TAP_V2
   ========================================================= */

html body.fatwa-social-shell
#social-home-screen
.social-reel-post {
  position: relative !important;
}


/*
 * Transparent Instagram-style tap target.
 *
 * It covers only the VIDEO area.
 * Bottom action row stays independently clickable.
 */
html body.fatwa-social-shell
#social-home-screen
.fatwa-home-video-open-layer {
  position: absolute !important;

  z-index: 8 !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  bottom: 58px !important;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}


/*
 * Keep owner ⋮ menu above video tap layer.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-owner-menu {
  z-index: 20 !important;
}


/*
 * Action row must stay above tap layer.
 */
html body.fatwa-social-shell
#social-home-screen
.social-reel-actions {
  z-index: 20 !important;
}


/* =========================================================
   FATWA_INTERNAL_REEL_SEND_V1
   ========================================================= */

.fatwa-reel-send-modal[hidden] {
  display: none !important;
}

.fatwa-reel-send-modal {
  position: fixed;
  z-index: 310000;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background: rgba(0,0,0,.58);
}

.fatwa-reel-send-sheet {
  width: min(100%, 620px);
  max-height: 78dvh;

  display: flex;
  flex-direction: column;

  padding:
    8px
    14px
    calc(14px + env(safe-area-inset-bottom));

  border-radius: 24px 24px 0 0;

  background: #071c16;
  color: #fff;
}

.fatwa-reel-send-handle {
  width: 42px;
  height: 4px;

  margin: 0 auto 8px;

  border-radius: 99px;

  background: rgba(255,255,255,.28);
}

.fatwa-reel-send-head {
  position: relative;

  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.fatwa-reel-send-head strong {
  font-size: 18px;
}

#fatwa-reel-send-close {
  position: absolute;
  inset-inline-end: 0;

  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 50%;

  background: rgba(255,255,255,.07);
  color: #fff;

  font-size: 27px;
}

.fatwa-reel-send-search {
  height: 48px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 0 14px;
  margin: 5px 0 10px;

  border-radius: 15px;

  background: rgba(255,255,255,.08);
}

.fatwa-reel-send-search span {
  font-size: 23px;
  opacity: .65;
}

.fatwa-reel-send-search input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: #fff;

  font-size: 16px;
}

.fatwa-reel-send-section {
  padding: 3px 4px 8px;

  color: rgba(255,255,255,.56);

  font-size: 12px;
  font-weight: 700;
}

.fatwa-reel-send-list {
  flex: 1 1 auto;

  min-height: 120px;

  overflow-y: auto;

  scrollbar-width: none;
}

.fatwa-reel-send-list::-webkit-scrollbar {
  display: none;
}

.fatwa-reel-send-person {
  width: 100%;
  min-height: 67px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 7px 5px;

  border: 0;
  border-radius: 14px;

  background: transparent;
  color: #fff;

  text-align: start;
}

.fatwa-reel-send-avatar {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  background: #30433c;

  font-weight: 800;
}

.fatwa-reel-send-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fatwa-reel-send-copy {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.fatwa-reel-send-copy strong,
.fatwa-reel-send-copy small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fatwa-reel-send-copy small {
  color: rgba(255,255,255,.54);
}

.fatwa-reel-send-check {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  display: grid;
  place-items: center;

  border: 2px solid rgba(255,255,255,.25);
  border-radius: 50%;

  font-weight: 900;
}

.fatwa-reel-send-person.selected
.fatwa-reel-send-check {
  border-color: #35dd89;
  background: #35dd89;
  color: #062218;
}

.fatwa-reel-send-empty {
  padding: 35px 8px;

  text-align: center;

  color: rgba(255,255,255,.55);
}

.fatwa-reel-send-status {
  min-height: 20px;

  padding: 4px;

  text-align: center;

  font-size: 12px;

  color: rgba(255,255,255,.7);
}

.fatwa-reel-send-submit {
  width: 100%;
  height: 50px;

  flex: 0 0 50px;

  border: 0;
  border-radius: 15px;

  background: #35dd89;
  color: #062218;

  font-size: 15px;
  font-weight: 850;
}

.fatwa-reel-send-submit:disabled {
  opacity: .34;
}


/* Paper-plane */

.social-reel-send
.fatwa-reel-send-icon {
  display: grid !important;
  place-items: center;

  width: 28px;
  height: 28px;
}

.social-reel-send
.fatwa-reel-send-icon svg {
  width: 26px;
  height: 26px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Reel card inside DM */

.fatwa-dm-body.fatwa-dm-reel-card {
  position: relative;

  width: min(220px, 62vw);

  aspect-ratio: 9 / 13;

  overflow: hidden;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 14px;

  background: #000;

  cursor: pointer;
}

.fatwa-dm-reel-card video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;
}

.fatwa-dm-reel-play {
  position: absolute;

  z-index: 2;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  padding-inline-start: 3px;

  border-radius: 50%;

  background: rgba(0,0,0,.55);

  border: 1px solid rgba(255,255,255,.30);

  color: #fff;

  font-size: 20px;
}


/* =========================================================
   FATWA_SOCIAL_STORY_UPLOAD_V1
   ========================================================= */

.fatwa-story-compose-modal[hidden] {
  display: none !important;
}


.fatwa-story-compose-modal {
  position: fixed;
  z-index: 320000;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    max(14px, env(safe-area-inset-top))
    12px
    max(14px, env(safe-area-inset-bottom));

  background:
    rgba(0,0,0,.84);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


.fatwa-story-compose-sheet {
  width:
    min(
      100%,
      460px
    );

  max-height:
    92dvh;

  display: flex;
  flex-direction: column;

  gap:
    10px;

  padding:
    12px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    24px;

  background:
    #071c16;

  color:
    #fff;
}


.fatwa-story-compose-head {
  position:
    relative;

  min-height:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.fatwa-story-compose-head strong {
  font-size:
    18px;

  font-weight:
    800;
}


#fatwa-story-compose-close {
  position:
    absolute;

  inset-inline-end:
    0;

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.08);

  color:
    #fff;

  font-size:
    27px;
}


.fatwa-story-preview {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    9 / 14;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    #020806;
}


.fatwa-story-choose {
  width:
    100%;

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border:
    1px dashed
    rgba(255,255,255,.22);

  border-radius:
    inherit;

  background:
    rgba(255,255,255,.035);

  color:
    #fff;
}


.fatwa-story-choose > span {
  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #35dd89;

  color:
    #062218;

  font-size:
    34px;

  font-weight:
    500;
}


.fatwa-story-choose strong {
  font-size:
    14px;
}


.fatwa-story-preview-media {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  background:
    #000;
}


.fatwa-story-change {
  position:
    absolute;

  z-index:
    4;

  inset-inline-end:
    12px;

  bottom:
    12px;

  min-height:
    40px;

  padding:
    0
    15px;

  border:
    1px solid
    rgba(255,255,255,.2);

  border-radius:
    999px;

  background:
    rgba(0,0,0,.62);

  color:
    #fff;

  font-weight:
    700;
}


.fatwa-story-compose-status {
  min-height:
    20px;

  text-align:
    center;

  font-size:
    12px;

  color:
    rgba(255,255,255,.7);
}


.fatwa-story-publish {
  width:
    100%;

  height:
    50px;

  flex:
    0
    0
    50px;

  border:
    0;

  border-radius:
    15px;

  background:
    #35dd89;

  color:
    #062218;

  font-size:
    15px;

  font-weight:
    850;
}


.fatwa-story-publish:disabled {
  opacity:
    .35;
}


/* Real avatar images */

#social-home-screen
.fatwa-story-avatar img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


/* Active Story ring */

#social-home-screen
.fatwa-story-ring.has-active-story {
  background:
    linear-gradient(
      135deg,
      #35dd89,
      #15ad68,
      #7df2b5
    ) !important;
}


@media (max-width: 430px) {

  .fatwa-story-compose-modal {
    padding-inline:
      8px;
  }


  .fatwa-story-compose-sheet {
    max-height:
      94dvh;

    border-radius:
      20px;
  }


  .fatwa-story-preview {
    aspect-ratio:
      9 / 14;
  }
}


/* =========================================================
   FATWA_SOCIAL_STORY_VIEWER_V1
   ========================================================= */

.fatwa-story-viewer-modal[hidden] {
  display: none !important;
}


.fatwa-story-viewer-modal {
  position: fixed;

  z-index: 400000;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    #000;
}


.fatwa-story-viewer-stage {
  position: relative;

  width: 100%;
  height: 100%;

  max-width: 520px;

  overflow: hidden;

  background:
    #000;
}


/* ---------------------------------------------------------
   Progress bars
   --------------------------------------------------------- */

.fatwa-story-viewer-progress {
  position: absolute;

  z-index: 20;

  top:
    max(
      9px,
      env(safe-area-inset-top)
    );

  left: 9px;
  right: 9px;

  display: flex;

  gap: 4px;
}


.fatwa-story-progress-segment {
  position: relative;

  flex: 1 1 0;

  height: 3px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.33);
}


.fatwa-story-progress-segment i {
  position: absolute;

  inset-block: 0;

  inset-inline-start: 0;

  width: 0%;

  border-radius: inherit;

  background:
    #fff;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.fatwa-story-viewer-head {
  position: absolute;

  z-index: 20;

  top:
    calc(
      max(
        9px,
        env(safe-area-inset-top)
      )
      + 15px
    );

  left: 10px;
  right: 10px;

  height: 50px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  pointer-events: none;
}


.fatwa-story-viewer-person {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;

  color: #fff;

  text-shadow:
    0 1px 4px rgba(0,0,0,.8);

  pointer-events: auto;
}


.fatwa-story-viewer-avatar {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;
}


.fatwa-story-viewer-avatar
.fatwa-story-avatar {
  width: 36px !important;
  height: 36px !important;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  border:
    1.5px solid
    rgba(255,255,255,.88);

  background:
    #30433c;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    800;
}


.fatwa-story-viewer-avatar
.fatwa-story-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.fatwa-story-viewer-person strong {
  max-width: 210px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 14px;

  font-weight: 800;
}


.fatwa-story-viewer-close {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background:
    rgba(0,0,0,.25);

  color:
    #fff;

  font-size: 30px;

  line-height: 1;

  pointer-events: auto;

  -webkit-tap-highlight-color:
    transparent;
}


/* ---------------------------------------------------------
   Story media
   --------------------------------------------------------- */

.fatwa-story-viewer-media {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    #000;
}


.fatwa-story-viewer-content {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  background:
    #000;
}


/* ---------------------------------------------------------
   Invisible Instagram-style tap zones
   --------------------------------------------------------- */

.fatwa-story-viewer-zone {
  position: absolute;

  z-index: 10;

  top: 72px;
  bottom: 0;

  width: 50%;

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;
}


.fatwa-story-viewer-prev {
  left: 0;
}


.fatwa-story-viewer-next {
  right: 0;
}


/* ---------------------------------------------------------
   Story viewer owns the screen
   --------------------------------------------------------- */

body.fatwa-story-viewer-open {
  overflow: hidden !important;
}


body.fatwa-story-viewer-open
#fatwa-bottom-nav,

body.fatwa-story-viewer-open
.social-bottom-nav,

body.fatwa-story-viewer-open
#social-bottom-nav {
  display: none !important;
}


/* Desktop keeps mobile Story proportions */

@media (min-width: 700px) {

  .fatwa-story-viewer-stage {
    height: min(100%, 920px);

    border-inline:
      1px solid
      rgba(255,255,255,.08);
  }
}


/* =========================================================
   FATWA_STORY_EDITOR_V2
   ========================================================= */

.fatwa-story-editor-v2[hidden] {
  display: none !important;
}


.fatwa-story-editor-v2 {
  position: fixed;
  z-index: 500000;

  inset: 0;

  display: flex;
  justify-content: center;

  background: #000;
  color: #fff;
}


.fatwa-story-editor-shell {
  position: relative;

  width: min(100%, 520px);
  height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #091711 0%,
      #010403 100%
    );
}


/* Top */

.fatwa-story-editor-top {
  position: relative;
  z-index: 40;

  flex: 0 0 auto;

  min-height:
    calc(
      58px +
      env(safe-area-inset-top)
    );

  padding:
    calc(
      8px +
      env(safe-area-inset-top)
    )
    12px
    8px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.64),
      rgba(0,0,0,0)
    );
}


.fatwa-story-editor-top strong {
  font-size: 16px;
  font-weight: 800;
}


.fatwa-story-editor-circle {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 50%;

  background:
    rgba(0,0,0,.38);

  color: #fff;

  font-size: 26px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.fatwa-story-editor-change-top {
  font-size: 21px;
}


/* Canvas */

.fatwa-story-editor-canvas {
  position: relative;

  flex: 1 1 auto;

  min-height: 0;

  margin: 0 9px;

  overflow: hidden;

  border-radius: 22px;

  background: #000;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.38);
}


.fatwa-story-editor-media {
  position: absolute;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #000;
}


.fatwa-story-editor-preview-media {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  background: #000;
}


/* draggable text */

.fatwa-story-editor-text-layer {
  position: absolute;

  z-index: 30;

  transform:
    translate(-50%, -50%);

  max-width: 82%;

  padding:
    5px
    9px;

  border-radius: 10px;

  color: #fff;

  font-size: 32px;
  font-weight: 850;

  line-height: 1.14;

  text-align: center;

  white-space: pre-wrap;

  text-shadow:
    0 2px 5px
    rgba(0,0,0,.8);

  cursor: grab;

  touch-action: none;

  user-select: none;

  -webkit-user-select: none;
}


.fatwa-story-editor-text-layer:active {
  cursor: grabbing;

  background:
    rgba(0,0,0,.14);

  outline:
    1px dashed
    rgba(255,255,255,.45);
}


/* Tools */

.fatwa-story-editor-tools {
  flex: 0 0 auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  padding:
    10px
    12px
    6px;
}


.fatwa-story-editor-tools button {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 16px;

  background:
    rgba(255,255,255,.065);

  color: #fff;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.fatwa-story-editor-tools button > span {
  font-size: 21px;
  font-weight: 850;
}


.fatwa-story-editor-tools button > small {
  font-size: 11px;
  font-weight: 700;

  opacity: .76;
}


/* tool panels */

.fatwa-story-tool-panel[hidden] {
  display: none !important;
}


.fatwa-story-tool-panel {
  flex: 0 0 auto;

  margin:
    9px
    12px
    0;

  padding: 12px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 18px;

  background:
    rgba(17,39,31,.96);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.28);
}


.fatwa-story-text-input {
  width: 100%;
  height: 46px;

  padding: 0 13px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 13px;

  outline: 0;

  background:
    rgba(255,255,255,.07);

  color: #fff;

  font-size: 16px;
}


.fatwa-story-text-options {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 15px;

  align-items: end;

  margin-top: 13px;
}


.fatwa-story-text-options label {
  display: flex;
  flex-direction: column;

  gap: 7px;

  min-width: 0;
}


.fatwa-story-text-options label span {
  font-size: 11px;
  opacity: .65;
}


.fatwa-story-text-options input[type="range"] {
  width: 100%;
  accent-color: #35dd89;
}


.fatwa-story-color-row {
  display: flex;

  gap: 7px;
}


.fatwa-story-color-row button {
  width: 28px;
  height: 28px;

  padding: 0;

  border:
    2px solid
    rgba(255,255,255,.25);

  border-radius: 50%;

  background:
    var(--story-color);

  box-shadow:
    0 0 0 2px
    rgba(0,0,0,.28);
}


.fatwa-story-color-row button.selected {
  transform: scale(1.13);

  border-color: #fff;
}


/* Trim */

.fatwa-story-trim-panel {
  padding-top: 10px;
}


.fatwa-story-trim-time {
  display: flex;

  justify-content: space-between;

  margin-bottom: 8px;
}


.fatwa-story-trim-time span {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.fatwa-story-trim-time span:last-child {
  align-items: flex-end;
}


.fatwa-story-trim-time small {
  opacity: .55;
}


.fatwa-story-trim-time strong {
  font-size: 14px;
}


.fatwa-story-range-row {
  min-height: 36px;

  display: flex;
  align-items: center;

  gap: 10px;
}


.fatwa-story-range-row span {
  width: 24px;

  text-align: center;
}


.fatwa-story-range-row input {
  flex: 1;

  accent-color: #35dd89;
}


/* Publish */

.fatwa-story-editor-status {
  min-height: 18px;

  padding: 1px 12px;

  text-align: center;

  color:
    rgba(255,255,255,.68);

  font-size: 11px;
}


.fatwa-story-editor-publish {
  flex: 0 0 52px;

  height: 52px;

  margin:
    4px
    12px
    calc(
      10px +
      env(safe-area-inset-bottom)
    );

  border: 0;

  border-radius: 17px;

  background: #35dd89;

  color: #052117;

  font-size: 15px;
  font-weight: 900;

  box-shadow:
    0 8px 24px
    rgba(53,221,137,.19);
}


.fatwa-story-editor-publish:disabled {
  opacity: .45;
}


/* =========================================================
   Story text in Viewer
   ========================================================= */

.fatwa-story-viewer-text {
  position: absolute;

  z-index: 8;

  transform:
    translate(-50%, -50%);

  max-width: 82%;

  padding:
    5px
    9px;

  font-weight: 850;

  line-height: 1.14;

  text-align: center;

  white-space: pre-wrap;

  text-shadow:
    0 2px 5px
    rgba(0,0,0,.84);

  pointer-events: none;
}


@media (min-width: 700px) {

  .fatwa-story-editor-shell {
    border-inline:
      1px solid
      rgba(255,255,255,.07);
  }
}


/* =========================================================
   FATWA_STORY_STICKERS_V1
   ========================================================= */

.fatwa-story-editor-tools {
  grid-template-columns:
    repeat(4, 1fr) !important;
}


/* Sticker picker */

.fatwa-story-sticker-panel {
  padding:
    12px !important;

  max-height:
    190px;

  overflow-y:
    auto;
}


.fatwa-story-sticker-grid {
  display: grid;

  grid-template-columns:
    repeat(8, 1fr);

  gap: 8px;
}


.fatwa-story-sticker-grid button {
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  min-width: 0;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.055);

  font-size:
    clamp(
      23px,
      6vw,
      31px
    );

  line-height: 1;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform .12s ease,
    background .12s ease;
}


.fatwa-story-sticker-grid button:active {
  transform:
    scale(.88);

  background:
    rgba(255,255,255,.13);
}


/* Stickers over editor */

.fatwa-story-editor-stickers {
  position: absolute;

  z-index: 31;

  inset: 0;

  pointer-events: none;
}


.fatwa-story-editor-sticker {
  position: absolute;

  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  font-size: 54px;

  line-height: 1;

  transform-origin:
    center center;

  pointer-events: auto;

  touch-action: none;

  cursor: grab;

  user-select: none;

  -webkit-user-select:
    none;

  filter:
    drop-shadow(
      0 3px 5px
      rgba(0,0,0,.28)
    );

  will-change:
    transform,
    left,
    top;
}


.fatwa-story-editor-sticker.active {
  cursor: grabbing;

  outline:
    1.5px dashed
    rgba(255,255,255,.65);

  outline-offset:
    5px;

  border-radius:
    12px;
}


/* Delete zone */

.fatwa-story-sticker-delete-zone[hidden] {
  display: none !important;
}


.fatwa-story-sticker-delete-zone {
  position: absolute;

  z-index: 60;

  left: 50%;
  bottom: 17px;

  transform:
    translateX(-50%);

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:
    50%;

  background:
    rgba(15,15,15,.72);

  color: #fff;

  font-size: 25px;

  pointer-events: none;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    transform .15s ease,
    background .15s ease;
}


.fatwa-story-sticker-delete-zone.active {
  transform:
    translateX(-50%)
    scale(1.16);

  background:
    rgba(191,42,42,.92);
}


/* Published Story Sticker */

.fatwa-story-viewer-sticker {
  position: absolute;

  z-index: 9;

  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  font-size: 54px;

  line-height: 1;

  transform-origin:
    center center;

  pointer-events: none;

  user-select: none;

  filter:
    drop-shadow(
      0 3px 5px
      rgba(0,0,0,.28)
    );
}


@media (max-width: 390px) {

  .fatwa-story-editor-tools {
    gap: 5px;
  }


  .fatwa-story-editor-tools button {
    min-height: 54px;

    flex-direction: column;

    gap: 2px;
  }


  .fatwa-story-sticker-grid {
    grid-template-columns:
      repeat(6, 1fr);
  }
}


/* =========================================================
   FATWA_STORY_MUSIC_V1
   ========================================================= */

.fatwa-story-editor-tools {
  grid-template-columns:
    repeat(5, 1fr) !important;
}


.fatwa-story-music-panel {
  max-height:
    min(52dvh, 470px);

  overflow-y:
    auto;

  scrollbar-width:
    none;
}


.fatwa-story-music-panel::-webkit-scrollbar {
  display: none;
}


.fatwa-story-music-search {
  height: 45px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    0 12px;

  margin-bottom:
    10px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.065);
}


.fatwa-story-music-search span {
  font-size:
    21px;

  opacity:
    .58;
}


.fatwa-story-music-search input {
  width: 100%;

  min-width: 0;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    #fff;

  font-size:
    15px;
}


.fatwa-story-music-list {
  display: flex;
  flex-direction: column;

  gap: 3px;

  max-height:
    225px;

  overflow-y:
    auto;

  scrollbar-width:
    none;
}


.fatwa-story-music-list::-webkit-scrollbar {
  display: none;
}


.fatwa-story-music-row {
  width: 100%;

  min-height:
    58px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    7px 9px;

  border: 0;

  border-radius:
    13px;

  background:
    transparent;

  color:
    #fff;

  text-align:
    start;
}


.fatwa-story-music-row.selected {
  background:
    rgba(53,221,137,.12);

  box-shadow:
    inset 0 0 0 1px
    rgba(53,221,137,.27);
}


.fatwa-story-music-play {
  width: 39px;
  height: 39px;

  flex:
    0 0 39px;

  display: grid;
  place-items: center;

  padding-inline-start:
    2px;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.09);

  font-size:
    14px;
}


.fatwa-story-music-row.selected
.fatwa-story-music-play {
  background:
    #35dd89;

  color:
    #062218;
}


.fatwa-story-music-copy {
  flex: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.fatwa-story-music-copy strong,
.fatwa-story-music-copy small {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.fatwa-story-music-copy strong {
  font-size:
    14px;
}


.fatwa-story-music-copy small,
.fatwa-story-music-duration {
  color:
    rgba(255,255,255,.52);

  font-size:
    11px;
}


.fatwa-story-music-empty {
  min-height:
    90px;

  display: grid;
  place-items: center;

  color:
    rgba(255,255,255,.48);

  font-size:
    13px;
}


/* Selected music */

.fatwa-story-music-selected[hidden] {
  display: none !important;
}


.fatwa-story-music-selected {
  margin-top:
    11px;

  padding:
    12px;

  border:
    1px solid
    rgba(53,221,137,.19);

  border-radius:
    16px;

  background:
    rgba(53,221,137,.055);
}


.fatwa-story-music-selected-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom:
    13px;
}


.fatwa-story-music-selected-head > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.fatwa-story-music-selected-head small,
.fatwa-story-music-selected-head span {
  color:
    rgba(255,255,255,.54);

  font-size:
    10px;
}


.fatwa-story-music-selected-head strong {
  max-width:
    250px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    14px;
}


#fatwa-story-music-remove {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.08);

  color:
    #fff;

  font-size:
    22px;
}


.fatwa-story-music-control {
  display: flex;
  flex-direction: column;

  gap: 6px;

  margin-top:
    12px;
}


.fatwa-story-music-control > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.fatwa-story-music-control span {
  color:
    rgba(255,255,255,.64);

  font-size:
    11px;
}


.fatwa-story-music-control strong {
  font-size:
    11px;

  color:
    #fff;
}


.fatwa-story-music-control input {
  width:
    100%;

  accent-color:
    #35dd89;
}


@media (max-width: 430px) {

  .fatwa-story-editor-tools {
    gap:
      4px !important;
  }


  .fatwa-story-editor-tools button {
    min-height:
      52px !important;

    padding:
      4px 2px;
  }


  .fatwa-story-editor-tools button > span {
    font-size:
      19px;
  }


  .fatwa-story-editor-tools button > small {
    font-size:
      9px;
  }
}

/* FATWA_STORY_CONTROLS_STABLE_V2 */

.fatwa-story-viewer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.fatwa-story-viewer-control {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;

  background: rgba(0,0,0,.32);
  color: #fff;

  font-size: 16px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fatwa-story-viewer-delete {
  background: rgba(110,25,25,.42);
}

.fatwa-story-viewer-delete[hidden] {
  display: none !important;
}

.fatwa-story-viewer-actions
.fatwa-story-viewer-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}


/* =========================================================
   FATWA_STORY_ORIGINAL_AUDIO_EDITOR_V1
   ========================================================= */

.fatwa-story-original-audio-actions {
  display: flex;
  align-items: center;

  gap: 8px;
}


.fatwa-story-original-mute {
  min-height: 34px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    0
    10px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 999px;

  background:
    rgba(255,255,255,.075);

  color: #fff;

  font-weight: 750;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform .12s ease,
    background .12s ease;
}


.fatwa-story-original-mute span {
  font-size: 15px;
}


.fatwa-story-original-mute small {
  font-size: 10px;

  white-space: nowrap;

  color:
    rgba(255,255,255,.8);
}


.fatwa-story-original-mute.muted {
  background:
    rgba(255,255,255,.035);

  opacity: .7;
}


.fatwa-story-original-mute:active {
  transform:
    scale(.95);
}


/* =========================================================
   FATWA_STORY_ORIGINAL_AUDIO_QUICK_V1
   ========================================================= */

.fatwa-story-original-quick-toggle[hidden] {
  display: none !important;
}


.fatwa-story-original-quick-toggle {
  position: absolute;

  z-index: 46;

  top: 15px;

  inset-inline-end: 14px;

  min-height: 42px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0
    13px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius: 999px;

  background:
    rgba(5,15,12,.62);

  color: #fff;

  box-shadow:
    0 5px 20px
    rgba(0,0,0,.24);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform .12s ease,
    background .18s ease,
    opacity .18s ease;
}


.fatwa-story-original-quick-toggle > span {
  display: grid;
  place-items: center;

  width: 22px;

  font-size: 16px;
}


.fatwa-story-original-quick-toggle > strong {
  max-width: 145px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 11px;

  font-weight: 800;
}


.fatwa-story-original-quick-toggle.muted {
  background:
    rgba(20,20,20,.72);

  color:
    rgba(255,255,255,.78);
}


.fatwa-story-original-quick-toggle:active {
  transform:
    scale(.95);
}


html[dir="rtl"]
.fatwa-story-original-quick-toggle {
  flex-direction: row;
}


/* =========================================================
   FATWA_STORY_VIEWS_UI_V1
   ========================================================= */


/* ---------------------------------------------------------
   Seen / Unseen Story rings
   --------------------------------------------------------- */

#social-home-screen
.fatwa-story-ring.story-unseen {
  background:
    linear-gradient(
      135deg,
      #35dd89,
      #15ad68,
      #7df2b5
    ) !important;
}


#social-home-screen
.fatwa-story-ring.story-seen {
  background:
    rgba(
      150,
      166,
      159,
      .48
    ) !important;
}


/* ---------------------------------------------------------
   Owner view count
   --------------------------------------------------------- */

.fatwa-story-viewer-owner-views[hidden] {
  display: none !important;
}


.fatwa-story-viewer-owner-views {
  position: absolute;

  z-index: 35;

  left: 0;
  right: 0;

  bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  display: flex;
  justify-content: center;

  pointer-events: none;
}


#fatwa-story-viewer-views-button {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    999px;

  background:
    rgba(0,0,0,.50);

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    800;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  pointer-events:
    auto;

  -webkit-tap-highlight-color:
    transparent;
}


/* ---------------------------------------------------------
   Viewer Bottom Sheet
   --------------------------------------------------------- */

.fatwa-story-viewers-modal[hidden] {
  display: none !important;
}


.fatwa-story-viewers-modal {
  position: fixed;

  z-index: 520000;

  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background:
    rgba(0,0,0,.55);
}


.fatwa-story-viewers-sheet {
  width:
    min(
      100%,
      520px
    );

  max-height:
    70dvh;

  display: flex;
  flex-direction: column;

  padding:
    8px
    14px
    calc(
      15px +
      env(safe-area-inset-bottom)
    );

  border-radius:
    24px
    24px
    0
    0;

  background:
    #071c16;

  color:
    #fff;

  box-shadow:
    0 -18px 50px
    rgba(0,0,0,.34);
}


.fatwa-story-viewers-handle {
  width: 42px;
  height: 4px;

  margin:
    0
    auto
    8px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.28);
}


.fatwa-story-viewers-head {
  position: relative;

  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.fatwa-story-viewers-head strong {
  font-size:
    17px;

  font-weight:
    850;
}


#fatwa-story-viewers-close {
  position: absolute;

  inset-inline-end:
    0;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,.07);

  color:
    #fff;

  font-size:
    25px;
}


.fatwa-story-viewers-list {
  flex:
    1 1 auto;

  min-height:
    100px;

  overflow-y:
    auto;

  padding-top:
    6px;

  scrollbar-width:
    none;
}


.fatwa-story-viewers-list::-webkit-scrollbar {
  display: none;
}


.fatwa-story-viewer-row {
  min-height:
    66px;

  display: flex;
  align-items: center;

  gap:
    11px;

  padding:
    7px
    2px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.fatwa-story-viewer-row-avatar {
  width:
    48px !important;

  height:
    48px !important;

  flex:
    0 0 48px;

  overflow:
    hidden;

  border-radius:
    50%;
}


.fatwa-story-viewer-row-avatar img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


.fatwa-story-viewer-row-copy {
  flex:
    1;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.fatwa-story-viewer-row-copy strong,
.fatwa-story-viewer-row-copy small {
  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.fatwa-story-viewer-row-copy strong {
  font-size:
    14px;
}


.fatwa-story-viewer-row-copy small {
  color:
    rgba(255,255,255,.54);

  font-size:
    11px;
}


.fatwa-story-viewer-row time {
  flex:
    0 0 auto;

  color:
    rgba(255,255,255,.46);

  font-size:
    10px;
}


.fatwa-story-viewers-empty,
.fatwa-story-viewers-loading {
  min-height:
    130px;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  text-align:
    center;

  color:
    rgba(255,255,255,.52);

  font-size:
    13px;
}


/* =========================================================
   FATWA_BUNNY_THUMBNAIL_PROCESSING_V1
   ========================================================= */

/* Bunny thumbnail in Profile / Explore */

.fatwa-bunny-thumbnail-card
.fatwa-video-card-media {
  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #020806;
}

.fatwa-bunny-thumbnail-card
.fatwa-video-preview-loader {
  display: none !important;
}


/* Processing panel */

.fatwa-bunny-processing-panel[hidden] {
  display: none !important;
}

.fatwa-bunny-processing-panel {
  display: grid;

  gap: 8px;

  margin: 8px 0 12px;
}

.fatwa-bunny-processing-card {
  min-height: 76px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 10px;

  border: 1px solid rgba(53,221,137,.14);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(53,221,137,.055),
      rgba(255,255,255,.025)
    );

  overflow: hidden;
}

.fatwa-bunny-processing-visual {
  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: rgba(0,0,0,.28);
}

.fatwa-bunny-processing-spinner {
  width: 23px;
  height: 23px;

  display: block;

  border: 2px solid rgba(255,255,255,.14);
  border-top-color: #35dd89;

  border-radius: 50%;

  animation:
    fatwa-bunny-processing-spin
    .85s
    linear
    infinite;
}

@keyframes fatwa-bunny-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

.fatwa-bunny-processing-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.fatwa-bunny-processing-copy strong,
.fatwa-bunny-processing-copy span,
.fatwa-bunny-processing-copy small {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.fatwa-bunny-processing-copy strong {
  color: #fff;

  font-size: 13px;
}

.fatwa-bunny-processing-copy span {
  color: #5ce9a0;

  font-size: 11px;
  font-weight: 800;
}

.fatwa-bunny-processing-copy small {
  color: rgba(255,255,255,.53);

  font-size: 10px;
}


/* =========================================================
   FATWA_BACKGROUND_VIDEO_UPLOAD_V1
   ========================================================= */

.fatwa-background-upload[hidden] {
  display: none !important;
}


.fatwa-background-upload {
  position: fixed;

  z-index: 180000;

  left: 50%;

  bottom:
    calc(
      var(--home-nav-h, 84px) +
      env(safe-area-inset-bottom) +
      12px
    );

  transform:
    translateX(-50%);

  width:
    min(
      calc(100vw - 24px),
      480px
    );

  min-height: 66px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(53,221,137,.23);

  border-radius: 18px;

  background:
    rgba(4,25,19,.94);

  color: #fff;

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.36);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.fatwa-background-upload-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    rgba(53,221,137,.12);

  color: #35dd89;

  font-size: 24px;

  font-weight: 900;
}


.fatwa-background-upload-copy {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.fatwa-background-upload-copy strong,
.fatwa-background-upload-copy span {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.fatwa-background-upload-copy strong {
  font-size: 13px;

  font-weight: 850;
}


.fatwa-background-upload-copy span {
  color:
    rgba(255,255,255,.62);

  font-size: 10px;
}


.fatwa-background-upload-track {
  width: 100%;
  height: 3px;

  overflow: hidden;

  margin-top: 3px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.09);
}


.fatwa-background-upload-track i {
  width: 0%;
  height: 100%;

  display: block;

  border-radius: inherit;

  background: #35dd89;

  transition:
    width .18s ease;
}


#fatwa-background-upload-percent {
  min-width: 38px;

  flex: 0 0 auto;

  text-align: center;

  color: #5ce9a0;

  font-size: 12px;

  font-weight: 900;
}


.fatwa-background-upload[data-stage="processing"]
.fatwa-background-upload-icon {
  animation:
    fatwa-background-upload-pulse
    1.1s
    ease-in-out
    infinite alternate;
}


.fatwa-background-upload[data-stage="failed"] {
  border-color:
    rgba(255,90,90,.3);
}


.fatwa-background-upload[data-stage="failed"]
.fatwa-background-upload-icon,
.fatwa-background-upload[data-stage="failed"]
#fatwa-background-upload-percent {
  color: #ff8c8c;
}


@keyframes fatwa-background-upload-pulse {

  from {
    opacity: .55;
  }

  to {
    opacity: 1;
  }
}