/* ================================================================
   iOS NATIVE FEEL — Override layer for Capacitor iOS
   Loaded AFTER styles.css to patch web-like patterns
   ================================================================ */

/* ─── 1. KILL ALL HOVER STATES ON TOUCH DEVICES ─── */
/* Only allow :hover on devices that actually support hover (desktop) */
@media (hover: none) and (pointer: coarse) {
  /* Nuclear: disable hover-triggered transforms/colors on touch */
  .tab:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-danger:hover,
  .btn-fandango:hover,
  .rec-card:hover,
  .rec-comment:hover,
  .list-card:hover,
  .friend-item:hover,
  .chat-row:hover,
  .icon-only-btn:hover,
  .icon-btn:hover,
  .action-icon-btn:hover,
  .options-menu-item:hover,
  .rec-options-btn:hover,
  .badge-card:hover,
  .notification-item:hover,
  .leaderboard-row:hover,
  .settings-row:hover,
  .community-card:hover,
  .milestone-card:hover,
  a:hover,
  button:hover {
    transform: none !important;
    box-shadow: inherit !important;
    /* Let color/background changes stay — they're subtle enough */
  }

  /* Remove cursor everywhere — iOS has no cursor */
  * {
    cursor: default !important;
  }
}

/* ─── 2. NATIVE iOS TAP FEEDBACK ─── */
/* Replace web hover with native-feeling tap (press-down + release) */
@media (hover: none) and (pointer: coarse) {
  /* Subtle scale-down on tap — mimics iOS button press */
  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .icon-btn:active,
  .icon-only-btn:active,
  .action-icon-btn:active {
    transform: scale(0.96) !important;
    transition: transform 60ms ease-out !important;
    opacity: 0.85;
  }

  /* Cards get subtle dimming, not lifting */
  .rec-card:active,
  .list-card:active,
  .friend-item:active,
  .chat-row:active,
  .notification-item:active,
  .badge-card:active,
  .community-card:active,
  .milestone-card:active,
  .leaderboard-row:active {
    transform: scale(0.98) !important;
    opacity: 0.7 !important;
    transition: transform 80ms ease-out, opacity 80ms ease-out !important;
  }

  /* Tab press feedback */
  .tab:active {
    opacity: 0.5 !important;
    transition: opacity 50ms ease-out !important;
  }

  /* Options menu item */
  .options-menu-item:active {
    background: rgba(147, 51, 234, 0.2) !important;
  }
}

/* ─── 3. iOS TYPOGRAPHY — Apple HIG Compliance ─── */
/* Apple HIG: Body text ≥ 17px, captions ≥ 12px, titles ≥ 20px */
/* Using SF Pro sizing scale: 11/12/13/15/17/20/22/28/34 */

body {
  font-family: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui,
    'Helvetica Neue', sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent iOS from inflating font sizes */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Override Inter with system font for native feel */
:root {
  --font-main: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui,
    'Helvetica Neue', sans-serif;
}

/* Bump up small text to iOS minimums */
.rec-meta,
.options-menu-item,
.btn,
.tagline {
  font-size: 15px;
}

.rec-type,
.tab.chip {
  font-size: 13px; /* iOS caption1 size */
}

.rec-comment {
  font-size: 15px;
}

/* ─── 4. iOS SAFE AREA INSETS ─── */
/* Ensure content respects the notch, Dynamic Island, and home indicator */

/* Top bar / header */
header {
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}

/* Bottom tab bar */
.tabs {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Main content area — keep clear of safe areas
   Base .content already has padding:20px from styles.css;
   only ADD the safe-area inset, don't double-up the 20px. */
.content {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* When Explore is active the section is position:fixed and
   fills the viewport on its own — suppress content padding. */
#explore.section.active {
  padding: 0 !important;
}

/* Modals should respect bottom safe area */
.modal-overlay {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── 5. iOS SCROLL PHYSICS ─── */
/* Native momentum scrolling on all scrollable containers */

.content,
#home-content,
#friends-content,
#lists-content,
#chat-content,
#reels-content,
#notifications-content,
#leaderboard-content,
#profile-content,
#settings-content,
.modal-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto; /* Allow rubber-band bounce */
}

/* Horizontal scroll rows — native momentum */
.horizontal-scroll,
.scroll-row,
.badge-grid,
.share-targets-row,
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; /* Subtle snap feel */
}

/* Hide scrollbars on iOS — native apps never show them persistently */
::-webkit-scrollbar {
  display: none;
}
* {
  scrollbar-width: none; /* Firefox */
}

/* ─── 6. iOS FORM FIELDS ─── */
/* Match native iOS text field appearance */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
select {
  font-size: 17px !important; /* Prevents iOS zoom on focus */
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.12); /* iOS systemGray6 */
  border: none;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  /* Smooth keyboard push */
  transition: none;
}

