/* ==========================================================================
   Morrison & Barnes — sticky mobile action bar
     [ 💬 LIVE CHAT | ☎ CALL | 🗓 FREE REVIEW ]
   Icon above label, three equal columns, Call as the centre primary.
   The floating circular Call is gone — Call lives in the bar now. The only
   thing still floating is the back-to-top utility, which is hidden until the
   visitor is well down the page and never sits alongside the bar's actions.
   ========================================================================== */
.mdock {
  --mdock-glass: rgba(11, 26, 72, 0.86);
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.mdock > * { pointer-events: auto; }

/* The bar itself is now an invisible rail; each action carries its own
   bordered container so the three read as distinct, intentional controls. */
.mdock__bar {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;   /* centre reads primary, not huge */
  gap: 8px;
  align-items: stretch;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.mdock__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 50px;
  padding: 0.4rem 0.3rem;
  color: var(--white);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease);
  /* Individual container: thin, low-contrast border, glass navy fill. */
  background: rgba(11, 26, 72, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(3, 8, 25, 0.42);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .mdock__act { -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
}
.mdock__act:active { background: rgba(255, 255, 255, 0.08); }
.mdock__act svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.mdock__act[data-mb-chat="pending"] { cursor: default; }

/* Centre column: electric blue, filled icon, a little elevation — noticeably
   the primary without being a different size. */
.mdock__act--call {
  background: linear-gradient(180deg, var(--blue-400), var(--blue-500));
  /* Stronger accent border + a touch more glow keeps Call the clear primary. */
  border-color: rgba(140, 138, 255, 0.85);
  box-shadow: 0 0 14px rgba(76, 74, 240, 0.38), 0 8px 24px rgba(3, 8, 25, 0.42);
}
.mdock__act--call svg { fill: currentColor; stroke: none; }
.mdock__act--call:active { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); }

/* --- back-to-top utility (only floating element that remains) ------------- */
.mdock__stack {
  display: flex;
  justify-content: flex-end;
  margin: 0 2px 10px auto;
  width: max-content;
}
.mdock__btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--white);
  background: var(--mdock-glass);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .mdock__btn { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.mdock__btn.is-in { opacity: 1; visibility: visible; transform: translateY(0); }
.mdock__btn svg { width: 18px; height: 18px; fill: currentColor; }
.mdock__btn:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .mdock__btn { transition: opacity 0.01ms, visibility 0.01ms; }
}

@media (max-width: 767px) {
  .mobile-bar { display: none !important; }
  .mdock { display: block; }
}
@media (min-width: 560px) {
  .mdock { padding-left: calc((100% - 532px) / 2); padding-right: calc((100% - 532px) / 2); }
}


/* ==========================================================================
   MOBILE UX PASS — dock to spec (56px actions, 12px inset, two-column when
   live chat is not wired). A dead third action is never rendered.
   ========================================================================== */
@media (max-width: 767px) {
  .mdock { padding: 0 12px calc(8px + env(safe-area-inset-bottom)); }
  .mdock__bar { gap: 8px; }
  .mdock__bar--duo { grid-template-columns: 1fr 1fr; }
  .mdock__act {
    min-height: 56px;
    border-radius: 12px;
    gap: 0.3rem;
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }
  .mdock__act svg { width: 19px; height: 19px; }
  /* Call stays the strongest action in either layout. */
  .mdock__bar--duo .mdock__act--call { order: -1; }

  .mdock__stack { margin: 0 0 12px auto; }
  .mdock__btn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Desktop scroll control — paired up/down, matching the dock's glass button
   language. Hidden below the drawer breakpoint, where the dock's own
   back-to-top already covers this and a second floating control would crowd
   the sticky call bar.
   -------------------------------------------------------------------------- */
.mb-scrollpad { display: none; }

@media (min-width: 1151px) {
  .mb-scrollpad {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .mb-scrollpad.is-in { opacity: 1; visibility: visible; transform: translateY(0); }

  .mb-scrollpad__btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    color: var(--white);
    background: var(--mdock-glass, rgba(12, 20, 46, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease),
                opacity .25s var(--ease), transform .25s var(--ease);
  }
  @supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .mb-scrollpad__btn { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  }
  .mb-scrollpad__btn svg { width: 20px; height: 20px; fill: currentColor; }
  .mb-scrollpad__btn:hover {
    background: var(--blue-500, #3b46ff);
    border-color: transparent;
  }
  .mb-scrollpad__btn:active { transform: scale(0.94); }
  .mb-scrollpad__btn:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 3px;
  }
  /* At either end of the page the matching arrow is inert, so it dims and
     stops taking clicks rather than pretending it can still do something. */
  .mb-scrollpad__btn.is-off {
    opacity: 0.32;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-scrollpad,
  .mb-scrollpad__btn { transition: opacity 0.01ms, visibility 0.01ms; }
}

/* --------------------------------------------------------------------------
   Third-party chat placement.

   nGage renders two entry points. The bottom-right one is a single element
   that starts as a 285x423 invite panel and collapses to a round bubble --
   at bottom:5px with z-index 100000, it sat on top of the dock and covered
   Call now and Free case review on every phone. The firm wants only the
   left-edge LIVE CHAT tab, so that whole bottom-right element goes and the
   tab (.liveChatFloatingButton) is left alone.

   Hiding it also frees the bottom-right corner, so our scroll control stays
   where a back-to-top is expected rather than being pushed to the left, where
   the remaining chat tab lives.

   These are nGage's own ids and classes. If they rename them the rule stops
   matching and the bubble reappears -- re-run tools/qa_live.mjs after any
   change on their side.
   -------------------------------------------------------------------------- */
#bottom-right-black-bubble-invite-container { display: none !important; }

/* nGage serves a DIFFERENT widget to real mobile Safari than it does to
   desktop: no left-edge tab, but a full-width bar pinned to the bottom
   (.liveChatFloatingButtonMobile) plus a slide-in invite panel, both sitting
   on top of the dock's Call now / Free case review. Emulating a phone screen
   in a desktop browser does not reproduce it -- the widget is chosen by user
   agent, so it only shows on a real device.

   NOTE: this removes chat from phones altogether, because the bottom bar is
   the only entry point nGage offers there. The alternative is to lift it above
   the dock instead: replace the display rule with
   bottom: calc(122px + env(safe-area-inset-bottom) + 12px) !important. */
.liveChatFloatingButtonMobile,
.liveChatFloatingButtonSpacer,
.ngageMobileContainer,
.ngageMobileInvite,
.ngageMobileFloat { display: none !important; }