/* =============================================================================
   Sparrow Chat - iOS/Capacitor Specific Styles
   This file contains overrides for iOS safe areas and mobile-specific fixes.
   Only loaded when running in Capacitor (iOS app).
   ============================================================================= */

/* Detect Capacitor environment and apply iOS fixes */
html.ios-app,
html.capacitor {
  /* Force safe area detection */
  --safe-area-top: env(safe-area-inset-top, 20px);
  --safe-area-bottom: env(safe-area-inset-bottom, 34px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --keyboard-height: 0px;
}

/* App container - ensure full screen with safe areas */
html.ios-app #app,
html.capacitor #app {
  padding-top: var(--safe-area-top);
  background: var(--surface);
}

/* =============================================================================
   CHAT HEADER - Fix overlap with status bar/notch
   ============================================================================= */
html.ios-app .chat-header,
html.capacitor .chat-header {
  height: var(--header-height);
  padding: 0 16px;
  padding-left: calc(16px + var(--safe-area-left));
  padding-right: calc(16px + var(--safe-area-right));
}

/* =============================================================================
   SIDEBAR - Fix overlap and safe areas
   ============================================================================= */
html.ios-app .sidebar,
html.capacitor .sidebar {
  padding-top: var(--safe-area-top);
}

html.ios-app .sidebar-header,
html.capacitor .sidebar-header {
  height: var(--header-height);
  padding-left: calc(16px + var(--safe-area-left));
}

html.ios-app .sidebar-footer,
html.capacitor .sidebar-footer {
  padding-bottom: calc(12px + var(--safe-area-bottom));
  padding-left: calc(12px + var(--safe-area-left));
}

/* =============================================================================
   CHAT MESSAGES - Fix edge clipping
   ============================================================================= */
html.ios-app .chat-messages,
html.capacitor .chat-messages {
  padding-left: calc(16px + var(--safe-area-left));
  padding-right: calc(16px + var(--safe-area-right));
}

/* =============================================================================
   CHAT INPUT - Fix bottom safe area (home indicator)
   ============================================================================= */
html.ios-app .chat-input-container,
html.capacitor .chat-input-container {
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-area-bottom));
  padding-left: calc(16px + var(--safe-area-left));
  padding-right: calc(16px + var(--safe-area-right));
}

/* =============================================================================
   FIX STRETCHED BUTTONS - Remove min-height for specific buttons
   ============================================================================= */
html.ios-app .header-action-btn,
html.ios-app .sidebar-toggle,
html.ios-app .new-chat-btn,
html.ios-app .close-sidebar-btn,
html.ios-app .send-button,
html.ios-app .settings-back-btn,
html.capacitor .header-action-btn,
html.capacitor .sidebar-toggle,
html.capacitor .new-chat-btn,
html.capacitor .close-sidebar-btn,
html.capacitor .send-button,
html.capacitor .settings-back-btn {
  min-height: unset;
  height: 36px;
  width: 36px;
}

html.ios-app .sidebar-action-btn,
html.capacitor .sidebar-action-btn {
  min-height: 44px; /* Keep this one for touch target */
}

/* =============================================================================
   SETTINGS MODAL - Full screen on iOS with safe areas
   ============================================================================= */
html.ios-app .modal,
html.capacitor .modal {
  padding: 0;
}

html.ios-app .modal-content.settings-modal,
html.capacitor .modal-content.settings-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* Settings layout - account for safe area at top */
html.ios-app .settings-layout,
html.capacitor .settings-layout {
  height: 100%;
  padding-top: var(--safe-area-top);
}

/* Settings sidebar - positioned below safe area */
html.ios-app .settings-sidebar,
html.capacitor .settings-sidebar {
  padding-left: var(--safe-area-left);
  top: var(--safe-area-top) !important;
  height: calc(100% - var(--safe-area-top)) !important;
}

html.ios-app .settings-sidebar-header,
html.capacitor .settings-sidebar-header {
  padding: 16px;
  padding-left: calc(16px + var(--safe-area-left));
  min-height: 56px;
}

html.ios-app .settings-sidebar-footer,
html.capacitor .settings-sidebar-footer {
  padding-bottom: calc(16px + var(--safe-area-bottom));
}

