/* ---- Zoom control (mobile) -------------------------------------------
   Lives in the status bar now (see MobileStatusBar.tsx), not the section-
   tabs row — that row used to carry a "50%" chip alongside Home/Insert,
   which meant a formatting-section switcher and an unrelated zoom control
   fighting for the same strip of space. The status bar already has spare
   room next to the word/page count, and pairing "how big is the page" with
   "how long is the page" reads as one coherent status line instead of two.

   A single small chip (see MobileZoomControl.tsx) instead of desktop's
   +/- buttons flanking a `<select>` — those are sized for a mouse, not a
   thumb. Tapping the chip opens a popover with one big slider. The panel
   opens *upward* (`bottom: calc(100% + 6px)`, not `top`) because its
   trigger now sits at the bottom of the screen — anchoring below the
   trigger the way a top-of-screen control would push the panel off the
   bottom edge (or under the on-screen keyboard). */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom {
  position: relative;
  flex-shrink: 0;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__trigger {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--de-toolbar-border);
  border-radius: 999px;
  background: var(--de-surface);
  color: var(--de-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__trigger:active {
  background: var(--de-surface-hover);
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__trigger svg {
  color: var(--de-text-muted);
}

/* Anchored above the trigger via plain absolute positioning (not a
   portal — see MobileZoomControl.tsx's header comment for why), so it
   stays inside the mobile-scoped subtree and inherits `--de-*` tokens
   the same way every other mobile control does. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 272px;
  padding: 14px 16px 12px;
  background: var(--de-surface);
  border: 1px solid var(--de-toolbar-border);
  border-radius: 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  /* Above the comments toggle bubble (z-index 9998, portaled to
     document.body — see mobile/comments.css) — that bubble sits in the
     same bottom-right corner this panel opens into, so without this the
     bubble would poke through the panel's last preset row. */
  z-index: 9999;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__step {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--de-toolbar-border);
  border-radius: 8px;
  background: var(--de-surface);
  color: var(--de-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__step:disabled {
  opacity: 0.4;
  cursor: default;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  accent-color: var(--de-toolbar-button-bg-active);
}

/* Seven presets (25-200%) no longer fit a single row at a thumb-friendly
   size, so the row wraps instead of squeezing each chip down to
   illegible width. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__preset {
  flex: 1 1 auto;
  min-width: 54px;
  border: none;
  background: var(--de-surface-hover);
  color: var(--de-text-muted);
  border-radius: 6px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-zoom__preset[data-active="true"] {
  background: var(--de-toolbar-button-bg-active);
  color: var(--de-toolbar-button-fg-active);
}