/* Mobile PWA Optimizations for AI Safe */

/* Ensure minimum 44px touch targets on mobile devices */
@media (max-width: 768px) {
  
  /* Button touch target optimizations */
  button,
  [role="button"],
  .btn,
  [data-testid*="button-"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  /* Small buttons should still meet minimum touch targets */
  button[class*="size-sm"],
  .btn-small {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }
  
  /* Input fields touch optimization */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    min-height: 44px !important;
    padding: 12px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Sidebar menu items should be larger on mobile */
  [data-radix-collection-item],
  .sidebar-menu-button,
  [data-testid*="link-"] {
    min-height: 48px !important;
    padding: 12px 16px !important;
  }
  
  /* Conversation card buttons - make them larger and more spaced */
  [data-testid*="button-view-"],
  [data-testid*="button-export-"],
  [data-testid*="button-delete-"] {
    min-height: 44px !important;
    padding: 12px 16px !important;
    margin: 2px !important;
  }
  
  /* Card touch targets */
  [data-testid*="card-conversation-"] {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Form labels should be larger on mobile */
  label {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }
  
  /* Improve checkbox and radio button touch targets */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 4px !important;
  }
  
  /* Badge and status indicators should be more visible */
  .badge,
  [data-testid*="badge-"],
  [data-testid*="status-"] {
    font-size: 14px !important;
    padding: 6px 12px !important;
    min-height: 28px !important;
  }
  
  /* Icon sizing for better mobile visibility */
  .sidebar svg,
  .nav svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Better spacing for mobile layouts */
  .card-content,
  .card-header {
    padding: 16px !important;
  }
  
  /* Header and navigation spacing */
  header {
    padding: 12px 16px !important;
  }
  
  /* Ensure dropdown and modal content is touch-friendly */
  [data-radix-popper-content-wrapper],
  [role="dialog"],
  [role="menu"] {
    padding: 8px !important;
  }
  
  [role="menuitem"],
  [role="dialog"] button {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }
  
  /* Status indicator improvements */
  [data-testid="connection-status"] {
    font-size: 14px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
  }
  
  /* Improve modal and dialog spacing */
  .dialog-content,
  .sheet-content {
    padding: 24px !important;
  }
  
  .dialog-header,
  .sheet-header {
    padding-bottom: 16px !important;
  }
  
  /* Better scroll areas on mobile */
  [data-radix-scroll-area-viewport] {
    padding-right: 8px !important;
  }
  
  /* Ensure tabs are touch-friendly */
  [role="tab"] {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
  }
  
  /* Mobile-specific hover states (touch feedback) */
  button:active,
  [role="button"]:active,
  .btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
}

/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  
  /* Reduce vertical padding in landscape to save space */
  .card-header,
  .card-content {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  
  /* Sidebar should be more compact in landscape */
  .sidebar-menu-button {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
  
  /* Header should be more compact */
  header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* iOS Safari specific optimizations */
@supports (-webkit-touch-callout: none) {
  /* Prevent iOS zoom on input focus */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* iOS safe area support */
  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  
  /* Fix iOS button styling */
  button,
  input[type="submit"],
  input[type="button"] {
    -webkit-appearance: none !important;
    border-radius: 8px !important;
  }
}

/* Dark mode mobile optimizations */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  
  /* Better contrast for mobile dark mode */
  .card {
    border-width: 1px !important;
  }
  
  /* Status indicators should be more visible in dark mode */
  [data-testid="connection-status"] {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* High contrast mode support for accessibility */
@media (prefers-contrast: high) {
  button,
  input,
  select,
  textarea {
    border-width: 2px !important;
    font-weight: 600 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  button:active,
  [role="button"]:active {
    transform: none !important;
  }
  
  * {
    transition: none !important;
    animation: none !important;
  }
}