/* sp-mobile.css
 * Mobile overrides for the social proof popups. Load AFTER social-proof.css.
 * Only mobile rules live here. Desktop styles are owned by Builder 1 (popup piece).
 * Round 2: safe-area fix, width-scoped landscape rule, no clipping, X-only dismissal. */

/* ---------- Small phones: bottom sheet positioning ---------- */
@media (max-width: 480px) {
  .sp-popup {
    /* The base is already a bottom sheet (left/right 12px). This just adds the
       safe-area inset so the popup clears the iPhone home indicator.
       Requires viewport-fit=cover on the page's viewport meta tag. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
  }

  .sp-popup-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .sp-popup-title {
    font-size: 13px;
  }

  /* The message reflows with an ellipsis instead of being guillotined:
     the base already applies -webkit-line-clamp: 2, so the card grows
     naturally and long copy degrades gracefully. No max-height here. */

  /* The close X is the single dismissal path: give thumbs a real target. */
  .sp-popup-close {
    min-width: 30px;
    min-height: 30px;
  }
}

/* ---------- Landscape phones: shrink, never eat the viewport ----------
   Width-scoped so short desktop windows (devtools open, short viewport)
   never get the crippled mobile treatment. */
@media (max-width: 640px) and (max-height: 500px) {
  .sp-popup {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 8px 32px 8px 8px;
    border-radius: 12px;
  }

  .sp-popup-logo {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .sp-popup-title {
    font-size: 12px;
  }

  .sp-popup-msg {
    font-size: 11px;
  }

  /* Hide the timestamp to save vertical room on short screens. */
  .sp-popup-time {
    display: none;
  }
}

/* ---------- Reduced motion: no slide, simple fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-popup {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
}