/* ---- Comments toggle bubble on mobile --------------------------------
   `.docx-editor-comments-toggle` is portaled to `document.body` (see
   Comments/CommentsLayer.tsx), so it's not a descendant of
   `.docx-editor-react[data-de-layout="mobile"]` — the usual mobile-scoping
   selector can't reach it. `ReactDocxEditor` instead threads its `layout`
   prop down to a `data-mobile="true"` attribute set directly on the
   button (see CommentsToggleButton.tsx), which this partial targets.

   Desktop pins the bubble in the page's right margin gutter (`left:
   pageRect.right + 16`, set inline via JS) — there is no such gutter on a
   phone-width screen, so on mobile it's repositioned to a fixed thumb-zone
   spot (bottom-right, clear of the toolbar and the on-screen keyboard)
   instead. `!important` is required to win over the inline `left`/`top`
   JS keeps setting for the desktop-only positioning logic.

   `bottom` clears `MobileStatusBar` (~37px tall, see mobile/status-bar.css)
   plus its own safe-area padding — parking the bubble at a plain 14px from
   the true screen bottom would sit it right on top of the status bar's
   zoom chip instead of above the bar entirely. */
.docx-editor-comments-toggle[data-mobile="true"] {
  left: auto !important;
  top: auto !important;
  right: calc(14px + env(safe-area-inset-right)) !important;
  bottom: calc(50px + env(safe-area-inset-bottom)) !important;
  width: 44px;
  height: 44px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}