/* ==========================================================================
   Persistent mobile call action
   A fifth, quiet item in the existing fixed quick-nav row. It is deliberately
   not a filled button: Quote remains the only primary CTA in the dock.
   Desktop/tablet keep the app-bar phone link; this file does nothing there.
   ========================================================================== */

.mobile-call { display: none; }

@media (max-width: 767px) {
  @supports selector(body:has(.mobile-call)) {
    /* Reserve a fifth track so the four existing links keep their order and
       the call action never covers Quote or the form's privacy note. */
    body:has(.mobile-call) .bottom-nav {
      grid-template-columns: repeat(5, 1fr);
    }

    .mobile-call {
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 56;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: 20%;
      height: calc(62px + env(safe-area-inset-bottom));
      padding: 8px 4px;
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
      background: var(--canvas);
      color: var(--ink);
      font-size: 10.5px;
      font-weight: 550;
      letter-spacing: .04em;
      line-height: 1;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .mobile-call__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--coral);
    }

    /* Keep the cell flush with the dock's dark surface. */
    html[data-theme="dark"] .mobile-call {
      background: #0c1824;
    }

    /* The fixed link sits outside the dock's own focus ring flow, so keep the
       outline inside its cell rather than letting it clip at the bottom. */
    .mobile-call:focus-visible {
      outline: 2px solid var(--link);
      outline-offset: -4px;
      border-radius: 0;
    }

    /* Match the dock's yield behaviour: when inline validation pushes the
       privacy note under the bottom edge, the whole row (including this
       action) slides away so the link stays tappable, then returns. */
    body:has(.bottom-nav.is-yielding) .mobile-call {
      transform: translateY(calc(100% + 16px));
      visibility: hidden;
      pointer-events: none;
      transition: transform .22s var(--ease-standard), visibility 0s linear .22s;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-call {
    transition: none;
  }
}