/* WeChat H5 runtime hardening: safe-area layout, internal scroll, and media interaction. */

:root {
  --sx-wechat-edge-x: 14px;
}

html,
body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.sx-kream-mobile,
body.hanari-live-mode {
  overflow: hidden;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

body.sx-kream-mobile #hanariLiveApp,
body.sx-kream-mobile .live-shell,
body.sx-kream-mobile .live-main,
body.hanari-live-mode #hanariLiveApp,
body.hanari-live-mode .live-shell,
body.hanari-live-mode .live-main {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
}

body.sx-kream-mobile .live-main,
body.hanari-live-mode .live-main {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body.sx-kream-mobile img,
body.sx-kream-mobile picture,
body.sx-kream-mobile video,
body.sx-kream-mobile canvas,
body.sx-kream-mobile svg,
body.hanari-live-mode img,
body.hanari-live-mode picture,
body.hanari-live-mode video,
body.hanari-live-mode canvas,
body.hanari-live-mode svg {
  max-width: 100%;
  -webkit-user-drag: none;
  user-drag: none;
}

body.sx-kream-mobile .product-card img,
body.sx-kream-mobile .product-card picture,
body.sx-kream-mobile .live-product-card img,
body.sx-kream-mobile .live-product-card picture,
body.sx-kream-mobile [class*="product"] img,
body.sx-kream-mobile [class*="Product"] img,
body.hanari-live-mode .product-card img,
body.hanari-live-mode .product-card picture,
body.hanari-live-mode .live-product-card img,
body.hanari-live-mode .live-product-card picture,
body.hanari-live-mode [class*="product"] img,
body.hanari-live-mode [class*="Product"] img {
  -webkit-touch-callout: none;
  user-select: none;
  object-fit: cover;
  image-rendering: auto;
}

body.sx-kream-mobile input,
body.sx-kream-mobile textarea,
body.sx-kream-mobile [contenteditable="true"],
body.hanari-live-mode input,
body.hanari-live-mode textarea,
body.hanari-live-mode [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  font-size: max(16px, 1em);
}

@media (max-width: 767px) {
  body.sx-kream-mobile [class*="tabbar"],
  body.sx-kream-mobile [class*="Tabbar"],
  body.sx-kream-mobile [class*="tab-bar"],
  body.sx-kream-mobile [class*="bottom-nav"],
  body.sx-kream-mobile [class*="BottomNav"],
  body.sx-kream-mobile [role="tablist"],
  body.hanari-live-mode [class*="tabbar"],
  body.hanari-live-mode [class*="Tabbar"],
  body.hanari-live-mode [class*="tab-bar"],
  body.hanari-live-mode [class*="bottom-nav"],
  body.hanari-live-mode [class*="BottomNav"],
  body.hanari-live-mode [role="tablist"] {
    left: max(var(--sx-wechat-edge-x), env(safe-area-inset-left)) !important;
    right: max(var(--sx-wechat-edge-x), env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    box-sizing: border-box;
  }

  body.sx-kream-mobile .live-main,
  body.hanari-live-mode .live-main {
    padding-bottom: max(96px, calc(84px + env(safe-area-inset-bottom))) !important;
  }
}