/* ---- Mobile toolbar: tab bar + enlarged touch sizing ----------------
   All rules scoped under `.docx-editor-react[data-de-layout="mobile"]`
   (see layout.css's header comment for why). */

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--de-surface);
  border-bottom: 1px solid var(--de-toolbar-border);
  flex-shrink: 0;
  font-family: var(--de-font-family);
}

/* ---- Tabs row: the Home/Insert/Table/Image section switcher ---------
   The tabs row is the toolbar's "second line" of chrome. It used to also
   carry the zoom control, but that's moved to the status bar now (see
   MobileStatusBar.tsx) — this row has exactly one job, switching which
   tool group is shown below, so it isn't sharing space with an unrelated
   control. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 4px;
}

/* The switcher reads as an iOS-style **segmented control**: a soft gray
   track with the active section shown as a raised white pill. This is far
   friendlier than a flat text run — the active tab is unmistakable, the
   inactive ones still look tappable, and the whole control hugs its
   content on the left instead of spanning the row. It grows to hold the
   contextual Table/Image tabs and scrolls (capped at 100% width) when
   they don't fit, reusing the same edge-fade affordance as the tool row. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs-scroll-wrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
  width: fit-content;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--de-surface-hover);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  scroll-padding: 0 4px;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs::-webkit-scrollbar {
  display: none;
}

/* Each tab is a rounded pill; the active one lifts to white with the
   accent color + a soft shadow, the classic segmented-control treatment. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tab {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--de-text-muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tab__icon {
  display: inline-flex;
  opacity: 0.75;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tab[data-active="true"] {
  color: var(--de-toolbar-button-fg-active);
  background: var(--de-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
  font-weight: 600;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tab[data-active="true"] .docx-editor-mobile-toolbar-tab__icon {
  opacity: 1;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tab:not([data-active="true"]):active {
  color: var(--de-text);
  background: rgba(0, 0, 0, 0.04);
}

/* Edge hints for the segmented control: rounded to match the track, inset
   just inside it so they never white-out a whole pill — only shown on the
   side(s) that actually overflow (driven by `useScrollEdges`). */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs-scroll-hint {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 22px;
  pointer-events: none;
  border-radius: 999px;
  z-index: 1;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs-scroll-hint--left {
  left: 3px;
  background: linear-gradient(to right, var(--de-surface-hover) 30%, transparent);
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-tabs-scroll-hint--right {
  right: 3px;
  background: linear-gradient(to left, var(--de-surface-hover) 30%, transparent);
}

/* ---- Scroll wrap: hosts the tool row + the edge hints below ---------
   The tool row holds more groups than a phone width can show at once.
   Plain `overflow-x: auto` gives no visual cue that content continues
   off-screen, so users never discover Bold/Italic/lists past the fold —
   this wrapper positions the fade/chevron hints over the scrollable
   row's edges, driven by `MobileToolbar`'s scroll-position tracking. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-scroll-wrap {
  position: relative;
  min-width: 0;
  padding: 4px 8px 10px;
}

/* ---- Tool row: a rounded pill capsule floating on the toolbar row's
   background — same "pill" idea as the desktop toolbar, just a full
   capsule instead of an inner gray pill (matches the reference mobile
   layout: a white rounded strip holding flat icon buttons).
   `scroll-padding` keeps the first/last button clear of the edge fades so
   nothing ever gets whited-out at the ends. ------------------------- */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 10px;
  background: var(--de-surface);
  border: 1px solid var(--de-toolbar-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-wrap: nowrap;
  scroll-snap-type: x proximity;
  scroll-padding: 0 20px;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar::-webkit-scrollbar {
  display: none;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar[data-view-only="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-group {
  scroll-snap-align: start;
}

/* ---- Scroll hints: fade + chevron over whichever edge has more
   content to scroll to. Non-interactive (clicks pass through to the
   toolbar underneath); `MobileToolbar` only renders the side(s) that
   actually have more content, via its own scroll-position tracking. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-scroll-hint {
  position: absolute;
  top: 5px;
  bottom: 13px;
  width: 26px;
  pointer-events: none;
  z-index: 1;
}
/* Inset just inside the pill (scroll-wrap side padding 12px + 1px border)
   and rounded to hug the capsule end, so the fade sits over blank track,
   never over a whole button. A gentle 40% ramp is enough to say "more →"
   without hiding the icon underneath. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-scroll-hint--left {
  left: 9px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(to right, var(--de-surface) 40%, transparent);
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar-scroll-hint--right {
  right: 9px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(to left, var(--de-surface) 40%, transparent);
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-group {
  gap: 10px;
  padding: 0 6px;
}
/* Lighter, shorter divider than the desktop toolbar's — the mobile pill
   is a single continuous capsule, not a boxed ribbon, so the seam between
   groups should read as a faint hairline, not a hard rule. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-group + .docx-editor-toolbar-group::before {
  height: 18px;
  background: var(--de-toolbar-border);
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: transparent;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-button svg {
  width: 19px;
  height: 19px;
}

/* The 38×38 square above is sized for icon-only buttons. `TemplatePicker`'s
   trigger (icon + "Templates"/"Clauses" label + chevron) uses the same
   `.docx-editor-toolbar-button` class with `--with-text` — squashing it into
   a 38px square clipped/overlapped the label instead of sizing to content. */
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-button--with-text {
  width: auto;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  gap: 6px;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-toolbar-button--with-text svg {
  width: 16px;
  height: 16px;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-dropdown {
  min-width: 84px;
}
.docx-editor-react[data-de-layout="mobile"] .docx-editor-mobile-toolbar .docx-editor-dropdown__trigger {
  min-height: 38px;
  font-size: 14px;
}