/* * Floating WhatsApp button — frontend. * * All dynamic values come from CSS variables set via wp_add_inline_style(): * --sn-wa-bg, --sn-wa-color, --sn-wa-size, --sn-wa-offset-x, --sn-wa-offset-y. * * z-index 9998 sits below WooCommerce modals (typically 99999+). */ .sn-whatsapp { position: fixed; z-index: 9998; display: inline-flex; align-items: center; justify-content: center; width: var(--sn-wa-size, 56px); height: var(--sn-wa-size, 56px); background-color: var(--sn-wa-bg, #25D366); color: var(--sn-wa-color, #FFFFFF); border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; line-height: 0; } .sn-whatsapp:hover, .sn-whatsapp:focus-visible { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); background-color: var(--sn-wa-hover-bg, #1EBE5D); color: var(--sn-wa-hover-color, #FFFFFF); } .sn-whatsapp:focus-visible { outline: 2px solid var(--sn-wa-bg, #25D366); outline-offset: 3px; } /* ------------------------------------------------------------------ */ /* Icon shape variants */ /* ------------------------------------------------------------------ */ .sn-whatsapp--style-square { border-radius: 12px; } /* "default" and "circle" share the circular shape; "custom" inherits too. */ /* ------------------------------------------------------------------ */ /* Call button — stacked above WhatsApp, uses its own color vars */ /* ------------------------------------------------------------------ */ .sn-call { background-color: var(--sn-call-bg, #2563EB); color: var(--sn-call-color, #FFFFFF); } .sn-call:hover, .sn-call:focus-visible { background-color: var(--sn-call-hover-bg, #1E50C0); color: var(--sn-call-hover-color, #FFFFFF); } .sn-call:focus-visible { outline-color: var(--sn-call-bg, #2563EB); } .sn-call.sn-whatsapp--bottom-right, .sn-call.sn-whatsapp--bottom-left { bottom: var(--sn-call-offset-y, 20px); } .sn-call.sn-whatsapp--top-right, .sn-call.sn-whatsapp--top-left { top: var(--sn-call-offset-y, 20px); } .sn-whatsapp__icon { display: inline-flex; align-items: center; justify-content: center; width: 60%; height: 60%; } .sn-whatsapp__svg { width: 100%; height: 100%; fill: currentColor; } .sn-whatsapp__custom-img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ------------------------------------------------------------------ */ /* Positions — logical sides, with RTL swap for horizontal edges */ /* ------------------------------------------------------------------ */ .sn-whatsapp--bottom-right { right: var(--sn-wa-offset-x, 20px); bottom: var(--sn-wa-offset-y, 20px); } .sn-whatsapp--bottom-left { left: var(--sn-wa-offset-x, 20px); bottom: var(--sn-wa-offset-y, 20px); } .sn-whatsapp--top-right { right: var(--sn-wa-offset-x, 20px); top: var(--sn-wa-offset-y, 20px); } .sn-whatsapp--top-left { left: var(--sn-wa-offset-x, 20px); top: var(--sn-wa-offset-y, 20px); } /* RTL: swap "right" and "left" anchors so "bottom-right" stays on the user's reading-side trailing edge. Gulf/Arabic markets frequently have dir="rtl" on . */ [dir="rtl"] .sn-whatsapp--bottom-right { right: auto; left: var(--sn-wa-offset-x, 20px); } [dir="rtl"] .sn-whatsapp--bottom-left { left: auto; right: var(--sn-wa-offset-x, 20px); } [dir="rtl"] .sn-whatsapp--top-right { right: auto; left: var(--sn-wa-offset-x, 20px); } [dir="rtl"] .sn-whatsapp--top-left { left: auto; right: var(--sn-wa-offset-x, 20px); } /* ------------------------------------------------------------------ */ /* Tooltip */ /* ------------------------------------------------------------------ */ .sn-whatsapp__tooltip { position: absolute; background: rgba(0, 0, 0, 0.85); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; font-family: inherit; } .sn-whatsapp--bottom-right .sn-whatsapp__tooltip, .sn-whatsapp--top-right .sn-whatsapp__tooltip { right: calc(100% + 12px); } .sn-whatsapp--bottom-left .sn-whatsapp__tooltip, .sn-whatsapp--top-left .sn-whatsapp__tooltip { left: calc(100% + 12px); } [dir="rtl"] .sn-whatsapp--bottom-right .sn-whatsapp__tooltip, [dir="rtl"] .sn-whatsapp--top-right .sn-whatsapp__tooltip { right: auto; left: calc(100% + 12px); } [dir="rtl"] .sn-whatsapp--bottom-left .sn-whatsapp__tooltip, [dir="rtl"] .sn-whatsapp--top-left .sn-whatsapp__tooltip { left: auto; right: calc(100% + 12px); } .sn-whatsapp:hover .sn-whatsapp__tooltip, .sn-whatsapp:focus-visible .sn-whatsapp__tooltip { opacity: 1; } /* ------------------------------------------------------------------ */ /* Device visibility — pure CSS, no UA sniffing */ /* ------------------------------------------------------------------ */ @media (max-width: 768px) { .sn-whatsapp--hide-mobile { display: none !important; } } @media (min-width: 769px) { .sn-whatsapp--hide-desktop { display: none !important; } } /* ------------------------------------------------------------------ */ /* Animations — looped attention-grabbers, paused on hover */ /* ------------------------------------------------------------------ */ .sn-whatsapp--anim-pulse { animation: sn-wa-pulse 2s ease-in-out infinite; } .sn-whatsapp--anim-bounce { animation: sn-wa-bounce 1.6s ease-in-out infinite; } .sn-whatsapp--anim-shake { animation: sn-wa-shake 2.4s ease-in-out infinite; } .sn-whatsapp--anim-heartbeat { animation: sn-wa-heartbeat 1.6s ease-in-out infinite; } /* Pause animation on hover/focus so the scale-up effect reads cleanly. */ .sn-whatsapp--anim-pulse:hover, .sn-whatsapp--anim-bounce:hover, .sn-whatsapp--anim-shake:hover, .sn-whatsapp--anim-heartbeat:hover, .sn-whatsapp--anim-pulse:focus-visible, .sn-whatsapp--anim-bounce:focus-visible, .sn-whatsapp--anim-shake:focus-visible, .sn-whatsapp--anim-heartbeat:focus-visible { animation-play-state: paused; } @keyframes sn-wa-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0.55); } 50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 14px rgba(37, 211, 102, 0); } } @keyframes sn-wa-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } @keyframes sn-wa-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50% { transform: translateX(-4px); } 20%, 40%, 60% { transform: translateX(4px); } 70% { transform: translateX(0); } } @keyframes sn-wa-heartbeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } } /* ------------------------------------------------------------------ */ /* Business hours status indicator */ /* ------------------------------------------------------------------ */ .sn-whatsapp--status-online::after, .sn-whatsapp--status-offline::after { content: ""; position: absolute; top: 3px; inset-inline-end: 3px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); } .sn-whatsapp--status-online::after { background: #22c55e; animation: sn-status-pulse 2s ease-in-out infinite; } .sn-whatsapp--status-offline::after { background: #9ca3af; } @keyframes sn-status-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 0 rgba(34, 197, 94, 0.55); } 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(34, 197, 94, 0); } } /* ------------------------------------------------------------------ */ /* Welcome bubble */ /* ------------------------------------------------------------------ */ .sn-bubble { position: fixed; z-index: 9997; /* one below the buttons so they sit above when overlapping */ max-width: 280px; min-width: 220px; background: #FFFFFF; color: #1F2937; border-radius: 14px; padding: 14px 16px 14px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08); font-family: inherit; line-height: 1.5; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease; } .sn-bubble[hidden] { display: none !important; } .sn-bubble--visible { opacity: 1; transform: translateY(0) scale(1); } .sn-bubble--leaving { opacity: 0; transform: translateY(8px) scale(0.96); } /* Position the bubble adjacent to the WhatsApp button, with enough room for the call button when it stacks above. The 12px gap keeps it from touching the floating buttons. */ .sn-bubble--bottom-right { right: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); bottom: var(--sn-wa-offset-y, 20px); } .sn-bubble--bottom-left { left: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); bottom: var(--sn-wa-offset-y, 20px); } .sn-bubble--top-right { right: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); top: var(--sn-wa-offset-y, 20px); } .sn-bubble--top-left { left: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); top: var(--sn-wa-offset-y, 20px); } /* RTL: mirror horizontal anchors. */ [dir="rtl"] .sn-bubble--bottom-right, [dir="rtl"] .sn-bubble--top-right { right: auto; left: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); } [dir="rtl"] .sn-bubble--bottom-left, [dir="rtl"] .sn-bubble--top-left { left: auto; right: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); } .sn-bubble__close { position: absolute; top: 4px; inset-inline-end: 6px; background: transparent; border: 0; width: 24px; height: 24px; line-height: 1; font-size: 20px; color: #6B7280; cursor: pointer; padding: 0; border-radius: 50%; } .sn-bubble__close:hover, .sn-bubble__close:focus-visible { background: rgba(0, 0, 0, 0.06); color: #111827; outline: none; } .sn-bubble__header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-inline-end: 18px; /* room for close button */ } .sn-bubble__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .sn-bubble__meta { display: flex; flex-direction: column; min-width: 0; } .sn-bubble__name { font-weight: 600; font-size: 14px; color: #111827; } .sn-bubble__role { font-size: 12px; color: #6B7280; } .sn-bubble__text { margin: 0; font-size: 14px; color: #1F2937; padding-inline-end: 18px; } .sn-bubble__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px; margin-bottom: 8px; } .sn-bubble__status--online { background: #d1fae5; color: #065f46; } .sn-bubble__status--offline { background: #f3f4f6; color: #6b7280; } .sn-bubble__status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .sn-bubble__status--online .sn-bubble__status-dot { background: #22c55e; } .sn-bubble__status--offline .sn-bubble__status-dot { background: #9ca3af; } /* Small screens — bubble shrinks to keep the page usable. */ @media (max-width: 480px) { .sn-bubble { max-width: calc(100vw - var(--sn-wa-offset-x, 20px) - var(--sn-wa-size, 56px) - 32px); } } /* ------------------------------------------------------------------ */ /* Multi-agent panel */ /* ------------------------------------------------------------------ */ .sn-agents-panel { position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 32px); max-height: 80vh; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 0.2s ease, transform 0.2s ease; } .sn-agents-panel[hidden] { display: none !important; } .sn-agents-panel--open { opacity: 1; transform: translateY(0) scale(1); } .sn-agents-panel--bottom-right { right: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); bottom: var(--sn-wa-offset-y, 20px); } .sn-agents-panel--bottom-left { left: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); bottom: var(--sn-wa-offset-y, 20px); } .sn-agents-panel--top-right { right: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); top: var(--sn-wa-offset-y, 20px); } .sn-agents-panel--top-left { left: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); top: var(--sn-wa-offset-y, 20px); } [dir="rtl"] .sn-agents-panel--bottom-right, [dir="rtl"] .sn-agents-panel--top-right { right: auto; left: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); } [dir="rtl"] .sn-agents-panel--bottom-left, [dir="rtl"] .sn-agents-panel--top-left { left: auto; right: calc(var(--sn-wa-offset-x, 20px) + var(--sn-wa-size, 56px) + 12px); } .sn-agents-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, #128C7E 0%, #25D366 100%); color: #fff; } .sn-agents-panel__title { font-size: 16px; font-weight: 700; line-height: 1.3; } .sn-agents-panel__subtitle { font-size: 12px; opacity: 0.9; margin-top: 4px; line-height: 1.4; } .sn-agents-panel__close { background: rgba(255, 255, 255, 0.15); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; } .sn-agents-panel__close:hover { background: rgba(255, 255, 255, 0.25); } .sn-agents-panel__list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; } .sn-agents-panel__list li { margin: 0; padding: 0; } .sn-agent-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; transition: background-color 0.15s ease; } .sn-agent-card:hover { background: #f3f4f6; color: inherit; } .sn-agent-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f3f4f6; } .sn-agent-card__avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #6b7280; background: #e5e7eb; font-size: 18px; } .sn-agent-card__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sn-agent-card__name { font-weight: 600; font-size: 14px; color: #111827; } .sn-agent-card__role { font-size: 12px; color: #6b7280; } .sn-agent-card__channel { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .sn-agent-card__channel--whatsapp { background: #25D366; } .sn-agent-card__channel--call { background: #2563EB; } /* ------------------------------------------------------------------ */ /* Inline buttons (rendered via shortcode inside content) */ /* ------------------------------------------------------------------ */ .sn-inline-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; line-height: 1.2; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; cursor: pointer; border: 2px solid transparent; } .sn-inline-btn:hover, .sn-inline-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .sn-inline-btn__icon { display: inline-flex; line-height: 0; } .sn-inline-btn--whatsapp.sn-inline-btn--solid { background: #25D366; color: #fff; } .sn-inline-btn--whatsapp.sn-inline-btn--solid:hover { background: #1EBE5D; color: #fff; } .sn-inline-btn--whatsapp.sn-inline-btn--outline { background: transparent; color: #25D366; border-color: #25D366; } .sn-inline-btn--whatsapp.sn-inline-btn--outline:hover { background: #25D366; color: #fff; } .sn-inline-btn--call.sn-inline-btn--solid { background: #2563EB; color: #fff; } .sn-inline-btn--call.sn-inline-btn--solid:hover { background: #1E50C0; color: #fff; } .sn-inline-btn--call.sn-inline-btn--outline { background: transparent; color: #2563EB; border-color: #2563EB; } .sn-inline-btn--call.sn-inline-btn--outline:hover { background: #2563EB; color: #fff; } /* Respect reduced motion preferences. */ @media (prefers-reduced-motion: reduce) { .sn-whatsapp, .sn-whatsapp__tooltip { transition: none; } .sn-whatsapp:hover, .sn-whatsapp:focus-visible { transform: none; } .sn-whatsapp--anim-pulse, .sn-whatsapp--anim-bounce, .sn-whatsapp--anim-shake, .sn-whatsapp--anim-heartbeat, .sn-whatsapp--status-online::after { animation: none; } .sn-bubble { transition: none; } }