/**
 * WebView-specific CSS fixes
 * Addresses iOS WebView issues including rotation animations and authentication states
 */

/* Prevent unwanted rotation animations during auth redirect */
body.webview-mode {
  /* Disable auto-rotate animations */
  -webkit-transform: none !important;
  transform: none !important;
  /* Prevent orientation change animations */
  transition: none !important;
}

/* iOS WebView specific fixes */
body.ios-webview {
  /* Enable smooth scrolling without breaking normal scroll */
  -webkit-overflow-scrolling: touch;
  /* Remove position: fixed as it breaks scrolling */
  /* Instead, we'll handle bounce prevention differently */
  overscroll-behavior: none;
}

/* Fix for auth modal during redirect */
.ios-webview .auth-modal {
  /* Prevent modal from rotating during auth flow */
  -webkit-transform-origin: center center;
  transform-origin: center center;
  transition: opacity 0.3s ease;
  /* Avoid transform transitions */
  transition-property: opacity, visibility;
}

/* Disable rotation animation on loading spinner during redirect */
.ios-webview .loading-spinner,
.ios-webview .fa-spin,
.ios-webview .fa-sync-alt {
  animation-play-state: paused !important;
}

/* Resume animation when auth flow is complete */
.ios-webview .auth-active .loading-spinner,
.ios-webview .auth-active .fa-spin,
.ios-webview .auth-active .fa-sync-alt {
  animation-play-state: running !important;
}

/* Fix for modal backdrop during orientation change */
.ios-webview .modal-backdrop {
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* Prevent content shift during auth state change */
.webview-mode .auth-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fix for iOS status bar overlap */
.ios-webview {
  /* Safe area insets for proper spacing */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  /* Ensure full viewport height */
  min-height: 100vh;
}

/* Prevent jarring transitions when returning from auth redirect */
.webview-mode * {
  animation-fill-mode: both !important;
}

/* Ensure smooth fade-in after auth */
@keyframes smoothFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.webview-mode .auth-success {
  animation: smoothFadeIn 0.5s ease;
}

/* Fix for iOS WebView localStorage persistence issues */
.ios-webview .remember-me-container {
  display: none !important; /* Hide remember me since we handle persistence differently */
}

/* Loading state improvements for WebView */
.webview-mode .loading-overlay {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.webview-mode .loading-overlay .loading-spinner {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ensure touch feedback works properly in WebView */
.ios-webview button,
.ios-webview a,
.ios-webview .clickable {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Fix for input focus issues in iOS WebView */
.ios-webview input,
.ios-webview textarea,
.ios-webview select {
  font-size: 16px !important; /* Prevent zoom on focus */
  -webkit-appearance: none;
  border-radius: 0;
}

/* Smooth transitions for auth state changes */
.webview-mode .user-menu,
.webview-mode .auth-button {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide elements during auth redirect to prevent flashing */
body.auth-redirecting .main-content {
  opacity: 0.5;
  pointer-events: none;
}

/* Ensure proper z-index stacking in WebView */
.ios-webview .auth-modal {
  z-index: 10000;
}

.ios-webview .loading-overlay {
  z-index: 10001;
}

/* Fix for keyboard overlap in iOS WebView */
.ios-webview.keyboard-visible {
  padding-bottom: 0 !important;
}

.ios-webview.keyboard-visible .auth-modal {
  transform: translateY(-25%);
}

/* Orientation change handling */
@media screen and (orientation: landscape) {
  .ios-webview .auth-modal {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Small screen optimizations for WebView */
@media (max-width: 375px) {
  .webview-mode .auth-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
  }
}

/* Debug class to identify WebView mode */
.webview-mode::before {
  content: 'WebView Mode Active';
  position: fixed;
  top: -100px; /* Hidden but present in DOM for debugging */
  left: 0;
  font-size: 10px;
  color: red;
  z-index: 99999;
}