/* Platform-aware mobile contract. Brand remains Ensutex; interaction adapts to iOS/Android. */
:root {
  --ens-touch-target: 44px;
  --ens-mobile-edge: max(12px, env(safe-area-inset-left));
}

html[data-mobile-platform="android"] {
  --ens-touch-target: 48px;
}

@media (pointer: coarse), (max-width: 767px) {
  html {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(4.75rem + env(safe-area-inset-top));
  }

  body {
    max-width: 100%;
  }

  html[data-mobile-platform].ens-touch-device body button,
  html[data-mobile-platform].ens-touch-device body [role="button"],
  html[data-mobile-platform].ens-touch-device body input[type="button"],
  html[data-mobile-platform].ens-touch-device body input[type="submit"],
  html[data-mobile-platform].ens-touch-device body input[type="reset"],
  html[data-mobile-platform].ens-touch-device body summary,
  html[data-mobile-platform].ens-touch-device body select,
  html[data-mobile-platform].ens-touch-device body #mobileDrawer a,
  html[data-mobile-platform].ens-touch-device body #sticky-cta-mobile a,
  html[data-mobile-platform].ens-touch-device body .ens-chat-option,
  html[data-mobile-platform].ens-touch-device body .chat-chip,
  html[data-mobile-platform].ens-touch-device body .chatbot-panel-close,
  html[data-mobile-platform].ens-touch-device body .ens-chat-close {
    min-block-size: var(--ens-touch-target) !important;
    min-inline-size: var(--ens-touch-target) !important;
    touch-action: manipulation;
  }

  html[data-mobile-platform].ens-touch-device body input:not([type="checkbox"]):not([type="radio"]),
  html[data-mobile-platform].ens-touch-device body select,
  html[data-mobile-platform].ens-touch-device body textarea {
    font-size: max(16px, 1em) !important;
  }

  html[data-mobile-platform].ens-touch-device body :is(#mobileMenuBtn, #chatbot-trigger, #chatbot-panel button, #sticky-cta-mobile a) {
    min-block-size: var(--ens-touch-target) !important;
    min-inline-size: var(--ens-touch-target) !important;
  }

  .floating-widgets {
    right: max(12px, env(safe-area-inset-right)) !important;
  }

  #chatbot-panel,
  #chatbot-panel.ens-chat-panel {
    max-height: calc(var(--ens-visual-viewport-height, 100dvh) - 6.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  html[data-mobile-platform].ens-touch-device body #chatbot-panel.ens-chat-panel {
    transform: translateY(12px) !important;
    transition: opacity 190ms ease, visibility 0s linear 190ms !important;
  }

  html[data-mobile-platform].ens-touch-device body #chatbot-panel.ens-chat-panel.is-open {
    transform: none !important;
    transition-delay: 0s !important;
  }

  html.ens-keyboard-open #chatbot-panel,
  html.ens-keyboard-open #chatbot-panel.ens-chat-panel {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    height: calc(var(--ens-visual-viewport-height, 100dvh) - 16px) !important;
    max-height: calc(var(--ens-visual-viewport-height, 100dvh) - 16px) !important;
  }

  html.ens-keyboard-open #sticky-cta-mobile,
  html.ens-keyboard-open .chatbot-cta-fixed {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  video,
  img,
  picture,
  canvas,
  svg {
    max-inline-size: 100%;
  }

  :focus-visible {
    outline: 3px solid #87ceeb;
    outline-offset: 3px;
  }
}

@media (max-width: 767px) {
  [class*="min-h-screen"],
  [class*="h-screen"] {
    min-height: 100svh;
  }

  .fixed.bottom-0,
  [data-mobile-bottom-bar] {
    padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  }
}

html[data-mobile-platform="ios"] {
  -webkit-tap-highlight-color: transparent;
}

html[data-mobile-platform="ios"] button:active,
html[data-mobile-platform="ios"] [role="button"]:active,
html[data-mobile-platform="ios"] a[class*="button"]:active,
html[data-mobile-platform="ios"] a[class*="cta"]:active {
  opacity: .78;
}

html[data-mobile-platform="android"] button:active,
html[data-mobile-platform="android"] [role="button"]:active,
html[data-mobile-platform="android"] a[class*="button"]:active,
html[data-mobile-platform="android"] a[class*="cta"]:active {
  filter: brightness(1.14);
  box-shadow: 0 0 0 4px rgba(135, 206, 235, .18);
}

@media (prefers-reduced-motion: reduce) {
  html[data-mobile-platform] *,
  html[data-mobile-platform] *::before,
  html[data-mobile-platform] *::after {
    scroll-behavior: auto !important;
  }
}