/* =============================================================================
   SENTINO AI - MOBILE UTILITIES
   Shared mobile-first utilities: safe areas, touch targets, input zoom fix
   ============================================================================= */

/* Custom property for minimum touch target */
:root {
  --touch-min: 44px;
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

/* =============================================================================
   1. INPUT ZOOM PREVENTION (iOS auto-zoom at < 16px)
   ============================================================================= */

@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* =============================================================================
   2. DISPLAY HELPERS
   ============================================================================= */

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

/* =============================================================================
   3. SAFE AREA UTILITIES
   ============================================================================= */

.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* =============================================================================
   4. OVERSCROLL CONTAINMENT (prevents background scroll on modals/sheets)
   ============================================================================= */

.overscroll-contain {
  overscroll-behavior: contain;
}

/* =============================================================================
   5. BOTTOM SHEET BASE (reusable pattern)
   ============================================================================= */

.bottom-sheet__drag-handle {
  display: none;
}

@media (max-width: 768px) {
  .bottom-sheet__drag-handle {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    cursor: grab;
    flex-shrink: 0;
  }

  .bottom-sheet__drag-handle:active {
    cursor: grabbing;
  }

  .bottom-sheet__drag-handle .drag-bar {
    width: 36px;
    height: 4px;
    background: var(--fg-faint, #ccc);
    border-radius: 2px;
    opacity: 0.5;
  }
}

/* =============================================================================
   6. MOBILE TOUCH TARGETS
   ============================================================================= */

@media (max-width: 768px) {
  /* Ensure all interactive elements meet 44px minimum */
  .touch-target {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }

  /* Prevent horizontal overflow on mobile */
  html, body {
    overflow-x: hidden;
  }

  /* Improve tap highlight */
  a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }

  /* Full-width buttons helper */
  .mobile-full-width {
    width: 100% !important;
  }

  /* Stack flex items vertically */
  .mobile-stack {
    flex-direction: column !important;
  }

  /* Hide scrollbar on horizontal scrollable areas */
  .mobile-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-scroll-x::-webkit-scrollbar {
    display: none;
  }
}