/* MOE Beats AI Patch 8: Mobile + Performance Hardening */
:root {
  --moe-safe-bottom: env(safe-area-inset-bottom, 0px);
  --moe-safe-top: env(safe-area-inset-top, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden !important;
  touch-action: manipulation;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(212,175,55,.22);
}

button,
input[type="button"],
input[type="submit"],
a {
  touch-action: manipulation;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

img,
video,
canvas,
audio {
  max-width: 100%;
}

/* Better tap targets without redesign */
button,
input[type="button"],
input[type="submit"] {
  min-height: 42px;
}

/* Prevent fixed panels from sitting under mobile browser bars */
#mbcc-account-mini,
#moe-save-status-badge,
#moe-payment-toast,
#moe-cloud-save-toast,
#moe-mini-export-toast,
#moe-viral-share-panel,
#moe-creator-complete,
#moe-gen-lock-toast,
#moe-restore-banner {
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}

/* Phone layout safety */
@media (max-width: 760px) {
  body {
    padding-bottom: calc(18px + var(--moe-safe-bottom));
  }

  #mbcc-account-mini {
    top: calc(10px + var(--moe-safe-top)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
  }

  #moe-save-status-badge {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + var(--moe-safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  #moe-viral-share-panel {
    top: calc(70px + var(--moe-safe-top)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - 92px - var(--moe-safe-top) - var(--moe-safe-bottom)) !important;
    overflow-y: auto !important;
  }

  #moe-creator-card {
    width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 54px) !important;
    overflow: hidden !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* Performance mode trims heavy effects */
.moe-low-power-mode * {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

.moe-low-power-mode #moe-creator-energy-overlay,
.moe-low-power-mode #moe-viral-share-panel {
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}