/** * TechMattaz WhatsApp Widget — widget.css v4.0.2 * Ultra HD, sharp, modern WhatsApp-authentic design. * All functionality preserved. All pseudo-element injections killed. */ /* ── Global reset ─────────────────────────────────────────────────── */ #tm-wa-container, #tm-wa-container * { box-sizing: border-box !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ── Outer wrapper ────────────────────────────────────────────────── */ #tm-wa-container { position: fixed !important; z-index: 2147483647 !important; display: block !important; } /* ══════════════════════════════════════════════════════════════════ PSEUDO-ELEMENT NUCLEAR KILL — theme arrow / ripple injections Applies to ALL elements inside the container EXCEPT the specific ones we explicitly re-enable below (header-icon::after, bubble tail). ══════════════════════════════════════════════════════════════════ */ #tm-wa-container *::before, #tm-wa-container *::after { all: unset !important; content: '' !important; display: block !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; font-size: 0 !important; line-height: 0 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; color: transparent !important; box-shadow: none !important; transform: none !important; animation: none !important; } /* ══════════════════════════════════════════════════════════════════ BUTTON CLIP WRAPPER ══════════════════════════════════════════════════════════════════ */ #tm-wa-btn-wrap { position: relative !important; display: inline-flex !important; overflow: hidden !important; width: 62px !important; height: 62px !important; border-radius: 50% !important; flex-shrink: 0 !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.28), 0 8px 32px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.20) !important; transition: box-shadow 0.30s ease, transform 0.30s ease !important; } #tm-wa-btn-wrap:hover { box-shadow: 0 0 0 4px rgba(255,255,255,0.45), 0 14px 40px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.24) !important; transform: scale(1.08) !important; } /* ══════════════════════════════════════════════════════════════════ TOGGLE BUTTON ══════════════════════════════════════════════════════════════════ */ #tm-wa-toggle { position: relative !important; width: 62px !important; height: 62px !important; border-radius: 50% !important; border: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; -webkit-appearance: none !important; appearance: none !important; background-clip: padding-box !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; overflow: hidden !important; vertical-align: top !important; text-align: center !important; font-size: 0 !important; line-height: 0 !important; -webkit-tap-highlight-color: transparent !important; background-image: linear-gradient(150deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.00) 55%) !important; } #tm-wa-toggle:active { transform: scale(0.93) !important; } #tm-wa-toggle svg { display: block !important; flex-shrink: 0 !important; overflow: hidden !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.30)) !important; } /* ══════════════════════════════════════════════════════════════════ HOVER LABEL — frosted-glass pill tooltip ══════════════════════════════════════════════════════════════════ */ #tm-wa-label { position: absolute !important; bottom: 74px !important; background: rgba(15,15,15,0.90) !important; color: #ffffff !important; padding: 8px 16px !important; border-radius: 24px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; box-shadow: 0 4px 20px rgba(0,0,0,0.30), 0 1px 4px rgba(0,0,0,0.18) !important; pointer-events: none !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; line-height: 1.3 !important; letter-spacing: 0.01em !important; text-transform: none !important; display: block !important; opacity: 0 !important; transform: translateY(8px) !important; transition: opacity 0.26s ease, transform 0.26s ease !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.12) !important; } #tm-wa-label.tm-wa-label-visible { opacity: 1 !important; transform: translateY(0) !important; } /* ══════════════════════════════════════════════════════════════════ CHAT BOX — deep layered shadow, crisp border ══════════════════════════════════════════════════════════════════ */ #tm-wa-box { position: absolute !important; bottom: 78px !important; width: 320px !important; max-width: 92vw !important; background: #ffffff !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.10), 0 20px 40px rgba(0,0,0,0.16), 0 40px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) !important; display: none; /* JS sets to flex — no !important */ flex-direction: column !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; } /* ══════════════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════════════ */ #tm-wa-header { position: relative !important; color: #ffffff !important; background-image: linear-gradient(140deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.10) 100%) !important; padding: 17px 44px 17px 17px !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; gap: 13px !important; } /* Avatar circle — clean, no pseudo-element dot on it */ #tm-wa-header-icon { position: relative !important; width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 50% !important; background: rgba(255,255,255,0.20) !important; border: 2px solid rgba(255,255,255,0.38) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; /* dot no longer inside; safe to clip */ flex-shrink: 0 !important; font-size: 0 !important; line-height: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important; } #tm-wa-header-icon svg { display: block !important; flex-shrink: 0 !important; /* Slightly larger icon in the header circle */ filter: drop-shadow(0 1px 3px rgba(0,0,0,0.20)) !important; } /* Status text column */ #tm-wa-status-wrap { display: flex !important; flex-direction: column !important; gap: 3px !important; overflow: hidden !important; flex: 1 !important; min-width: 0 !important; } #tm-wa-header-title { display: block !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; text-transform: none !important; letter-spacing: 0.01em !important; text-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Response time — full width, own line, no dot competing */ #tm-wa-header-sub { display: block !important; font-size: 11.5px !important; color: rgba(255,255,255,0.85) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0.01em !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; word-break: normal !important; } /* Online dot — absolute bottom-right of the header, below the X button */ #tm-wa-online-dot { display: block !important; position: absolute !important; bottom: 10px !important; right: 16px !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #4ade80 !important; flex-shrink: 0 !important; box-shadow: 0 0 0 2px rgba(74,222,128,0.35), 0 0 6px rgba(74,222,128,0.40) !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; overflow: visible !important; z-index: 10 !important; } /* ── Close button — top-right corner of header, bare X ───────────── */ #tm-wa-close-btn { position: absolute !important; top: 10px !important; right: 14px !important; transform: none !important; width: 22px !important; height: 22px !important; background: transparent !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; display: none; /* JS sets to flex — no !important */ align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; -webkit-appearance: none !important; appearance: none !important; pointer-events: auto !important; z-index: 20 !important; opacity: 0.70 !important; transition: opacity 0.18s ease !important; flex-shrink: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: visible !important; } #tm-wa-close-btn:hover { opacity: 1.0 !important; } #tm-wa-close-btn svg { display: block !important; flex-shrink: 0 !important; } /* ══════════════════════════════════════════════════════════════════ BODY — authentic WhatsApp warm beige + subtle diamond texture ══════════════════════════════════════════════════════════════════ */ #tm-wa-body { flex-grow: 1 !important; padding: 15px 14px !important; background-color: #ece5dd !important; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b5a99e' fill-opacity='0.14'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; min-height: 150px !important; max-height: 300px !important; } /* Scrollbar styling */ #tm-wa-body::-webkit-scrollbar { width: 4px !important; } #tm-wa-body::-webkit-scrollbar-track { background: transparent !important; } #tm-wa-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; border-radius: 2px !important; } /* ── Timestamp ───────────────────────────────────────────────────── */ #tm-wa-timestamp { text-align: center !important; font-size: 10.5px !important; color: #8b7e74 !important; margin-bottom: 12px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; font-weight: 500 !important; letter-spacing: 0.03em !important; background: rgba(255,255,255,0.50) !important; display: inline-block !important; padding: 3px 10px !important; border-radius: 8px !important; align-self: center !important; } /* ── Greeting bubble — authentic WhatsApp received message ───────── */ .tm-wa-bubble-wrap { position: relative !important; align-self: flex-start !important; margin-bottom: 6px !important; max-width: 90% !important; /* Tail via ::before — explicitly re-enabled for this element */ padding-left: 8px !important; } /* Chat bubble tail (left-pointing, like WhatsApp received messages) */ #tm-wa-body .tm-wa-bubble-wrap::before { all: unset !important; content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; border-style: solid !important; border-width: 0 9px 9px 0 !important; border-color: transparent #ffffff transparent transparent !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; pointer-events: none !important; background: transparent !important; animation: none !important; } .tm-wa-bubble { position: relative !important; background: #ffffff !important; background-color:#ffffff !important; padding: 10px 12px 8px 12px !important; border-radius: 0 12px 12px 12px !important; font-size: 13.5px !important; color: #111b21 !important; line-height: 1.55 !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important; } /* Message meta: time + ticks */ .tm-wa-bubble-meta { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; margin-top: 5px !important; } .tm-wa-bubble-time { font-size: 10px !important; color: #8a9ba8 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; font-weight: 400 !important; line-height: 1 !important; } /* ── Start-chat button ───────────────────────────────────────────── */ .tm-wa-direct-btn { display: block !important; color: #ffffff !important; text-align: center !important; padding: 14px 20px !important; border-radius: 14px !important; text-decoration:none !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.02em !important; box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.20) !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; text-transform: none !important; line-height: 1.3 !important; border: none !important; cursor: pointer !important; -webkit-appearance: none !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.00) 100%) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important; margin-top: 4px !important; } .tm-wa-direct-btn:hover { filter: brightness(1.08) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.26), 0 2px 6px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.24) !important; text-decoration: none !important; color: #ffffff !important; } .tm-wa-direct-btn:active { transform: translateY(0) !important; filter: brightness(0.97) !important; } /* ══════════════════════════════════════════════════════════════════ MULTI-AGENT ══════════════════════════════════════════════════════════════════ */ .tm-wa-agent-label { display: block !important; font-weight: 600 !important; margin-bottom: 10px !important; font-size: 10.5px !important; color: #8a9ba8 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.4 !important; } .tm-wa-agent-card { display: flex !important; align-items: center !important; background: #ffffff !important; background-color:#ffffff !important; padding: 11px 13px !important; border-radius: 14px !important; text-decoration: none !important; margin-bottom: 8px !important; border-left: 4px solid #28A43A; /* PHP inline style overrides with theme colour */ box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05) !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; cursor: pointer !important; } .tm-wa-agent-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.07) !important; text-decoration: none !important; } .tm-wa-agent-card:active { transform: translateY(0) !important; } .tm-wa-agent-avatar { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; background: #edfbf3 !important; background-color:#edfbf3 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; margin-right: 12px !important; font-size: 16px !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; flex-shrink: 0 !important; line-height: 1 !important; border: 1.5px solid rgba(0,0,0,0.07) !important; } .tm-wa-agent-info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; flex: 1 !important; overflow: hidden !important; } .tm-wa-agent-name { display: block !important; font-weight: 700 !important; color: #111b21 !important; font-size: 13px !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .tm-wa-agent-role { display: block !important; font-size: 11px !important; color: #8a9ba8 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Chevron */ .tm-wa-agent-chevron { margin-left: auto !important; flex-shrink: 0 !important; opacity: 0.28 !important; display: flex !important; align-items: center !important; transition: opacity 0.18s ease, transform 0.18s ease !important; padding-left: 6px !important; } .tm-wa-agent-card:hover .tm-wa-agent-chevron { opacity: 0.60 !important; transform: translateX(3px) !important; } /* ══════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════ */ #tm-wa-footer { padding: 10px 14px !important; text-align: center !important; font-size: 10.5px !important; background: #f5f5f5 !important; background-color: #f5f5f5 !important; border-top: 1px solid rgba(0,0,0,0.07) !important; color: #b0b0b0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.01em !important; } #tm-wa-footer a { text-decoration: none !important; font-weight: 600 !important; } #tm-wa-footer a:hover { text-decoration: underline !important; } /* ── Narrow screens ──────────────────────────────────────────────── */ @media screen and (max-width: 480px) { #tm-wa-box { width: 94vw !important; max-width: 94vw !important; } }