/* ==========================================================================
   VIBRA - Responsive & Accessibility Rules
   ========================================================================== */

/* Mobile viewports (standalone smartphone) */
@media (max-width: 600px) {
  .app-viewport-wrapper {
    background-color: var(--bg-app);
    padding: 0;
  }

  .device-frame {
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  .simulator-bar {
    display: none !important;
  }

  /* On actual mobile, let standard OS status bar take precedence or adapt */
  .status-bar {
    padding-top: env(safe-area-inset-top, 4px);
    height: auto;
    min-height: 38px;
  }
}

/* Landscape warning for mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
  .device-frame {
    max-height: 100% !important;
  }
}

/* Accessibility: High contrast support */
@media (prefers-contrast: more) {
  :root {
    --border-light: rgba(255, 255, 255, 0.25);
    --border-medium: rgba(255, 255, 255, 0.45);
    --text-muted: #A0A5BA;
  }

  .btn-primary, .btn-secondary, .intent-card, .profile-card {
    border: 2px solid #FFFFFF !important;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   VIBRA — MOBILE-FIRST PROFILE & PHOTO RESPONSIVE RULES
   ========================================================================== */

/* ── Very small phones (≤ 375px — iPhone SE, small Android) ── */
@media (max-width: 375px) {
  .detail-cover-container,
  .my-profile-photo-strip {
    height: clamp(170px, 30vh, 220px) !important;
  }
  .detail-name, .profile-user-name { font-size: 1.15rem; }
  .detail-age  { font-size: 1.05rem; }
  .edit-photos-grid { gap: 6px; }
  .edit-profile-sheet-content { padding: 12px 10px 24px 10px; }
  .edit-section-box { padding: 10px 10px; }
}

/* ── Short/compact screens (max-height 650px) ── */
@media (max-height: 650px) {
  .detail-cover-container,
  .my-profile-photo-strip {
    height: clamp(160px, 28vh, 200px) !important;
  }
  .detail-body { gap: 8px; padding: 10px 12px 80px 12px; }
  .detail-name, .profile-user-name { font-size: 1.15rem; }
  .detail-age  { font-size: 1.0rem; }
  .auth-modal-content { max-height: 94vh; }
}

/* ── Tall phones (min-height 750px) ── */
@media (min-height: 750px) {
  .detail-cover-container,
  .my-profile-photo-strip {
    height: clamp(210px, 36vh, 280px);
  }
}

/* ── Tablet / desktop: center and limit modal sheets ── */
@media (min-width: 600px) {
  .detail-sheet-content,
  .auth-modal-content,
  .my-profile-gallery-card,
  .my-profile-info-card {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .detail-sheet-content {
    border-radius: var(--radius-xl);
  }
  .profile-detail-sheet,
  .auth-modal-sheet {
    align-items: center;
    justify-content: center;
  }
  .detail-cover-container,
  .my-profile-photo-strip {
    height: clamp(220px, 38vh, 300px);
  }
}

/* ── Universal: ensure all user photos are shown completely without destructive cropping ── */
.profile-card-image,
.detail-cover-img,
.my-profile-photo-img,
.detail-gallery-thumb-img,
.lightbox-slide img,
.ephemeral-viewer-img,
.edit-photo-img {
  object-fit: contain !important;
  max-width: 100%;
  max-height: 100%;
}

/* ==========================================================================
   VIBRA — NATIVE MOBILE SAFE-AREAS & HARDWARE ADAPTATIONS
   iOS (Notch / Dynamic Island) & Android (Gesture Nav / 3-Button Bar)
   ========================================================================== */

/* Safe area padding for standalone mobile screens */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-screen-container {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .chat-input-container {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Screen Security: Blurred privacy protection during app switching */
body.secure-screen-active .app-screen-container {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.secure-screen-active.app-in-background {
  filter: blur(25px) grayscale(50%);
  pointer-events: none;
}