/* Settings content area */
html.ios-app .settings-content,
html.capacitor .settings-content {
  padding-right: var(--safe-area-right);
  padding-top: var(--safe-area-top);
}

html.ios-app .settings-content-header,
html.capacitor .settings-content-header {
  padding-top: 16px;
  padding-left: calc(16px + var(--safe-area-left));
  min-height: 56px;
}

/* Mobile back button in settings content - proper positioning */
html.ios-app .settings-mobile-back,
html.capacitor .settings-mobile-back {
  min-height: unset;
  height: 36px;
  width: 36px;
}

html.ios-app .settings-content-body,
html.capacitor .settings-content-body {
  padding-bottom: calc(24px + var(--safe-area-bottom));
}

/* Mobile save button safe area */
html.ios-app .settings-mobile-save,
html.capacitor .settings-mobile-save {
  padding-bottom: calc(16px + var(--safe-area-bottom));
}

/* =============================================================================
   TOGGLE SWITCHES - Fix alignment on iOS
   ============================================================================= */
html.ios-app .toggle-label,
html.capacitor .toggle-label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
}

html.ios-app .toggle-label .settings-toggle,
html.capacitor .toggle-label .settings-toggle {
  flex-shrink: 0;
}

html.ios-app .toggle-label span:last-child,
html.capacitor .toggle-label span:last-child {
  flex: 1;
}

/* Settings nav items - proper sizing */
html.ios-app .settings-nav-item,
html.capacitor .settings-nav-item {
  min-height: 48px;
  padding: 14px 20px;
}

/* =============================================================================
   MODALS - General modal safe area fixes
   ============================================================================= */
html.ios-app .modal-content:not(.settings-modal),
html.capacitor .modal-content:not(.settings-modal) {
  margin-top: var(--safe-area-top);
  max-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom) - 48px);
}

/* =============================================================================
   DROPDOWNS - Fix edge clipping
   ============================================================================= */
html.ios-app .model-dropdown,
html.capacitor .model-dropdown {
  max-height: calc(70vh - var(--safe-area-bottom));
}

html.ios-app .mcp-tools-dropdown,
html.capacitor .mcp-tools-dropdown {
  max-height: calc(70vh - var(--safe-area-bottom));
}

/* =============================================================================
   iOS-SPECIFIC TOUCH OPTIMIZATIONS
   ============================================================================= */
html.ios-app .chat-item,
html.capacitor .chat-item {
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

html.ios-app textarea,
html.capacitor textarea {
  font-size: 16px; /* Prevent iOS zoom on focus */
}

/* =============================================================================
   iOS KEYBOARD HANDLING
   ============================================================================= */

/* Use dvh units for proper iOS keyboard handling */
html.ios-app #app,
html.capacitor #app {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - adjusts with keyboard */
}

html.ios-app .chat-container,
html.capacitor .chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

html.ios-app .chat-messages,
html.capacitor .chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.ios-app .chat-input-container,
html.capacitor .chat-input-container {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: var(--surface);
}

/* When keyboard is open */
html.ios-app.keyboard-open .chat-input-container,
html.capacitor.keyboard-open .chat-input-container {
  padding-bottom: 8px; /* Remove safe area - keyboard covers it */
}

/* =============================================================================
   LANDSCAPE MODE FIXES
   ============================================================================= */
@media (orientation: landscape) {
  html.ios-app .chat-header,
  html.capacitor .chat-header {
    padding-left: calc(16px + var(--safe-area-left));
    padding-right: calc(16px + var(--safe-area-right));
  }
  
  html.ios-app .chat-messages,
  html.capacitor .chat-messages {
    padding-left: calc(24px + var(--safe-area-left));
    padding-right: calc(24px + var(--safe-area-right));
  }
  
  html.ios-app .settings-sidebar,
  html.capacitor .settings-sidebar {
    padding-left: var(--safe-area-left);
  }
}

/* =============================================================================
   MOBILE SIDEBAR (iOS) - Ensure proper overlay
   ============================================================================= */
@media (max-width: 768px) {
  html.ios-app .sidebar.open,
  html.capacitor .sidebar.open {
    padding-top: var(--safe-area-top);
  }
  
  html.ios-app .sidebar-overlay,
  html.capacitor .sidebar-overlay {
    top: 0;
  }
}