/* ============================================================
   CUSTOMER SERVICE — floating WhatsApp / Messenger launcher
   ------------------------------------------------------------
   Loaded on every front-end page (cart, checkout and the account pages
   suppress the markup entirely — see a16a_chat_is_suppressed()). Kept in
   its own sheet so it can be edited without touching main.css, and
   versioned on filemtime so an edit busts browser caches immediately.

   LAYERING. main.css already owns this ladder; the launcher has to fit
   between the rungs rather than fight them:

       880   .sticky-atc            single product, injected on scroll
       900   .site-header           sticky
       940   >>> this launcher <<<
       950   .app-tabbar           <=860px only, bottom bar
      1000   .mobile-nav-overlay
      1001   .mobile-nav
      1200   .toast-notification

   940 puts it above the header and the add-to-cart bar, and below the
   bottom tab bar and the mobile drawer — so an opened drawer covers the
   launcher rather than the launcher floating over the menu.

   GEOMETRY. The container is positioned with `right`, never `left`, and
   carries no width of its own, so it can never extend the document's
   scrollable area. Overlap with the two bottom-fixed bars is handled by
   offsetting `bottom`, never by z-index.
   ============================================================ */

.a16a-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 940;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    /* The stack is a shrink-to-fit box whose *gaps* are transparent to the
       page beneath. Without this the padding between the two buttons would
       swallow clicks on whatever it happens to cover. */
    pointer-events: none;
}

.a16a-chat-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;                 /* touch target floor */
    padding: 11px 18px 11px 15px;

    border: 0;
    border-radius: var(--radius-pill, 999px);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(17, 17, 17, .22);
    transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

.a16a-chat-btn:hover,
.a16a-chat-btn:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(17, 17, 17, .3);
}

/* Keyboard focus. These are the only controls that stay on screen while the
   visitor reads, so they must be reachable and obviously focused without a
   mouse. Platform colours are far too light for a default focus ring to read
   against, so the ring is drawn in near-black. */
.a16a-chat-btn:focus-visible,
.a16a-chat-btn:focus {
    outline: 3px solid #111111;
    outline-offset: 2px;
}

.a16a-chat-glyph {
    display: block;
    flex: 0 0 auto;
}

/* Brand colours, darkened until white text passes WCAG AA. The label is 14px
   bold — normal-size text, so the 4.5:1 bar applies, not the 3:1 that graphics
   get. Measured white-on-colour:
       #25D366  WhatsApp bright      1.98:1   fail
       #0084FF  Messenger bright     3.66:1   fail
       #128C7E  WhatsApp own teal    4.14:1   fail — close, still short
       #0F7E70  WhatsApp, shipped    4.95:1   pass
       #006AFF  Messenger, shipped   4.66:1   pass
   #0F7E70 is only ~9% darker than WhatsApp's own teal green, so the button is
   still unmistakably "the right app" — the glyph does most of that work. */
.a16a-chat .is-wa { background: #0F7E70; }
.a16a-chat .is-ms { background: #006AFF; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
    .a16a-chat {
        right: 14px;
        /* Clear the 54px bottom tab bar, which is itself bottom:0 and padded
           by the iOS home indicator. Note main.css also raises .sticky-atc to
           this same 54px line — keep the three values in step. */
        bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 14px);
        gap: 8px;
    }

    .a16a-chat-btn {
        /* Icon-only. Two labelled pills stacked above the tab bar would eat a
           third of a phone screen; the glyph alone is unambiguous and the
           accessible name still comes from aria-label on the anchor. */
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
    }

    .a16a-chat-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Single product grows a full-width sticky add-to-cart bar whose own button sits
   at the right end — exactly under this launcher. The launcher has to lift clear
   of it, or the bar's "Add to cart" becomes the thing the visitor taps by
   accident.

   The gate here is 768px, NOT the 860px used above, because that is where
   main.js builds the bar: initStickyAtc() returns early when
   $(window).width() > 768. So above 768 there is no bar to clear, and lifting
   the launcher anyway would leave it floating well off the bottom of every
   desktop product page for nothing. Between 769 and 860 the bottom tab bar
   exists but the sticky bar does not — the rule above already covers that band. */
@media (max-width: 768px) {
    .single-product .a16a-chat {
        bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 88px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .a16a-chat-btn { transition: none; }
}

@media print {
    .a16a-chat { display: none !important; }
}