/* Nia — mobile polish layer.
 *
 * Loaded by Nia.html AFTER brand.css and by the public login pages. The
 * drawer + bottom-nav shell already lives inside Nia.html (see the
 * "MOBILE SHELL" block near the end of that file); this file is the part that
 * makes it feel like an app rather than a website that fits on a phone:
 *
 *   - viewport height that tracks the browser toolbars (dvh, not vh)
 *   - safe-area insets for the notch / home indicator, which only exist once
 *     the viewport meta says viewport-fit=cover (it did not, so every env()
 *     in the shell resolved to 0px on an iPhone)
 *   - inputs at 16px so iOS Safari stops zooming the page on focus
 *   - 44px touch targets, no tap flash, no double-tap-to-zoom delay
 *   - no rubber-band / pull-to-refresh once installed (it navigated away)
 *   - phone modals as bottom sheets
 *   - the install banner and the native-wrapper (Capacitor) adjustments
 *
 * Everything is scoped to the same 760px breakpoint the shell uses, or to
 * body.nia-standalone (installed PWA) / body.nia-native (iOS/Android app),
 * so the desktop layout is untouched. Kept out of Nia.html so it can be
 * served to the login page and iterated without touching a 5 MB file.
 */

/* ── Viewport height: 100vh is the LARGEST viewport on mobile Safari/Chrome,
      so anything sized to it hides its bottom edge behind the URL bar.
      dvh tracks the toolbars. --nia-vh is set by mobile.js for browsers
      without dvh (iOS < 15.4). ─────────────────────────────────────────── */
:root { --nia-vh: 100vh; --nia-bn-h: 54px; }
@supports (height: 100dvh) { :root { --nia-vh: 100dvh; } }

@media (max-width: 760px) {
  html, body { height: var(--nia-vh); }
  #shell { height: calc(var(--nia-vh) - var(--nia-bn-h) - env(safe-area-inset-bottom, 0px)); }
  #sidebar { height: var(--nia-vh); }

  /* ── Safe areas. The topbar sits under the status bar when the page is
        installed (black-translucent) or wrapped natively. ─────────────── */
  #topbar { padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: 50px; }
  #sidebar .sb-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  #sidebar { padding-left: env(safe-area-inset-left, 0px); }

  /* ── Touch ergonomics ───────────────────────────────────────────────── */
  * { -webkit-tap-highlight-color: transparent; }
  a, button, [role="button"], .nav-item, .nav-sub-item, .sb-mode-tab, .tk-space-item,
  .chat-ch-item, .kb2-card, .nia-bn-item { touch-action: manipulation; }
  .nav-item, .nav-sub-item { min-height: 44px; }
  .sb-mode-tab { min-height: 40px; }
  #topbar button, #topbar a, #topbar .tb-right > * { min-height: 36px; }
  .nia-bn-item { min-height: var(--nia-bn-h); }

  /* iOS Safari zooms the whole page when a focused control is under 16px.
     The app's controls are 12–13px on desktop; on a phone 16px is the right
     size anyway. Checkboxes/radios/ranges are excluded — they have no text. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }
  .login-input { font-size: 16px; }

  /* Scroll containers scroll on their own and do not hand the gesture to the
     page (which would bounce the shell or trigger pull-to-refresh). */
  .sb-nav, .mod-view, #view-home, .chat-messages, .kb2-wrap, .kb2-col, .nia-modal-panel,
  .ds-main, .tk-list, [style*="overflow-y:auto"], [style*="overflow:auto"] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Wide tables scroll inside their module instead of widening the page. */
  .mod-view table, #view-home table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Phone modals become bottom sheets ───────────────────────────────── */
  .nia-modal { align-items: flex-end !important; padding: 0 !important; }
  .nia-modal-panel {
    width: 100% !important; max-width: 100% !important;
    max-height: calc(var(--nia-vh) - env(safe-area-inset-top, 0px) - 24px) !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    animation: niaSheetUp .22s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes niaSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ── The bottom nav respects the home indicator and gets out of the way of
        the keyboard (mobile.js toggles nia-kb-open from visualViewport). ── */
  #nia-bottomnav { transition: transform .18s ease; }
  body.nia-kb-open #nia-bottomnav { transform: translateY(110%); }
  body.nia-kb-open #shell { height: var(--nia-vh); }

  /* Drawer close affordance: the backdrop is the target, make it obvious. */
  body.nia-drawer-open #main { pointer-events: none; }
}

/* ── Installed (PWA) or wrapped (native): the page IS the app ─────────── */
body.nia-standalone, body.nia-native {
  overscroll-behavior-y: none;          /* no pull-to-refresh, no bounce that shows the void */
  -webkit-user-select: none; user-select: none;   /* long-press does not select chrome */
  -webkit-touch-callout: none;
}
body.nia-standalone input, body.nia-standalone textarea, body.nia-standalone [contenteditable],
body.nia-native input, body.nia-native textarea, body.nia-native [contenteditable],
body.nia-standalone .chat-messages, body.nia-native .chat-messages,
body.nia-standalone .em-body, body.nia-native .em-body {
  -webkit-user-select: text; user-select: text;   /* …but content still copies */
}
/* Web Push does not exist inside a WKWebView / Android WebView, so the
   "Enable browser notifications" control would only ever fail there. */
body.nia-native [onclick^="niaPushEnable"], body.nia-native [onclick^="niaPushRecheck"] { display: none !important; }
/* Android status bar is opaque (see mobile/capacitor.config.json), so the
   top inset must not be applied twice. */
body.nia-native[data-platform="android"] #topbar { padding-top: 0; }
body.nia-native[data-platform="android"] #sidebar .sb-header { padding-top: 14px; }

/* ── Install banner (mobile web only; mobile.js decides when to show it) ── */
#nia-install-banner {
  position: fixed; left: 10px; right: 10px; z-index: 1300;
  bottom: calc(var(--nia-bn-h) + env(safe-area-inset-bottom, 0px) + 10px);
  display: none; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--text, #0B0B0F); color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  font-size: 13px; line-height: 1.4;
}
#nia-install-banner.show { display: flex; animation: niaSheetUp .25s ease; }
#nia-install-banner img { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: #fff; }
#nia-install-banner .nib-text { flex: 1; min-width: 0; }
#nia-install-banner .nib-text b { display: block; font-size: 13.5px; }
#nia-install-banner .nib-text span { opacity: .78; font-size: 12px; }
#nia-install-banner button { border: none; font-family: inherit; font-weight: 700; font-size: 12.5px; border-radius: 9px; padding: 8px 12px; cursor: pointer; min-height: 36px; }
#nia-install-banner .nib-go { background: #fff; color: #0B0B0F; }
#nia-install-banner .nib-x { background: transparent; color: #fff; opacity: .7; padding: 8px; }
@media (min-width: 761px) { #nia-install-banner { display: none !important; } }

/* ── Public login pages ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
  body.nia-login { height: auto; min-height: var(--nia-vh); overflow: auto; align-items: flex-start;
         padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  body.nia-login .login-box { width: 100%; max-width: 380px; margin: 0 auto; padding: 28px 22px; box-shadow: none; }
  body.nia-login .login-input { padding: 12px 14px; min-height: 48px; }
  body.nia-login .btn-login { padding: 13px; font-size: 15px; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .nia-modal-panel, #nia-install-banner.show, #nia-bottomnav { animation: none !important; transition: none !important; }
}