/* NURAYO_DM_MINI_CALL_V1
 * Full-screen video/audio modal becomes a small, draggable call tile.
 * Reuses its ORIGINAL video/audio nodes and WebRTC peer connections.
 */
html body #fatwa-dm-call-modal #fatwa-dm-call-minimize,
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-bar,
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-tap {
  display: none !important;
}
html body #fatwa-dm-call-modal[data-call-mode="active"]:not(.mini-call) #fatwa-dm-call-minimize {
  display: grid !important;
  position: absolute !important;
  top: calc(18px + env(safe-area-inset-top)) !important;
  left: 18px !important;
  right: auto !important;
  z-index: 150 !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(3,25,18,.78) !important;
  backdrop-filter: blur(12px);
  color: #f3fff7 !important;
  font: 700 26px/1 system-ui,sans-serif !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Keep the same active call surface mounted, merely resize/reposition it. */
html body #fatwa-dm-call-modal.mini-call[data-call-mode="active"] {
  position: fixed !important;
  inset: auto 12px calc(90px + env(safe-area-inset-bottom)) auto !important;
  width: min(46vw, 190px) !important;
  height: min(60vw, 255px) !important;
  min-width: 150px !important;
  min-height: 170px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 40px) !important;
  display: block !important;
  z-index: 2147483000 !important;
  border: 1px solid rgba(84,222,151,.58) !important;
  border-radius: 20px !important;
  background: #061c14 !important;
  box-shadow: 0 15px 48px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
  contain: layout paint;
  touch-action: manipulation;
}
html body #fatwa-dm-call-modal.mini-call.mini-call-moved[data-call-mode="active"] {
  inset: var(--mini-call-y) auto auto var(--mini-call-x) !important;
}
html body #fatwa-dm-call-modal.mini-call::before,
html body #fatwa-dm-call-modal.mini-call::after {
  display: none !important;
}
html body #fatwa-dm-call-modal.mini-call .fatwa-dm-call-panel,
html body #fatwa-dm-call-modal.mini-call.video-call[data-call-mode="active"] .fatwa-dm-call-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
}
html body #fatwa-dm-call-modal.mini-call .fatwa-dm-call-avatar,
html body #fatwa-dm-call-modal.mini-call .fatwa-dm-call-active-actions,
html body #fatwa-dm-call-modal.mini-call.video-call .fatwa-dm-call-active-actions,
html body #fatwa-dm-call-modal.mini-call .fatwa-dm-call-incoming-actions,
html body #fatwa-dm-call-modal.mini-call #fatwa-dm-call-invite-sheet,
html body #fatwa-dm-call-modal.mini-call #fatwa-dm-call-minimize {
  display: none !important;
}

/* Grab handle + maximize/hang up work on audio, video and group calls. */
html body #fatwa-dm-call-modal.mini-call #fatwa-dm-call-mini-bar {
  display: flex !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 46px !important;
  box-sizing: border-box !important;
  padding: 5px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  z-index: 300 !important;
  background: linear-gradient(180deg,rgba(0,12,9,.92),rgba(0,12,9,.64)) !important;
}
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-grab {
  display: grid !important;
  place-items: center !important;
  flex: 1 !important;
  height: 38px !important;
  min-width: 26px !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  color: #bcead1 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-grab:active {
  cursor: grabbing !important;
}
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-bar button {
  flex: 0 0 35px !important;
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 10px !important;
  background: rgba(15,63,45,.9) !important;
  cursor: pointer !important;
  font: 800 19px/1 system-ui,sans-serif !important;
  touch-action: manipulation !important;
}
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-end {
  background: #d8464b !important;
  border-color: #d8464b !important;
  transform: none !important;
}
html body #fatwa-dm-call-modal.mini-call #fatwa-dm-call-mini-tap {
  display: block !important;
  position: absolute !important;
  inset: 46px 0 0 !important;
  width: 100% !important;
  height: calc(100% - 46px) !important;
  z-index: 230 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
html body #fatwa-dm-call-modal .fatwa-dm-call-mini-bar button:focus-visible,
html body #fatwa-dm-call-modal #fatwa-dm-call-minimize:focus-visible,
html body #fatwa-dm-call-modal #fatwa-dm-call-mini-tap:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -2px !important;
}

/* Video keeps the original remote stream, with tiny self preview on top. */
html body #fatwa-dm-call-modal.mini-call.video-call .fatwa-dm-call-remote-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body #fatwa-dm-call-modal.mini-call.video-call .fatwa-dm-call-local-video {
  position: absolute !important;
  inset: 52px 6px auto auto !important;
  width: 47px !important;
  height: 66px !important;
  max-width: 30% !important;
  z-index: 80 !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 9px !important;
  box-shadow: 0 6px 15px rgba(0,0,0,.45) !important;
  pointer-events: none !important;
}
html body #fatwa-dm-call-modal.mini-call.video-call[data-call-mode="active"] .fatwa-dm-call-name,
html body #fatwa-dm-call-modal.mini-call.video-call[data-call-mode="active"] .fatwa-dm-call-status,
html body #fatwa-dm-call-modal.mini-call.video-call[data-call-mode="active"] .fatwa-dm-call-time {
  display: none !important;
}
html body #fatwa-dm-call-modal.mini-call.group-video-call .fatwa-dm-call-group-grid {
  display: grid !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,minmax(0,1fr)) !important;
  gap: 2px !important;
  padding: 2px !important;
  pointer-events: none !important;
}
html body #fatwa-dm-call-modal.mini-call.group-video-call .fatwa-dm-group-video-tile {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Voice calls remain live in a compact, readable call card. */
html body #fatwa-dm-call-modal.mini-call:not(.video-call) {
  width: min(74vw, 265px) !important;
  height: 145px !important;
  min-height: 126px !important;
}
html body #fatwa-dm-call-modal.mini-call:not(.video-call) .fatwa-dm-call-name {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  font: 700 15px/1.35 system-ui,sans-serif !important;
  max-width: calc(100% - 18px) !important;
  margin: 54px auto 2px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #fatwa-dm-call-modal.mini-call:not(.video-call) .fatwa-dm-call-status,
html body #fatwa-dm-call-modal.mini-call:not(.video-call) .fatwa-dm-call-time {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: calc(100% - 18px) !important;
  margin: 2px auto !important;
  min-height: 0 !important;
  font: 500 12px/1.4 system-ui,sans-serif !important;
  color: #bcead1 !important;
}
@media (max-width: 360px) {
  html body #fatwa-dm-call-modal.mini-call.video-call {
    width: min(47vw, 165px) !important;
    height: min(62vw, 225px) !important;
  }
}