/* Mobile App Optimizations for Capacitor/iOS */

/* Safe area support for iOS notch and home indicator */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Only apply to mobile app */
.is-mobile-app body {
  /* Prevent overscroll bounce effect */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Safe area padding for main container */
.is-mobile-app .outer-chatbox {
  padding-top: max(20px, var(--safe-area-inset-top));
  padding-bottom: max(24px, calc(var(--safe-area-inset-bottom) + 12px));
  padding-left: max(0px, var(--safe-area-inset-left));
  padding-right: max(0px, var(--safe-area-inset-right));
}

/* Ensure chat container has proper bottom padding to prevent messages behind input */
.is-mobile-app .chat-container {
  padding-bottom: max(140px, calc(var(--safe-area-inset-bottom) + 140px)) !important;
}

/* Adjust chat input for keyboard and safe areas */
.is-mobile-app .chat-input-container {
  padding-bottom: max(20px, var(--safe-area-inset-bottom));
  transition: margin-bottom 0.3s ease-out;
}

/* Better touch targets for mobile */
.is-mobile-app button,
.is-mobile-app .clickable {
  min-height: 44px;
  min-width: 44px;
}

/* Improve scrolling performance */
.is-mobile-app .chat-container {
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  will-change: scroll-position;
}

/* Disable text selection for better mobile UX (except in input fields) */
.is-mobile-app * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.is-mobile-app input,
.is-mobile-app textarea,
.is-mobile-app [contenteditable],
.is-mobile-app .message-content,
.is-mobile-app .selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Prevent zoom on input focus for iOS */
.is-mobile-app input,
.is-mobile-app textarea,
.is-mobile-app select {
  font-size: 16px !important; /* iOS zooms if font-size < 16px */
}

/* Smooth scrolling */
.is-mobile-app {
  scroll-behavior: smooth;
}

/* Hide scrollbars but keep functionality */
.is-mobile-app .chat-container::-webkit-scrollbar {
  display: none;
}

.is-mobile-app .chat-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Adjust for keyboard visibility */
.is-mobile-app.keyboard-visible .chat-container {
  max-height: calc(100vh - 200px);
}

/* Status bar spacer for iOS */
.is-mobile-app .status-bar-spacer {
  height: var(--safe-area-inset-top);
  background: transparent;
}

/* Improve button press feedback */
.is-mobile-app button:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: all 0.1s ease;
}

/* Prevent pull-to-refresh interference */
.is-mobile-app html,
.is-mobile-app body {
  overscroll-behavior-y: none;
}

/* Landing page adjustments for mobile app */
.is-mobile-app .landing-container {
  padding-top: max(40px, calc(var(--safe-area-inset-top) + 20px));
  padding-bottom: max(40px, calc(var(--safe-area-inset-bottom) + 20px));
}

/* Mobile header adjustments for safe areas */
.is-mobile-app .mobile-header {
  padding-top: max(8px, calc(var(--safe-area-inset-top) + 4px)) !important;
  padding-bottom: 8px !important;
  min-height: max(60px, calc(60px + var(--safe-area-inset-top))) !important;
}

/* Hamburger menu button styling for mobile app */
.is-mobile-app .mobile-menu-toggle {
  background: transparent !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Chat sidebar adjustments for safe areas */
.is-mobile-app .chat-sidebar {
  padding-top: max(70px, calc(60px + var(--safe-area-inset-top) + 10px)) !important;
}

/* Outer chatbox adjustment for header height */
.is-mobile-app .outer-chatbox {
  padding-top: max(70px, calc(60px + var(--safe-area-inset-top) + 10px)) !important;
}

/* Modal adjustments for safe areas */
.is-mobile-app .modal-content {
  max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 40px);
}

/* Improve touch scrolling momentum */
.is-mobile-app .scrollable {
  -webkit-overflow-scrolling: touch;
}

/* Prevent accidental text selection during swipe gestures */
.is-mobile-app .chat-message {
  -webkit-touch-callout: none;
}

/* Optimize animations for mobile */
.is-mobile-app * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Better focus states for mobile */
.is-mobile-app input:focus,
.is-mobile-app textarea:focus {
  outline: none;
  border-color: var(--brand-color, #ff7566);
  box-shadow: 0 0 0 2px rgba(255, 117, 102, 0.2);
}

/* Adjust loading indicators for mobile */
.is-mobile-app .typing-indicator {
  margin-bottom: max(120px, calc(var(--safe-area-inset-bottom) + 120px));
  padding-bottom: 0;
}

/* Ensure input area has proper bottom padding for iOS home indicator */
.is-mobile-app .input-area {
  padding-bottom: max(20px, calc(var(--safe-area-inset-bottom) + 12px)) !important;
  background: transparent !important;
}