/* R2: seven page-scoped mobile entry to the active P3 chat widget. */
.r2-header-chat,
.r2-chat-docked .r2-contact-short { display: none; }

/* R2-BLOCK-01: shared .g-header .g-nav has no flex-wrap and .g-nav-cta has flex-shrink:0
   (baseline site.css), so above the 1100px mobile-nav breakpoint (1440/1280 desktop widths)
   real 200% text zoom pushes the CTA past the viewport edge instead of reflowing. Letting the
   row wrap and the CTA shrink is a no-op at 100% zoom, where everything already fits one line. */
.g-header .g-nav { flex-wrap: wrap; row-gap: 8px; }
.g-header .g-nav-cta { flex-shrink: 1; }

@media (max-width: 640px) {
  /* P3 remains mounted outside inert page content. Only its fixed launcher goes. */
  body.r2-chat-docked #ogniwo-contact-toggle { display: none !important; }

  body.r2-chat-docked .g-header .g-nav { gap: 6px; }
  body.r2-chat-docked .g-header .g-nav-cta {
    order: 2;
    margin-left: auto;
    padding-inline: 8px;
    font-size: max(13px, .8125rem);
  }
  body.r2-chat-docked .g-nav-cta > .r2-contact-full,
  body.r2-chat-docked .g-nav-cta > [aria-hidden="true"] { display: none; }
  body.r2-chat-docked .g-nav-cta > .r2-contact-short { display: inline; }

  body.r2-chat-docked .g-header .r2-header-chat {
    display: inline-flex;
    order: 3;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 7px;
    border: 1px solid var(--g-accent, #145c63);
    border-radius: 5px;
    background: transparent;
    color: var(--g-accent, #145c63);
    font: 600 max(13px, .8125rem)/1.2 Onest, sans-serif;
    white-space: normal;
    cursor: pointer;
  }
  body.r2-chat-docked .g-header .r2-header-chat:hover { background: #e8f1ee; }
  body.r2-chat-docked .g-header .r2-header-chat:focus-visible {
    outline: 3px solid #1f7aff;
    outline-offset: 2px;
  }
  body.r2-chat-docked .g-header .g-menu-toggle { order: 4; }
  body.r2-chat-docked .g-header .g-navigation { order: 5; }
}