/* * Theme-leak reset (must come first so all subsequent chat rules win * by source-order specificity). * * The chat window mounts directly into (outside the Elementor * widget wrapper), so site themes can override our button defaults * and tint the SVG icons invisible (e.g. theme rule `button { * background: gold; color: gold; }` → SVGs using `fill: currentColor` * disappear into the gold background — reported live by Jose on * dc.a-1chimney.com, 2026-05-13). Resetting on `.a1tools-web-chat- * window button` insulates the chat UI from any theme styles. * (Plugin 2.5.3.) */ .a1tools-web-chat-window, .a1tools-web-chat-window * { box-sizing: border-box; } /* * (2.5.7) Force the HTML5 `[hidden]` attribute to actually hide. * * Most WordPress themes ship CSS like `div { display: block }`, * `form { display: flex }` etc at a higher specificity than the * browser's user-agent `[hidden] { display: none }`. That made the * chat widget render the pre-chat form + active thread + resolved * banner + empty attachment preview ALL AT ONCE on * dfw.a-1chimney.com — every element with the `hidden` attribute * was leaking through because the theme's tag-level rule won the * cascade. We override at the chat-window scope with `!important` * so themes can't break the state machine. !important is brittle * but unavoidable here: the chat window mounts directly into * , OUTSIDE the Elementor widget wrapper, so theme styles * have a clean shot at every selector we use. */ .a1tools-web-chat-window [hidden], .a1tools-web-chat-window[hidden] { display: none !important; } .a1tools-web-chat-window button { font: inherit; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1; text-transform: none; letter-spacing: normal; box-shadow: none; min-width: 0; min-height: 0; /* background + color are NOT reset here — each specific button below sets its own. Resetting them here would force every button transparent and clobber the close / send / attach tints. */ } /* * (2.5.7) Force SVGs in the chat window to render properly. Some * themes set `svg { fill: }` at high enough * specificity that our `fill: currentColor` lost — combined with a * brand-color button background that resulted in same-color-on- * same-color (invisible icon, yellow block visible). !important * here is, again, unavoidable while we live outside the Elementor * wrapper. */ .a1tools-web-chat-window svg { display: inline-block !important; vertical-align: middle; fill: currentColor !important; flex-shrink: 0; pointer-events: none; visibility: visible !important; opacity: 1 !important; } /* A1 Tools — Web Chat (visitor side). * * Two surfaces: * - `.a1tools-web-chat` placement(s) — the trigger button(s). * - `.a1tools-web-chat-window` — the single shared chat window * (rendered once per page by the JS module on first open). * * Variables are scoped to keep theme CSS from accidentally overriding * the chat. Per-Elementor-instance overrides live on the * `[selectors]` declarations in the widget controls. */ /* ──────────────── Trigger button ──────────────── */ .a1tools-web-chat { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .a1tools-web-chat--floating { position: fixed; z-index: 999990; } /* (2.5.10) Bottom-corner placements raised to 70px so the floating Live Chat button sits above sticky footers / floating CTAs / mobile safe-area indicators. Top-corner placements stay at 20px since there's typically no sticky header collision risk up there. */ .a1tools-web-chat--corner-br { bottom: 70px; right: 20px; } .a1tools-web-chat--corner-bl { bottom: 70px; left: 20px; } .a1tools-web-chat--corner-tr { top: 20px; right: 20px; } .a1tools-web-chat--corner-tl { top: 20px; left: 20px; } .a1tools-web-chat--inline { display: inline-block; } .a1tools-web-chat__button { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font-weight: 600; line-height: 1.2; transition: background-color 160ms ease, color 160ms ease, transform 80ms ease; } .a1tools-web-chat__button:active { transform: scale(0.97); } .a1tools-web-chat__icon { flex: 0 0 auto; } .a1tools-web-chat__button-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .a1tools-web-chat__button-badge[hidden] { display: none; } /* ──────────────── Window ──────────────── */ .a1tools-web-chat-window { position: fixed; bottom: 90px; right: 20px; width: 380px; max-width: calc(100vw - 24px); height: 580px; max-height: calc(100vh - 120px); display: none; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.20), 0 8px 18px rgba(0,0,0,0.12); overflow: hidden; z-index: 999991; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #111; } .a1tools-web-chat-window--open { display: flex; } @media (max-width: 480px) { .a1tools-web-chat-window { bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; } } .a1tools-web-chat-window__header { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #f49320; color: #fff; } .a1tools-web-chat-window__header-text { flex: 1 1 auto; min-width: 0; } .a1tools-web-chat-window__title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a1tools-web-chat-window__subtitle { font-size: 12px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a1tools-web-chat-window .a1tools-web-chat-window__close, .a1tools-web-chat-window__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; background: rgba(255,255,255,0.12); color: inherit; border-radius: 50%; cursor: pointer; transition: background-color 120ms ease; } .a1tools-web-chat-window__close:hover { background: rgba(255,255,255,0.24); } .a1tools-web-chat-window__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; background: #fafafa; } .a1tools-web-chat-window__attended { position: sticky; top: -14px; margin: -14px -14px 12px; padding: 8px 14px; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 600; border-bottom: 1px solid #d1fae5; } /* Pre-chat form */ .a1tools-web-chat-window__prechat { display: flex; flex-direction: column; gap: 12px; } .a1tools-web-chat-window__prechat-intro { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.4; } .a1tools-web-chat-window__prechat label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #374151; } /* (2.5.16) `!important` on background + color + border to defeat * customer-site theme rules. Some Astra / Hello-Elementor child themes * ship a `body input { background: #000; color: #fff }` "dark form" * style at specificity 0,0,2 — same as ours via attribute-less `input` * — and win on cascade order because the theme stylesheet loads after * the plugin's. Forcing `!important` mirrors the 2.5.7 SVG-fill fix. * The textarea was visually correct out of the box only because no * theme had a `textarea` rule yet; bundle it under the same shield. */ .a1tools-web-chat-window__prechat input, .a1tools-web-chat-window__prechat textarea { padding: 10px 12px; border: 1px solid #e5e7eb !important; background: #fff !important; color: #111 !important; border-radius: 6px; font: inherit; color: #111; } .a1tools-web-chat-window__prechat input:focus, .a1tools-web-chat-window__prechat textarea:focus { /* (2.5.16) Re-assert background + color on focus too — Astra-class * themes also ship a `textarea:focus { background: #000 }` rule * that fires on tab-in / first-keystroke, which is exactly what * the user saw: white at rest, black the moment they type. */ background: #fff !important; color: #111 !important; outline: none !important; border-color: #f49320 !important; box-shadow: 0 0 0 3px rgba(244,147,32,0.18) !important; } /* (2.5.16) Browser autofill paint — Chrome / Edge / Safari overlay a * yellow (light theme) or dark-grey (dark theme) panel on autofilled * fields. The `inset box-shadow` trick is the canonical override: 1000 * px of solid-white inset shadow covers the browser's autofill paint * without affecting layout. `-webkit-text-fill-color` overrides the * autofill text color which otherwise stays white on the now-white * background. */ .a1tools-web-chat-window__prechat input:-webkit-autofill, .a1tools-web-chat-window__prechat input:-webkit-autofill:hover, .a1tools-web-chat-window__prechat input:-webkit-autofill:focus, .a1tools-web-chat-window__prechat textarea:-webkit-autofill, .a1tools-web-chat-window__prechat textarea:-webkit-autofill:hover, .a1tools-web-chat-window__prechat textarea:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #111 !important; caret-color: #111 !important; } /* (2.5.15) Question/message textarea — taller default, vertical resize * only (horizontal stretch would break the layout). */ .a1tools-web-chat-window__prechat textarea { min-height: 72px; resize: vertical; line-height: 1.4; } /* (2.5.8) Parent-prefixed for specificity (0,2,0) so my own chat-window button reset (0,1,1) doesn't clobber the padding. */ .a1tools-web-chat-window .a1tools-web-chat-window__prechat-submit, .a1tools-web-chat-window__prechat-submit { margin-top: 8px; padding: 14px 18px; border: 0; background: #f49320; color: #fff; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 0.01em; transition: background-color 140ms ease, transform 80ms ease; box-shadow: 0 1px 3px rgba(0,0,0,0.08); width: 100%; display: block; text-align: center; } .a1tools-web-chat-window .a1tools-web-chat-window__prechat-submit:hover, .a1tools-web-chat-window__prechat-submit:hover { background: #d67d10; } .a1tools-web-chat-window .a1tools-web-chat-window__prechat-submit:active, .a1tools-web-chat-window__prechat-submit:active { transform: translateY(1px); } /* Thread */ .a1tools-web-chat-window__messages { display: flex; flex-direction: column; gap: 8px; } .a1tools-web-chat-window__msg { display: flex; flex-direction: column; max-width: 85%; } .a1tools-web-chat-window__msg--visitor { align-self: flex-end; align-items: flex-end; } .a1tools-web-chat-window__msg--dispatcher, .a1tools-web-chat-window__msg--auto, .a1tools-web-chat-window__msg--system { align-self: flex-start; align-items: flex-start; } .a1tools-web-chat-window__msg--system { max-width: 100%; align-self: stretch; align-items: center; } .a1tools-web-chat-window__bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word; } .a1tools-web-chat-window__msg--visitor .a1tools-web-chat-window__bubble { background: #f49320; color: #fff; border-bottom-right-radius: 4px; } .a1tools-web-chat-window__msg--dispatcher .a1tools-web-chat-window__bubble, .a1tools-web-chat-window__msg--auto .a1tools-web-chat-window__bubble { background: #eef2ff; color: #111; border-bottom-left-radius: 4px; } .a1tools-web-chat-window__msg--system .a1tools-web-chat-window__bubble { background: transparent; color: #6b7280; font-size: 12px; font-style: italic; padding: 4px 12px; } /* * (2.5.10) Visual divider after the last system message in a run. * * The server emits a "Chat started by …" system line on session * start, and the visitor's eye otherwise has no visual cue for where * session metadata ends and the actual conversation begins. The * sibling-selector pattern below adds a hairline divider + extra top * margin to the first NON-system message that immediately follows a * system message — so the divider only shows at the system→message * boundary, not between two system messages or between two regular * messages. * * Selectors all scoped under .a1tools-web-chat-window for the * theme-leak protection the rest of the file uses. */ .a1tools-web-chat-window__msg--system + .a1tools-web-chat-window__msg:not(.a1tools-web-chat-window__msg--system) { margin-top: 18px; position: relative; } .a1tools-web-chat-window__msg--system + .a1tools-web-chat-window__msg:not(.a1tools-web-chat-window__msg--system)::before { content: ''; position: absolute; top: -9px; left: 12%; right: 12%; height: 1px; background: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent 100% ); pointer-events: none; } .a1tools-web-chat-window__bubble-img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; margin-bottom: 4px; } .a1tools-web-chat-window__meta { font-size: 10px; color: #9ca3af; margin-top: 2px; padding: 0 4px; } .a1tools-web-chat-window__msg--visitor .a1tools-web-chat-window__meta { text-align: right; } /* Typing indicator */ .a1tools-web-chat-window__typing { display: flex; gap: 4px; padding: 8px 12px; background: #eef2ff; border-radius: 14px; width: fit-content; margin-top: 4px; } .a1tools-web-chat-window__typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; animation: a1tools-web-chat-typing-bounce 1.2s infinite ease-in-out; } .a1tools-web-chat-window__typing-dot:nth-child(2) { animation-delay: 150ms; } .a1tools-web-chat-window__typing-dot:nth-child(3) { animation-delay: 300ms; } @keyframes a1tools-web-chat-typing-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.0); opacity: 1.0; } } /* Resolved state */ .a1tools-web-chat-window__resolved { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; gap: 12px; color: #6b7280; font-size: 13px; text-align: center; } /* (2.5.8) Same specificity bump as __prechat-submit — visitor sees this as the call-to-action after a chat is wrapped up, so it needs proper button presence, not a thin highlighted strip. */ .a1tools-web-chat-window .a1tools-web-chat-window__restart, .a1tools-web-chat-window__restart { margin-top: 8px; padding: 12px 22px; border: 0; background: #f49320; color: #fff; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.01em; transition: background-color 140ms ease, transform 80ms ease; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: inline-block; min-width: 160px; text-align: center; } .a1tools-web-chat-window .a1tools-web-chat-window__restart:hover, .a1tools-web-chat-window__restart:hover { background: #d67d10; } .a1tools-web-chat-window .a1tools-web-chat-window__restart:active, .a1tools-web-chat-window__restart:active { transform: translateY(1px); } /* Composer */ .a1tools-web-chat-window__composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 10px; background: #fff; border-top: 1px solid #e5e7eb; } .a1tools-web-chat-window__composer textarea { flex: 1 1 auto; min-height: 38px; max-height: 160px; resize: none; border: 1px solid #e5e7eb; border-radius: 18px; padding: 8px 14px; font: inherit; color: #111; background: #f9fafb; outline: none; } .a1tools-web-chat-window__composer textarea:focus { border-color: #f49320; background: #fff; box-shadow: 0 0 0 3px rgba(244,147,32,0.18); } .a1tools-web-chat-window .a1tools-web-chat-window__attach, .a1tools-web-chat-window .a1tools-web-chat-window__send, .a1tools-web-chat-window__attach, .a1tools-web-chat-window .a1tools-web-chat-window__send, .a1tools-web-chat-window__send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #6b7280; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .a1tools-web-chat-window .a1tools-web-chat-window__attach:hover, .a1tools-web-chat-window__attach:hover { background: #f3f4f6; color: #111; } .a1tools-web-chat-window .a1tools-web-chat-window__send, .a1tools-web-chat-window__send { background: #f49320; color: #fff; } .a1tools-web-chat-window .a1tools-web-chat-window__send:hover, .a1tools-web-chat-window__send:hover { background: #d67d10; } .a1tools-web-chat-window__attachment-preview { position: absolute; bottom: 70px; left: 14px; right: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* (2.5.5) Belt-and-suspenders for the `[hidden]` attribute. Themes sometimes set `[hidden] { display: revert }` (or similar) which defeats HTML5's default `display: none` for [hidden] elements, so the empty preview bar floated above the composer with the X button trying to close nothing. Force it to stay hidden. */ .a1tools-web-chat-window__attachment-preview[hidden] { display: none !important; } .a1tools-web-chat-window__attachment-preview img { max-width: 60px; max-height: 60px; border-radius: 4px; } .a1tools-web-chat-window__attachment-preview button { margin-left: auto; width: 24px; height: 24px; border: 0; background: #f3f4f6; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #6b7280; } .a1tools-web-chat-window__attachment-preview button:hover { background: #e5e7eb; color: #111; }