/*
 * THE MESSAGE BUTTONS A PANEL SWITCHED ON (docs/parent/35-integrations.md).
 *
 * WhatsApp and Messenger, links both, stacked in the bottom corner on the
 * shop's storefront and on the platform site. A chat service's bubble shares
 * that corner: once one has loaded (.has-chat, set by integrations.js) the
 * buttons stand above it. On a signed-in phone page they clear the tab bar,
 * as the bubble does. Their own colours, the same in both modes, each
 * holding white text above 4.5:1.
 */
.chat-buttons {
    --chat-lift: 0px;
    position: fixed; right: 1rem; bottom: calc(1rem + var(--chat-lift)); z-index: 40;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2);
}
[dir="rtl"] .chat-buttons { right: auto; left: 1rem; align-items: flex-start; }
.has-chat .chat-buttons { --chat-lift: 5.25rem; }
body:has(.tab-bar) .chat-buttons { bottom: calc(4.5rem + env(safe-area-inset-bottom) + var(--chat-lift)); }

.chat-button {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-5); border-radius: 999px; font-weight: 700;
    color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.chat-button:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }
.chat-whatsapp { background: #15803d; }
.chat-messenger { background: #0866ff; }
@media (max-width: 480px) { .chat-button span { display: none; } .chat-button { padding: var(--space-4); } }
@media print { .chat-buttons { display: none !important; } }