/* ══════════════════════════════════════════════════════════════════ 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; bottom: 18px; /* 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; /* Hidden until the JS reveals it, and it arrives FROM the side it lives on. Each side restates both transforms — a shared rule would slide the left-hand one the wrong way. */ opacity: 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; pointer-events: none; } .aapbot.is-in { opacity: 1; transform: translateX(0); pointer-events: auto; } .aapbot[hidden] { display: none; } .aapbot--right { right: 18px; transform: translateX(140%); } .aapbot--left { left: 18px; transform: translateX(-140%); } @media (prefers-reduced-motion: reduce) { .aapbot { transition: opacity .2s ease; transform: none !important; } } .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; } }