/* ── NATIVE / MOBILE OVERRIDES ────────────────────────────────────
   Applied only when the Capacitor bridge sets body.is-native. Web
   browsing on a phone (no Capacitor) keeps the responsive.css rules.

   The split exists because the Android shell needs a different set of
   trade-offs than mobile-web: native gets bigger tap targets, a real
   safe-area inset for the system status bar, and aggressive hover
   suppression (which would otherwise stay sticky on touch).
*/

body.is-native {
  /* Honor the Android status-bar / display-cutout area so headers
     don't slip under the system UI. viewport-fit=cover in the meta
     tag is the matched pair. */
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  /* Disable browser-only behaviors that feel wrong in a native shell. */
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Inputs and content-editable regions need to remain selectable for
   text editing — undo the blanket user-select disable above. */
body.is-native input,
body.is-native textarea,
body.is-native select,
body.is-native [contenteditable],
body.is-native .ProseMirror,
body.is-native .lex-chat-msg-body,
body.is-native .rev-inbox-body {
  -webkit-user-select: text;
  user-select: text;
}

/* Touch targets — Material guideline is 48px min. Most buttons in the
   web app are smaller because they're designed for cursors. Stretch
   on native only. */
body.is-native .btn,
body.is-native .tb-btn,
body.is-native .nav-item {
  min-height: 44px;
}

/* Hover states get stuck on touch. Wipe them on native; rely on
   :active for press feedback. */
body.is-native *:hover {
  background: inherit !important;
}
body.is-native .btn:active,
body.is-native .nav-item:active {
  filter: brightness(0.92);
}

/* The mic button is the flagship phone interaction — sit it large and
   thumb-reachable. The web version is also tap-friendly, this just
   nudges it up to "obvious" on a small screen. */
body.is-native #mic-btn {
  min-width: 88px;
  min-height: 88px;
}

/* Topbar shrinks on native so it doesn't eat half the viewport. */
body.is-native .topbar {
  min-height: 44px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* Hide the cross-platform-only chrome that doesn't apply in the app.
   `data-web-only` is a marker — add it in HTML when the element is
   useless inside the native shell (e.g., "Install our app" prompts). */
body.is-native [data-web-only] {
  display: none !important;
}

/* ── DESKTOP-CHROME SUPPRESSION ────────────────────────────────────
   Bits that only make sense on a cursor + keyboard. Hidden inside the
   native shell so the UI doesn't whisper instructions the user can't
   act on. */
body.is-native .topbar-search-btn,
body.is-native .home-actions .btn[title*="⌘"],  /* "⌘" anywhere in title */
body.is-native .home-actions .btn[title*="Cmd+"],
body.is-native [data-shortcut-hint] {
  display: none !important;
}
/* The topbar wordmark also doubles as a back-to-home button — fine on
   web, redundant when the bottom nav has a dedicated Home tab. Keep
   the title visible, drop the button affordance so it stops competing. */
body.is-native .topbar-wordmark {
  pointer-events: none;
}
body.is-native .topbar-wordmark-dot { display: none; }

/* ── MOBILE BOTTOM NAV ─────────────────────────────────────────────
   Five-column grid pinned to the bottom. The middle slot is raised
   into a primary action bubble; the other four are flat icon+label
   tabs. Honor safe-area-inset-bottom so it floats above Android's
   gesture pill / iOS home indicator. */
.mobile-bottom-nav { display: none; }
body.is-native .mobile-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* paint behind the dynamic safe-area inset so the bar's bg colour
     extends edge-to-edge under gesture overlays */
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper, #fbf8f0);
  border-top: 1px solid var(--border, #d8d3c5);
  z-index: 1000;
  box-shadow: 0 -2px 12px rgba(15, 15, 13, 0.04);
}
body.is-native .mbn-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 56px;
  padding: 6px 4px 4px;
  background: none;
  border: none;
  color: var(--ink-4, #7a7264);
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
body.is-native .mbn-tab > svg {
  width: 22px;
  height: 22px;
}
body.is-native .mbn-tab.is-active {
  color: var(--gold, #C9A84C);
}
body.is-native .mbn-tab:active {
  background: var(--surface, rgba(0, 0, 0, 0.04));
}
body.is-native .mbn-label {
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Center primary-action bubble. Raised above the bar with negative
   margin so it reads as the "main" CTA. Subtle shadow lifts it off
   the bar; gold matches Lex's brand accent. */
body.is-native .mbn-tab-center {
  position: relative;
  padding-top: 0;
}
body.is-native .mbn-tab-center .mbn-center-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -18px;
  margin-bottom: 2px;
  background: var(--gold, #C9A84C);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.45),
              0 0 0 4px var(--paper, #fbf8f0);
}
body.is-native .mbn-tab-center .mbn-center-bubble > svg {
  width: 22px;
  height: 22px;
}

/* Push page content above the nav so nothing gets clipped. Apply on
   main shell + home screen + every editor full-screen surface. */
body.is-native main.main,
body.is-native #home-screen,
body.is-native #document-editor-view,
body.is-native #print-preview-container {
  padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}

/* ── FULL-SCREEN LEX PANEL ─────────────────────────────────────────
   On web, Lex is a half-sheet at the bottom. That position now belongs
   to the bottom nav; in the app the panel takes the full viewport
   instead. The existing #lex-panel inside the editor (the chat /
   proofread / comments tabs) keeps its in-editor layout — the override
   below targets the floating widget panel via #lex-widget. */
body.is-native #lex-widget .lex-panel {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 1100;  /* above the bottom nav so it covers cleanly */
}