/* Mobile layout refinements for the compiled Chemielabor application. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

button,
a,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

@media (max-width: 767px) {
  .h-screen {
    height: 100vh;
    height: 100dvh;
  }

  .min-h-screen {
    min-height: 100vh;
    min-height: 100dvh;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button {
    min-height: 44px;
  }

  /* Landing page: prevent long content from being clipped on short screens. */
  .min-h-screen.bg-background.relative.overflow-hidden {
    overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(6rem, env(safe-area-inset-bottom));
  }

  .z-10.text-center.max-w-5xl.space-y-8 {
    justify-content: flex-start;
    padding-top: 1rem;
  }

  .font-display.font-black.text-5xl {
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 1.02;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    width: 100%;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a > div {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .absolute.bottom-6.left-1\/2 {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Mobile app chrome and safe areas. */
  .flex.lg\:hidden.items-center.px-4.h-14 {
    min-height: calc(3.5rem + env(safe-area-inset-top));
    height: auto;
    padding-top: env(safe-area-inset-top);
  }

  .flex-1.relative.z-0.overflow-hidden.flex.flex-col.min-h-0 {
    min-width: 0;
  }

  .flex.items-center.gap-3.px-5.py-2\.5.bg-amber-500\/15 {
    padding-inline: 0.75rem;
  }

  /* Explanation panel becomes a thumb-friendly bottom sheet. */
  .fixed.top-6.right-6.bottom-6.w-\[420px\] {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 86vh;
    max-height: 86dvh;
    border-radius: 1.25rem 1.25rem 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .fixed.top-6.right-6.bottom-6.w-\[420px\] > .p-6 {
    padding: 1rem;
  }

  /* Lab report stays readable and scrollable on narrow phones. */
  .fixed.inset-x-4.top-6.bottom-6 {
    inset: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));
  }

  .px-10.py-8.text-gray-800 {
    padding: 1.25rem 1rem;
  }

  .px-10.py-8.text-gray-800 .text-3xl {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .px-10.py-8.text-gray-800 .grid {
    gap: 1rem;
  }

  .px-10.py-8.text-gray-800 .columns-2 {
    columns: 1;
  }

  .px-10.py-8.text-gray-800 table {
    min-width: 34rem;
  }

  .px-10.py-8.text-gray-800 .overflow-hidden.rounded-lg.border {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .flex.gap-20 {
    gap: 2rem;
  }

  /* Shared laboratory canvas: compact header and allow vertical scrolling. */
  .flex-1.flex.flex-col.p-4.relative.overflow-hidden,
  .flex-1.flex.flex-col.p-5.overflow-auto {
    padding: 0.75rem;
  }

  .absolute.top-4.left-6.right-6.flex.items-center.gap-4 {
    position: static;
    min-height: 44px;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
  }

  .absolute.top-4.left-6.right-6 .font-display.text-2xl,
  .font-display.text-2xl.font-bold.text-white.tracking-wider {
    font-size: 1.15rem;
    line-height: 1.2;
  }

  .flex-1.relative.w-full.mt-16 {
    margin-top: 0.25rem;
    min-height: 31rem;
  }

  /* Anion lab: tools become a horizontal tray above the experiment. */
  .flex.gap-6.mt-14.flex-1.overflow-hidden {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .w-52.shrink-0.flex.flex-col {
    width: 100%;
  }

  .w-52.shrink-0.flex.flex-col > .flex.flex-col.gap-2.overflow-y-auto {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .w-52.shrink-0.flex.flex-col > .flex.flex-col.gap-2.overflow-y-auto > * {
    min-width: 10rem;
    scroll-snap-align: start;
  }

  .flex-1.flex.flex-col.items-center.justify-center.gap-0,
  .flex-1.flex.flex-col.items-center.justify-center.gap-2 {
    flex: none;
    width: 100%;
  }

  /* Fixed-width apparatus scale down to the available viewport. */
  .w-\[380px\],
  .w-\[360px\] {
    width: min(100%, calc(100vw - 1.5rem));
  }

  .w-\[380px\].px-3,
  .w-\[360px\].px-3 {
    padding-inline: 0.35rem;
  }

  .w-\[380px\] .grid.grid-cols-3,
  .w-\[360px\] .grid.grid-cols-3 {
    gap: 0.45rem;
  }

  .mt-4.w-full.flex.items-end.gap-4.justify-center {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .flex.flex-col.gap-2.ml-4.mb-5 {
    margin-left: 0;
  }

  .flex.gap-6.mt-14.flex-1.items-center {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 0.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .flex.gap-6.mt-14.flex-1.items-center > * {
    flex-shrink: 0;
  }

  /* Result and quiz screens fit without horizontal clipping. */
  .flex-1.flex.flex-col.items-center.justify-center.p-8.text-center {
    justify-content: flex-start;
    overflow-y: auto;
    padding: 1.5rem 1rem;
  }

  .text-7xl {
    font-size: 4rem;
  }

  .font-display.text-3xl {
    font-size: 1.75rem;
  }

  .glass-panel.rounded-2xl.p-6.max-w-sm {
    padding: 1rem;
  }

  .glass-panel.rounded-2xl.p-6.max-w-md {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1rem;
  }
}