/* ══════════════════════════════════════════════════════════════════ Ama Affiliate Ultra — Visitor Chatbot (frontend) Two rules this file follows throughout, both learned the hard way on customer themes: 1. Every surface declares BOTH a background and an ink colour. A card that sets only one inherits the other from the host theme, and on a dark theme that means dark text on a dark card — invisible content that looks like a bug in the plugin. 2. Spacing is gap-only and descendant margins are zeroed. Host themes put margins on p / ul / li, and those stack inside a small panel and double its height. ══════════════════════════════════════════════════════════════════ */ .aapbot { --aapbot-color: #1e3a5f; --aapbot-accent: #ff9900; --aapbot-ink: #0f172a; --aapbot-muted: #64748b; --aapbot-line: #e2e8f0; --aapbot-surf: #ffffff; --aapbot-surf-2: #f8fafc; position: fixed; /* Lifted clear of the bottom edge by default, because that strip belongs to somebody else on a monetised site: Mediavine, AdSense anchor units, Ezoic and consent bars all park a fixed rail there and the launcher ends up behind it. --aapbot-bottom is the owner's setting; --aapbot-ad is measured at runtime from whatever fixed element is actually sitting at the bottom of the viewport, so the widget lifts by the real height of the real ad rather than a number someone guessed. */ --aapbot-bottom: 96px; --aapbot-ad: 0px; bottom: calc(var(--aapbot-bottom) + var(--aapbot-ad)); transition: bottom .3s ease; /* Near the top of the 32-bit stacking range. Ad slots, cookie bars and sticky headers routinely claim 999999; sitting below one of those is what put the launcher underneath a display ad. The JS also re-parents this element to , because a z-index cannot escape a parent that has its own transform or filter. */ z-index: 2147483000; isolation: isolate; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; /* VISIBLE WITHOUT JAVASCRIPT. This used to start at opacity:0 with a transform, and only a class added by the script made it appear. That meant ANY reason the script did not run — a caching plugin combining it away, a deferred load, an error earlier in the file — produced a widget that was present in the HTML and completely invisible, with nothing on screen to explain why. Amy, the support bot that has always worked, has no such gate; that is the difference that mattered. The entrance is now a pure CSS animation with a delay. Fill mode "both" applies the opening keyframe during that delay, so the widget waits out of sight and then slides in on its own. If the script never runs the launcher still appears — it simply will not open, which is a visible, diagnosable failure rather than a silent one. */ } .aapbot[hidden] { display: none; } /* Each side animates from its own edge — a shared rule would slide the left-hand one in from the wrong direction. */ .aapbot--right { right: 18px; animation: aapbotInRight .5s cubic-bezier(.22, 1, .36, 1) 5.5s both; } .aapbot--left { left: 18px; animation: aapbotInLeft .5s cubic-bezier(.22, 1, .36, 1) 5.5s both; } @keyframes aapbotInRight { from { opacity: 0; visibility: hidden; transform: translateX(140%); } to { opacity: 1; visibility: visible; transform: translateX(0); } } @keyframes aapbotInLeft { from { opacity: 0; visibility: hidden; transform: translateX(-140%); } to { opacity: 1; visibility: visible; transform: translateX(0); } } /* An open panel must never be mid-animation. */ .aapbot.is-open { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .aapbot--right, .aapbot--left { animation-duration: .01ms; animation-delay: 4s; } } } .aapbot *, .aapbot *::before, .aapbot *::after { box-sizing: border-box; } .aapbot p, .aapbot ul, .aapbot li, .aapbot h4 { margin: 0; padding: 0; } /* ── Launcher ─────────────────────────────────────────────────────── */ .aapbot__launcher { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px 9px 10px; background: var(--aapbot-color); color: #ffffff; border: 0; border-radius: 999px; box-shadow: 0 8px 26px rgba(15, 23, 42, .26); cursor: pointer; font: inherit; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease; } .aapbot__launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 23, 42, .32); } .aapbot__launcher:focus-visible { outline: 3px solid var(--aapbot-accent); outline-offset: 3px; } .aapbot__launcher-text { white-space: nowrap; } .aapbot .aapbot-face { display: block; border-radius: 50%; color: #ffffff; } .aapbot__launcher .aapbot-face { background: rgba(255, 255, 255, .14); padding: 2px; } .aapbot.is-open .aapbot__launcher { display: none; } /* Small × on the launcher. Dismissing is remembered site-wide, so it must be an explicit target and not something you hit by accident while reaching for the launcher — hence its own hit area and stopPropagation in the JS. */ .aapbot__dismiss { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 2px; background: rgba(255, 255, 255, .16); color: #ffffff; border-radius: 50%; font-size: 15px; line-height: 1; opacity: .75; cursor: pointer; transition: background .14s ease, opacity .14s ease; } .aapbot__dismiss:hover { background: rgba(255, 255, 255, .3); opacity: 1; } .aapbot__launcher-face { display: inline-flex; } /* ── Panel ────────────────────────────────────────────────────────── */ .aapbot__panel { display: flex; flex-direction: column; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 110px); background: var(--aapbot-surf); color: var(--aapbot-ink); border: 1px solid var(--aapbot-line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 23, 42, .28); } .aapbot__panel[hidden] { display: none; } .aapbot__head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--aapbot-color); color: #ffffff; flex: 0 0 auto; } .aapbot__avatar { display: inline-flex; } .aapbot__title { font-weight: 700; flex: 1 1 auto; color: #ffffff; } .aapbot__close { background: transparent; border: 0; color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .85; } .aapbot__close:hover { opacity: 1; } /* ── Log ──────────────────────────────────────────────────────────── */ .aapbot__log { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px; background: var(--aapbot-surf-2); color: var(--aapbot-ink); display: flex; flex-direction: column; gap: 10px; } .aapbot__msg { max-width: 88%; padding: 9px 12px; border-radius: 13px; background: var(--aapbot-surf); color: var(--aapbot-ink); border: 1px solid var(--aapbot-line); white-space: pre-wrap; overflow-wrap: anywhere; } .aapbot__msg--me { align-self: flex-end; background: var(--aapbot-color); color: #ffffff; border-color: var(--aapbot-color); } .aapbot__msg--typing { color: var(--aapbot-muted); font-style: italic; } /* ── Article links: the whole point of the widget ─────────────────── */ .aapbot__links { display: flex; flex-direction: column; gap: 7px; max-width: 92%; } .aapbot__links h4 { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--aapbot-muted); } .aapbot__link { display: block; padding: 9px 12px; background: var(--aapbot-surf); color: var(--aapbot-ink); border: 1px solid var(--aapbot-line); border-left: 3px solid var(--aapbot-accent); border-radius: 10px; text-decoration: none; font-weight: 600; transition: border-color .14s, transform .14s; } .aapbot__link:hover { border-color: var(--aapbot-color); transform: translateX(2px); color: var(--aapbot-ink); } /* ── Product card ─────────────────────────────────────────────────── */ .aapbot__product { display: flex; gap: 10px; align-items: center; max-width: 92%; padding: 10px; background: var(--aapbot-surf); color: var(--aapbot-ink); border: 1px solid var(--aapbot-line); border-radius: 12px; } .aapbot__product img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; } .aapbot__product-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .aapbot__product-title { font-weight: 700; font-size: 12.5px; color: var(--aapbot-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aapbot__product-why { font-size: 11.5px; color: var(--aapbot-muted); } .aapbot__product-cta { align-self: flex-start; margin-top: 3px; padding: 6px 12px; background: var(--aapbot-accent); color: #1f2937; border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; } .aapbot__product-cta:hover { filter: brightness(.95); color: #1f2937; } .aapbot__disclosure { font-size: 10.5px; color: var(--aapbot-muted); max-width: 92%; } /* ── Feedback ─────────────────────────────────────────────────────── */ .aapbot__fb { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--aapbot-muted); } .aapbot__fb button { background: var(--aapbot-surf); color: var(--aapbot-muted); border: 1px solid var(--aapbot-line); border-radius: 999px; padding: 2px 9px; cursor: pointer; font: inherit; } .aapbot__fb button:hover { border-color: var(--aapbot-color); color: var(--aapbot-ink); } /* ── Composer ─────────────────────────────────────────────────────── */ .aapbot__form { display: flex; gap: 7px; padding: 10px; background: var(--aapbot-surf); border-top: 1px solid var(--aapbot-line); flex: 0 0 auto; } .aapbot__input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; background: var(--aapbot-surf); color: var(--aapbot-ink); border: 1px solid var(--aapbot-line); border-radius: 999px; font: inherit; } .aapbot__input:focus { outline: 2px solid var(--aapbot-color); outline-offset: 0; } .aapbot__send { flex: 0 0 auto; padding: 9px 16px; background: var(--aapbot-color); color: #ffffff; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; } .aapbot__send[disabled] { opacity: .6; cursor: default; } /* The honeypot must be reachable to a bot but invisible and unfocusable to a person — display:none is skipped by some bots, so move it off-screen. */ .aapbot__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } @media (max-width: 480px) { .aapbot { bottom: 12px; } .aapbot--right { right: 12px; } .aapbot--left { left: 12px; } .aapbot__panel { width: calc(100vw - 24px); height: calc(100vh - 96px); } .aapbot__launcher-text { display: none; } }