/* ─── KALEO: WHO AM I? ──────────────────────────────────────────────────────
   native.css — iOS and Android specific overrides
   ─────────────────────────────────────────────────────────────────────────── */

/* Remove tap highlight on all tappable elements */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Allow text selection only in input fields */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* iOS safe area — notch and home indicator */
#app {
  padding-top: env(safe-area-inset-top);
}

#bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
  height: calc(60px + env(safe-area-inset-bottom));
}

.screen {
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 1.25rem);
  /* Prevent scroll bounce from showing white below nav */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen.no-nav {
  padding-bottom: max(env(safe-area-inset-bottom), 1.5rem);
}

/* Smooth native-feeling scroll */
html, body {
  overflow: hidden;
  height: 100%;
  position: fixed;
  width: 100%;
}

#app {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
}

#main-content {
  overflow-y: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Prevent rubber-band scroll showing background */
body { background: #78141E; }
#app { background: var(--bg-0); }

/* Native font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Larger touch targets on mobile */
.btn { min-height: 50px; }
.likert-opt { min-height: 48px; }
.nav-item { min-height: 44px; min-width: 44px; }
.back-btn { min-height: 44px; }
.mode-chip { min-height: 32px; }

/* Input fields — native keyboard appearance */
input {
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  border-radius: var(--radius-md);
}

/* Android ripple effect simulation */
.btn, .likert-opt, .nav-item, .card[onclick], .hist-card {
  position: relative;
  overflow: hidden;
}

/* iOS momentum scrolling on scroll containers */
.mode-chips, .pair-select {
  -webkit-overflow-scrolling: touch;
}

/* Keyboard pushes content up — prevent layout jump */
@supports (height: 100dvh) {
  #app { height: 100dvh; }
}

/* Status bar spacer for iOS (when not using Capacitor status bar plugin) */
.status-bar-spacer {
  height: env(safe-area-inset-top);
  background: #78141E;
  width: 100%;
  flex-shrink: 0;
}

/* Android-specific overrides */
@media (not (display-mode: standalone)) {
  /* Browser view — slightly different padding */
}

/* PWA standalone mode (added to home screen) */
@media (display-mode: standalone) {
  #app { padding-top: 0; }
}

/* Disable text cursor on non-input elements */
button, div, span, p { cursor: default; }
input, textarea { cursor: text; }
[onclick], .btn, .nav-item, .likert-opt, .mode-chip, .hist-card, .card[onclick] { cursor: pointer; }

/* Native-feeling transitions between screens */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.screen.active { animation: slideInUp 0.22s ease-out; }
.screen.active.modal { animation: slideInRight 0.25s ease-out; }

/* Dark mode native status bar area */
@media (prefers-color-scheme: dark) {
  body { background: #085041; }
}