input::placeholder,
textarea::placeholder {
  color: rgba(235, 235, 245, 0.3); /* iOS placeholderText dark mode */
}

/* Remove iOS input shadow */
input,
textarea {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Search field — pill shaped like iOS */
input[type="search"] {
  border-radius: 10px;
  padding-left: 36px; /* Space for search icon */
}

/* ─── 7. iOS NAVIGATION TRANSITIONS ─── */
/* Smooth section transitions that feel like native view pushes */

.section.active {
  animation: iosSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes iosSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Back navigation (sliding left) */
.section.ios-slide-back {
  animation: iosSlideBack 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes iosSlideBack {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── 8. iOS MODAL BOTTOM SHEET ─── */
/* Override centered modals with bottom-sheet presentation */

@media (hover: none) and (pointer: coarse) {
  .modal-overlay {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  .modal-content {
    border-radius: 14px 14px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    animation: iosSheetUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  @keyframes iosSheetUp {
    from {
      transform: translateY(100%);
      opacity: 1;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Drag handle indicator at top of sheet */
  .modal-content::before {
    content: '';
    display: block;
    width: 36px;
    height: 5px;
    background: rgba(120, 120, 128, 0.3);
    border-radius: 2.5px;
    margin: 8px auto 12px;
    flex-shrink: 0;
  }
}

/* ─── 9. iOS BLUR / GLASS EFFECTS ─── */
/* Use Apple's exact blur values for frosted glass */

header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(12, 10, 9, 0.72) !important;
}

.tabs {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(0, 0, 0, 0.45) !important;
}

.modal-overlay {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ─── 10. iOS BORDER RADIUS NORMALIZATION ─── */
/* iOS uses continuous corners (squircle), approximate with specific radii */

.btn,
.btn-primary,
.btn-secondary {
  border-radius: 12px; /* iOS button standard — not pill/25px */
}

.rec-card,
.list-card,
.badge-card,
.community-card {
  border-radius: 12px; /* iOS card radius */
}

.modal-content {
  border-radius: 14px; /* iOS sheet radius */
}

.options-menu {
  border-radius: 14px; /* iOS context menu */
}

/* ─── 11. iOS LIST SEPARATORS ─── */
/* Native iOS uses thin 0.5px separators with left inset */

.friend-item,
.chat-row,
.notification-item,
.settings-row,
.leaderboard-row {
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.36); /* iOS separator dark mode */
  margin-bottom: 0;
}

/* ─── 12. iOS SELECTION & LONG PRESS ─── */
/* Prevent non-native text selection behaviors */

button, .tab, .btn, .icon-btn, .action-icon-btn,
.rec-card, .list-card, .friend-item, .chat-row {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow text selection in content areas */
.rec-comment, .post-text, p, .content p {
  -webkit-user-select: text;
  user-select: text;
}

/* ─── 13. iOS STATUS BAR SPACING ─── */
/* When running in standalone/Capacitor, account for status bar */

@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ─── 14. REDUCE MOTION FOR ACCESSIBILITY ─── */
/* Respect iOS "Reduce Motion" setting */

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

/* ─── 15. iOS DARK MODE SYSTEM COLORS ─── */
/* Use Apple's exact dark mode palette for native consistency */

:root {
  --ios-label: rgba(255, 255, 255, 1);
  --ios-secondary-label: rgba(235, 235, 245, 0.6);
  --ios-tertiary-label: rgba(235, 235, 245, 0.3);
  --ios-quaternary-label: rgba(235, 235, 245, 0.18);
  --ios-separator: rgba(84, 84, 88, 0.36);
  --ios-opaque-separator: rgba(56, 56, 58, 1);
  --ios-system-bg: rgb(0, 0, 0);
  --ios-secondary-bg: rgb(28, 28, 30);
  --ios-tertiary-bg: rgb(44, 44, 46);
  --ios-system-gray: rgb(142, 142, 147);
  --ios-system-gray2: rgb(99, 99, 102);
  --ios-system-gray3: rgb(72, 72, 74);
  --ios-system-gray4: rgb(58, 58, 60);
  --ios-system-gray5: rgb(44, 44, 46);
  --ios-system-gray6: rgb(28, 28, 30);
}

/* ─── 16. SMOOTH PAGE-LEVEL OVERSCROLL ─── */
/* Allow the native rubber-band bounce on the main page */
html, body {
  overscroll-behavior: auto;
  height: 100%;
}

#app-container {
  min-height: 100%;
  /* Remove border-left/right on mobile — native apps don't have these */
}

@media (hover: none) and (pointer: coarse) {
  #app-container {
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
  }
}