/* Turbo Native and Mobile-specific styles */

/* Safe area insets for notched devices */
.safe-area-inset {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

.pb-safe {
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

.pt-safe {
  padding-top: calc(env(safe-area-inset-top) + 1rem);
}

/* Touch-friendly tap targets (minimum 44x44px) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent text selection on mobile */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Optimize scrolling performance */
.smooth-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Native-like pull-to-refresh indicator space */
.pull-refresh-space {
  padding-top: 60px;
  margin-top: -60px;
}

/* Prevent double-tap zoom */
button, a, input, textarea {
  touch-action: manipulation;
}

/* Native app detection styles */
html.turbo-native {
  /* Hide elements that shouldn't appear in native app */
}

html.turbo-native .web-only {
  display: none !important;
}

html.turbo-native .native-spacing {
  padding-bottom: calc(env(safe-area-inset-bottom) + 80px); /* Tab bar height */
}

/* iOS-specific styles */
html.turbo-native-ios {
  /* iOS-specific overrides */
}

/* Android-specific styles */
html.turbo-native-android {
  /* Android-specific overrides */
}

/* Improve tap performance */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Mobile-optimized animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Loading states for native app */
.native-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.native-loading::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top-color: #111827;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}