/* ============================================================================
   APP-MODE-V1 (2026-08-27) — native-feel layer for embedded/app contexts.
   EVERY rule is scoped under html.hkpl-appmode, which is stamped ONLY inside a
   WeChat mini-program web-view, a Capacitor native shell, or an installed PWA.
   A normal web/desktop/mobile-browser visitor never gets that class, so this
   whole file is INERT for them — the page renders byte-for-byte as before.
   Every safe-area inset uses env(..., 0px): it resolves to 0 (no change) on any
   device without a notch/home-indicator, and to the real inset where there is one.
   ============================================================================ */

/* --- Scroll feel: kill the browser rubber-band + pull-to-refresh (the #1 "this
   is a web page" tell). Set on both html and body (engines differ). ----------- */
html.hkpl-appmode,
html.hkpl-appmode body{
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.hkpl-appmode body{
  -webkit-tap-highlight-color: transparent;
}

/* --- iOS input-zoom guard: iOS zooms the whole page when a focused field renders
   under 16px. Only on touch pointers, so desktop web (even in an installed PWA on
   a laptop) is untouched. --------------------------------------------------- */
@media (pointer: coarse){
  html.hkpl-appmode input,
  html.hkpl-appmode select,
  html.hkpl-appmode textarea{
    font-size: 16px;
  }
}

/* --- Tappables: remove the 300ms double-tap-zoom delay and the long-press
   "Open/Copy/Save image" callout on controls. ------------------------------- */
html.hkpl-appmode button,
html.hkpl-appmode a,
html.hkpl-appmode [role="button"],
html.hkpl-appmode label,
html.hkpl-appmode summary{
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* --- No accidental text-selection or image-drag on the app chrome (nav, header,
   tab bar, buttons). Real body content stays selectable. -------------------- */
html.hkpl-appmode #hkpl-sh,
html.hkpl-appmode #hkpl-sf,
html.hkpl-appmode #hkpl-tabbar,
html.hkpl-appmode #hkpl-mobile,
html.hkpl-appmode nav,
html.hkpl-appmode button{
  -webkit-user-select: none;
  user-select: none;
}
html.hkpl-appmode #hkpl-sh img,
html.hkpl-appmode #hkpl-tabbar img,
html.hkpl-appmode nav img{
  -webkit-user-drag: none;
  user-drag: none;
}

/* --- Sticky :hover cure: on a touch device a tapped element keeps its hover
   style until you tap elsewhere. Give tapped controls a real press state
   instead. (We can't un-declare existing :hover rules from here — that's a
   separate pass on the base CSS — but this makes taps feel intentional.) ---- */
@media (pointer: coarse){
  html.hkpl-appmode a:active,
  html.hkpl-appmode button:active,
  html.hkpl-appmode [role="button"]:active{
    opacity: .72;
    transition: opacity .04s ease-out;
  }
}

/* --- Safe areas: the notch / status bar / home-indicator. Only the BOTTOM bar
   was handled before (mobile-tabbar.js); this adds the TOP (fixed header) and the
   left/right cutouts for landscape. env(...,0px) => +0 on any non-notched device,
   so this is a no-op except where there's actually a cutout to clear. -------- */
html.hkpl-appmode #hkpl-sh{
  padding-top: env(safe-area-inset-top, 0px);
}
html.hkpl-appmode{
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* --- WeChat mini-program draws its OWN top navigation bar that cannot be hidden.
   Our in-page top header would double it up, so drop our header's own top inset
   there (WeChat already reserves the status-bar space above its bar). -------- */
html.hkpl-wx-miniapp #hkpl-sh{
  padding-top: 0;
}
/* --- Voice recording needs getUserMedia + MediaRecorder, which the WeChat mini-program
   web-view does NOT provide (and neither do insecure contexts). app-mode.js stamps
   html.hkpl-no-voice in those cases; hide the record controls so there is no dead button
   (typing still works — the composer just loses the mic). ------------------------------ */
html.hkpl-no-voice #voice-btn,
html.hkpl-no-voice [data-hkpl-voice],
html.hkpl-no-voice .hkpl-voice-ctl{
  display: none !important;
}