/**
 * Mobile-First Enhancements for Hi.AI Design
 * Optimized for mobile devices with progressive enhancement
 */

/* ===== CSS Variables for Mobile ===== */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  
  /* Touch target sizes (Apple HIG & Material Design) */
  --touch-min: 44px;
  --touch-comfortable: 48px;
  
  /* Mobile spacing */
  --mobile-padding: max(1rem, var(--safe-area-left));
  --mobile-padding-sm: max(0.75rem, var(--safe-area-left));
}

/* ===== Base Mobile Styles (Mobile-First) ===== */
* {
  -webkit-tap-highlight-color: rgba(0, 207, 255, 0.2);
  -webkit-touch-callout: none;
}

html {
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* Smooth scroll on mobile */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  /* Prevent horizontal scroll */
  overflow-x: hidden;
  max-width: 100vw;
  
  /* Safe area padding */
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* ===== Touch-Friendly Interactive Elements ===== */
a,
button,
input[type="submit"],
input[type="button"],
.nav-link,
.nav-cta-btn,
.suggestion-chip,
.back-link {
  /* Minimum touch target size */
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  
  /* Touch feedback */
  -webkit-tap-highlight-color: rgba(0, 207, 255, 0.2);
  cursor: pointer;
  
  /* Prevent text selection on tap */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ===== Form Input Optimizations ===== */
input,
textarea,
select {
  /* Prevent iOS zoom on focus */
  font-size: 16px !important;
  
  /* Touch-friendly sizing */
  min-height: var(--touch-min);
  padding: 12px 16px;
  
  /* Improve readability */
  line-height: 1.5;
  
  /* Better focus state for mobile */
  border-width: 2px;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(0, 207, 255, 0.5);
  outline-offset: 2px;
}

/* ===== Mobile Navigation Fixes ===== */
.nav-mobile-overlay {
  /* Ensure proper stacking */
  z-index: 9999;
  
  /* Full viewport with safe areas */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  
  /* Smooth transition */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-mobile-overlay.open,
.nav-mobile-overlay[open],
.nav-mobile-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex !important;
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ===== Container Safe Areas ===== */
.container,
.section-container,
.site-container {
  padding-left: var(--mobile-padding);
  padding-right: var(--mobile-padding);
  max-width: 100vw;
  overflow-x: hidden;
}

/* ===== Prevent Horizontal Overflow ===== */
img,
video,
iframe,
table,
pre,
code {
  max-width: 100%;
  height: auto;
}

table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Text Overflow Handling ===== */
h1, h2, h3, h4, h5, h6, p, li {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ===== Tablet Optimization (min-width: 640px) ===== */
@media (min-width: 640px) {
  :root {
    --mobile-padding: max(1.5rem, var(--safe-area-left));
  }
  
  input,
  textarea,
  select,
  button {
    min-height: var(--touch-comfortable);
  }
}

/* ===== Desktop Styles (min-width: 768px) ===== */
@media (min-width: 768px) {
  body {
    padding-left: 0;
    padding-right: 0;
  }
  
  .container,
  .section-container,
  .site-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Remove mobile-specific touch optimizations on desktop */
  a,
  button {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
  }
}

/* ===== Large Desktop (min-width: 1024px) ===== */
@media (min-width: 1024px) {
  .container,
  .section-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ===== Extra Small Devices (max-width: 375px) ===== */
@media (max-width: 375px) {
  :root {
    --mobile-padding: max(0.75rem, var(--safe-area-left));
  }
  
  .container,
  .section-container,
  .site-container {
    padding-left: var(--mobile-padding-sm);
    padding-right: var(--mobile-padding-sm);
  }
  
  /* Slightly smaller text on very small screens */
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
}

/* ===== Landscape Orientation Optimization ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-mobile-overlay {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .nav-mobile-links {
    gap: 1rem;
  }
}

/* ===== Accessibility - Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
  a,
  button {
    outline: 2px solid currentColor;
  }
  
  input,
  textarea,
  select {
    border-width: 3px;
  }
}

/* ===== Performance Optimizations ===== */
/* GPU acceleration for common animations */
.nav-mobile-overlay,
.suggestion-chip,
.message-content,
.card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smooth scrolling with momentum on iOS */
.chat-messages,
.nav-mobile-overlay {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}