/* ---- Status bar on mobile ---------------------------------------------
   `MobileStatusBar` replaces the desktop `StatusBar` under `layout=
   "mobile"` (see ReactDocxEditor.tsx) — own markup/class rather than a
   restyle of `.docx-editor-status-bar`, since it also hosts the zoom
   control (moved down from the tabs row, see MobileToolbar.tsx's header
   comment and styles/mobile/zoom.css), which desktop's bar never had.
   Padding includes `env(safe-area-inset-bottom)` so it doesn't run
   straight into the home-indicator/gesture area the way a flush edge-to-
   edge bar would. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  background: var(--de-surface);
  border-top: 1px solid var(--de-toolbar-border);
  font-size: 12px;
  color: var(--de-text-muted);
  flex-shrink: 0;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-status-bar__stats {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}