/* YoursTruly.ai World Mini App - Mobile-specific CSS */

/* Mobile Safari-specific fixes */
html.world-app-container {
  /* Prevent "bounce" scroll effect on iOS */
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body.world-app-body {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Optimize touch targets for mobile */
button, 
.btn,
a.tab,
input[type="checkbox"],
input[type="radio"],
select {
  min-height: 32px;
  min-width: 32px;
}

/* Fix input zoom issues on iOS */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-size: 16px; /* Prevents zoom on iOS */
}

/* Media queries for different device sizes */
@media (max-width: 360px) {
  /* Extra small devices */
  h1 {
    font-size: 1.6rem;
  }
  
  .container {
    padding: 12px;
  }
}

@media (min-width: 361px) and (max-width: 480px) {
  /* Small devices */
  .container {
    padding: var(--container-padding);
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(var(--footer-height) + env(safe-area-inset-bottom, 0));
  }
  
  .container {
    padding-left: max(var(--container-padding), env(safe-area-inset-left, 0));
    padding-right: max(var(--container-padding), env(safe-area-inset-right, 0));
  }
}

/* Define active states for buttons and interactive elements */
.btn:active,
.tab:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Disable user-select on interface elements */
.bottom-nav,
.btn,
.tab {
  -webkit-user-select: none;
  user-select: none;
}

/* Hide address bar on mobile */
@media screen and (max-height: 450px) {
  .hero {
    padding-top: 0;
  }
}