/* =========================================
   CrowdPet Messages Popup (FC) — iOS SAFE VIEWPORT FIX
   Fixes:
   - iOS Safari address-bar/toolbar causing squished iframe on first open
   - Adds safe-area padding
   - Forces reliable repaint (translateZ / contain / overscroll)
   ========================================= */

body.cp-modal-open{
  overflow: hidden !important;
  touch-action: none;
}

#cp-messages-modal{
  position: fixed !important;
  inset: 0 !important;
  display: none;
  z-index: 2147483647 !important;
  pointer-events: none;
}

#cp-messages-modal.is-open{
  display: block !important;
  pointer-events: auto;
}

#cp-messages-modal .cp-messages-modal__backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55);
}

/* Outer container */
#cp-messages-modal .cp-messages-modal__inner{
  position: fixed !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;

  width: 380px;
  max-width: calc(100vw - 24px);

  /* Key: use dvh when possible and clamp */
  height: min(520px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);

  background: transparent !important;
  overflow: visible !important;

  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  animation: cp-chat-zoom 0.25s ease-out;

  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;

  /* iOS repaint helpers */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint size;
}

/* Clipping wrapper owns radius + bg */
#cp-messages-modal .cp-messages-modal__framewrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  background: #000 !important;
  border-radius: 16px 16px 0 16px !important;
  overflow: hidden !important;

  /* Prevent iOS overscroll weirdness inside */
  overscroll-behavior: contain;
}

#cp-messages-modal .cp-messages-modal__iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #000 !important;
}

/* Floating close */
#cp-messages-modal .cp-messages-modal__close{
  position: absolute !important;
  top: -29px !important;
  right: -14px !important;
  z-index: 10 !important;

  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;

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

  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.78) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}

/* Mobile: near-fullscreen, but still respects safe areas */
@media (max-width: 768px){
  #cp-messages-modal .cp-messages-modal__inner{
    right: max(10px, env(safe-area-inset-right)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;

    width: auto !important;
    max-width: none !important;

    height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
  }

  #cp-messages-modal .cp-messages-modal__framewrap{
    border-radius: 12px !important;
  }

  #cp-messages-modal .cp-messages-modal__close{
    top: -27px !important;
    right: -12px !important;
  }
}

@keyframes cp-chat-zoom {
  0% { transform: scale(0.85) translateZ(0); opacity: 0; }
  100% { transform: scale(1) translateZ(0); opacity: 1; }
}