/* ============================================================ Axolo.AI chat widget - dark theme Markup is built by chatbot.js and appended to , the same self-mounting pattern theme-video.js uses, so this file carries the whole look. PALETTE - the widget stays black regardless of the host page, so these are literals, not inherited tokens: --void #07080A panel base --slab #101318 raised surfaces (bot bubbles, input) --edge white 8% hairlines --volt #0A84FF the user's own voice: their bubbles, send --gill #FF6E9C axolotl gill pink - signs of life ONLY: antenna light, online pulse, typing dots Two accents, each with one job. Nothing else is coloured. ============================================================ */ #xa-chat{ --void:#07080A; --slab:#101318; --slab-2:#171B21; --edge:rgba(255,255,255,.08); --edge-2:rgba(255,255,255,.14); --ink:#EDEFF2; --dim:#8B919B; --volt:#0A84FF; --volt-2:#0060DF; --gill:#FF6E9C; position:fixed; right:14px; top:50%; left:auto; transform:translateY(-50%); z-index:900; font-family:'Manrope',system-ui,sans-serif; } /* ============================================================ THE LAUNCHER - a robot head, not a speech bubble. Squircle skull, antenna, two eyes that blink. This is the signature element, so everything else in the widget stays quiet. ============================================================ */ .xa-fab{ position:relative; width:44px; height:44px; padding:0; cursor:pointer; background:linear-gradient(165deg,#1B2028,#0B0D11); border:1px solid var(--edge-2); border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.09); transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease; } .xa-fab:hover{ transform:translateY(-2px) rotate(-4deg); border-color:rgba(255,110,156,.4); box-shadow:0 0 0 4px rgba(10,132,255,.12), inset 0 1px 0 rgba(255,255,255,.12); } .xa-fab:active{ transform:translateY(-1px) scale(.96); } /* ears - two stubby side plates, the detail that reads "machine" */ .xa-fab::before, .xa-fab::after{ content:''; position:absolute; top:50%; width:2.5px; height:10px; margin-top:-5px; background:linear-gradient(#2A313B,#14181E); border-radius:3px; transition:opacity .2s ease, transform .3s ease; } .xa-fab::before{ left:-2.5px; } .xa-fab::after{ right:-2.5px; } /* the ears retract as the head morphs into the round close button */ #xa-chat.xa-open .xa-fab::before, #xa-chat.xa-open .xa-fab::after{ opacity:0; transform:scaleX(.2); } /* antenna - the mast is a pseudo-element, the lamp is the box-shadow */ .xa-antenna{ position:absolute; left:50%; top:4px; width:1.5px; height:6px; margin-left:-.75px; background:linear-gradient(var(--edge-2),transparent); border-radius:2px; } .xa-antenna::after{ content:''; position:absolute; left:50%; top:-3.5px; width:4.5px; height:4.5px; margin-left:-2.25px; background:var(--gill); border-radius:50%; box-shadow:0 0 8px var(--gill); animation:xa-beacon 2.6s ease-in-out infinite; } @keyframes xa-beacon{ 0%,100%{ opacity:.35; box-shadow:0 0 5px rgba(255,110,156,.5); } 50% { opacity:1; box-shadow:0 0 13px var(--gill); } } .xa-face{ position:absolute; inset:0; display:grid; place-content:center; gap:4px; transition:opacity .22s ease; } .xa-eyes{ display:flex; gap:7.5px; justify-content:center; margin-top:3px; } .xa-eyes i{ width:6px; height:6px; border-radius:50%; background:var(--volt); box-shadow:0 0 8px rgba(10,132,255,.75); animation:xa-blink 5.2s infinite; } .xa-eyes i:last-child{ animation-delay:.07s; } /* eyes land a hair apart - alive, not mechanical */ @keyframes xa-blink{ 0%,92%,100%{ transform:scaleY(1); } 95%,97% { transform:scaleY(.14); } } /* mouth - a single hairline. It curves up on hover. */ .xa-mouth{ width:11px; height:1.5px; margin:0 auto; border-radius:2px; background:var(--edge-2); transition:width .3s var(--ease,ease), background .3s ease, border-radius .3s ease; } .xa-fab:hover .xa-mouth{ width:8px; height:3.5px; border-radius:0 0 8px 8px; background:var(--gill); } .xa-fab:hover .xa-eyes i{ animation:none; transform:scaleY(.55); } /* squints when pleased */ /* close glyph, cross-faded with the face when the panel is open */ .xa-x{ position:absolute; inset:0; display:grid; place-content:center; opacity:0; transform:rotate(-90deg) scale(.6); transition:opacity .22s ease, transform .34s cubic-bezier(.34,1.56,.64,1); } .xa-x svg{ width:16px; height:16px; color:var(--ink); } #xa-chat.xa-open .xa-face{ opacity:0; } #xa-chat.xa-open .xa-antenna{ opacity:0; } #xa-chat.xa-open .xa-x{ opacity:1; transform:none; } #xa-chat.xa-open .xa-fab{ border-radius:50%; } /* online signal - green, and it stays. It says "someone is here" rather than counting unread messages. Hidden while the panel is open, because the header carries the same dot next to the logo. */ .xa-dot{ position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:#30D158; border:2px solid var(--void); box-shadow:0 0 10px rgba(48,209,88,.9); } .xa-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #30D158; animation:xa-ripple 2.4s ease-out infinite; } #xa-chat.xa-open .xa-dot{ display:none; } /* ============================================================ THE PANEL ============================================================ */ .xa-panel{ position:absolute; right:58px; left:auto; top:50%; /* 124px = the 58px the launcher occupies below, plus the host page's 52px sticky nav, plus a 14px breath. Keeps the panel's top edge clear of the nav on short viewports instead of covering it. */ width:min(300px,calc(100vw - 86px)); height:min(420px,calc(100vh - 124px)); display:flex; flex-direction:column; overflow:hidden; background:var(--void); color:var(--ink); border:1px solid var(--edge); border-radius:19px; box-shadow:0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06); opacity:0; transform:translateY(-50%) translateX(12px) scale(.94); transform-origin:100% 50%; pointer-events:none; visibility:hidden; transition:opacity .3s ease, transform .42s cubic-bezier(.34,1.4,.64,1), visibility .3s; } #xa-chat.xa-open .xa-panel{ opacity:1; transform:translateY(-50%); pointer-events:auto; visibility:visible; } /* one ambient glow, top-left over the launcher, so the black has depth without a gradient wash */ .xa-panel::before{ content:''; position:absolute; top:-70px; left:-50px; width:200px; height:200px; pointer-events:none; background:radial-gradient(circle,rgba(10,132,255,.22),transparent 68%); filter:blur(14px); } .xa-head{ position:relative; display:flex; align-items:center; gap:9px; padding:10px 12px 9px; border-bottom:1px solid var(--edge); flex:0 0 auto; background:linear-gradient(180deg,rgba(255,255,255,.045),transparent); } /* hairline that fades out to both edges - a seam, not a border */ .xa-head::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(10,132,255,.55),rgba(255,110,156,.35),transparent); } .xa-avatar{ position:relative; width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:#000; box-shadow:0 0 0 1px var(--edge-2), 0 0 18px rgba(10,132,255,.28); } .xa-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; } .xa-live{ position:absolute; right:-1px; bottom:-1px; width:8px; height:8px; border-radius:50%; background:#30D158; border:2px solid var(--void); } .xa-live::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid #30D158; animation:xa-ripple 2.4s ease-out infinite; } @keyframes xa-ripple{ 0%{opacity:.7; transform:scale(.7);} 100%{opacity:0; transform:scale(1.7);} } .xa-name{ font-family:'Syne',sans-serif; font-weight:700; font-size:13px; letter-spacing:-.02em; line-height:1.15; } .xa-role{ font-family:'DM Mono',monospace; font-size:8.2px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-top:1px; } .xa-head button{ margin-left:auto; width:23px; height:23px; border:1px solid transparent; border-radius:7px; cursor:pointer; background:transparent; color:var(--dim); display:grid; place-items:center; transition:all .2s ease; } .xa-head button:hover{ background:var(--slab-2); color:var(--ink); border-color:var(--edge); } /* ---- transcript ---- */ .xa-log{ flex:1 1 auto; overflow-y:auto; padding:13px 12px 5px; display:flex; flex-direction:column; gap:7px; scrollbar-width:thin; scrollbar-color:var(--slab-2) transparent; } .xa-log::-webkit-scrollbar{ width:6px; } .xa-log::-webkit-scrollbar-thumb{ background:var(--slab-2); border-radius:3px; } /* no arrow buttons at the ends of the track - Windows draws them by default */ .xa-log::-webkit-scrollbar-button{ display:none; width:0; height:0; } .xa-msg{ max-width:86%; padding:8px 11px; font-size:12.4px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; animation:xa-in .38s cubic-bezier(.16,1,.3,1) both; } @keyframes xa-in{ from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;} } .xa-bot{ align-self:flex-start; background:var(--slab); color:var(--ink); border:1px solid var(--edge); border-radius:13px 13px 13px 4px; } .xa-me{ align-self:flex-end; color:#fff; border-radius:13px 13px 4px 13px; background:linear-gradient(160deg,var(--volt),var(--volt-2)); box-shadow:0 6px 18px rgba(10,132,255,.3); } .xa-typing{ display:flex; gap:4px; align-items:center; padding:10px 11px; } .xa-typing span{ width:5px; height:5px; border-radius:50%; background:var(--gill); animation:xa-bounce 1.25s infinite; } .xa-typing span:nth-child(2){ animation-delay:.16s; } .xa-typing span:nth-child(3){ animation-delay:.32s; } @keyframes xa-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.3; } 30% { transform:translateY(-5px); opacity:1; } } /* ---- quick replies ---- */ .xa-chips{ padding:3px 12px 9px; flex:0 0 auto; } /* Cleared while the bot types, and left empty after a goodbye - with no chips inside, the padding would sit there as a gap above the input. */ .xa-chips:empty{ padding:0; } .xa-chips-label{ font-family:'DM Mono',monospace; font-size:8.2px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; } .xa-chips-row{ display:flex; flex-wrap:wrap; gap:6px; } .xa-chips button{ font-family:inherit; font-size:11px; color:var(--ink); cursor:pointer; padding:5px 10px; background:var(--slab); border:1px solid var(--edge); border-radius:999px; transition:background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; } .xa-chips button:hover{ background:var(--slab-2); border-color:rgba(10,132,255,.55); color:#fff; transform:translateY(-2px); } /* ---- composer ---- */ .xa-form{ display:flex; align-items:flex-end; gap:7px; padding:9px; flex:0 0 auto; border-top:1px solid var(--edge); background:rgba(255,255,255,.02); } .xa-form textarea{ flex:1 1 auto; resize:none; min-height:34px; max-height:84px; padding:8px 11px; font-family:inherit; font-size:12.4px; line-height:1.45; color:var(--ink); background:var(--slab); border:1px solid var(--edge); border-radius:11px; outline:none; transition:border-color .2s ease, background .2s ease; /* Once the text passes max-height the box scrolls, and Windows draws a native scrollbar with up/down arrow buttons inside the input. Hide the bar entirely - the box still scrolls by wheel, caret and keyboard. */ overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; } .xa-form textarea::-webkit-scrollbar{ width:0; height:0; } .xa-form textarea::placeholder{ color:var(--dim); } .xa-form textarea:focus{ border-color:rgba(10,132,255,.6); background:var(--slab-2); } .xa-send{ width:34px; height:34px; flex:0 0 auto; border:0; border-radius:11px; cursor:pointer; color:#fff; background:linear-gradient(160deg,var(--volt),var(--volt-2)); display:grid; place-items:center; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, opacity .22s ease; } .xa-send:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 8px 20px rgba(10,132,255,.45); } .xa-send:disabled{ opacity:.28; cursor:default; background:var(--slab-2); } .xa-send svg{ width:14px; height:14px; } :where(#xa-chat) :focus-visible{ outline:2px solid var(--volt); outline-offset:2px; } @media (max-width:520px){ #xa-chat{ right:14px; } .xa-panel{ width:calc(100vw - 86px); height:min(66vh,410px); } } @media (prefers-reduced-motion:reduce){ #xa-chat *, #xa-chat *::after, #xa-chat *::before{ animation:none!important; transition-duration:.001ms!important; } } /* ============================================================ BOOKING FORM Rendered into the transcript when someone asks to book. Fields mirror the page's contact card; the panel's own tokens do the rest. ============================================================ */ .xa-book{ align-self:stretch; display:grid; gap:7px; background:var(--slab); border:1px solid var(--edge); border-radius:15px 15px 15px 4px; padding:12px; margin-top:1px; animation:xa-in .38s cubic-bezier(.16,1,.3,1) both; } .xa-book input, .xa-book select, .xa-book textarea{ width:100%; font-family:inherit; font-size:12.4px; color:var(--ink); background:var(--slab-2); border:1px solid var(--edge); border-radius:10px; padding:9px 11px; outline:none; resize:none; transition:border-color .2s ease; } .xa-book input::placeholder, .xa-book textarea::placeholder{ color:var(--dim); } .xa-book input:focus, .xa-book select:focus, .xa-book textarea:focus{ border-color:rgba(10,132,255,.6); } /* the native select popup is drawn by the OS, so its options need a colour of their own or they inherit a white list with white text */ .xa-book select{ color:var(--dim); appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:30px;} .xa-book select:valid{ color:var(--ink); } .xa-book option{ background:#14181E; color:var(--ink); } .xa-book button{ font-family:inherit; font-size:12.8px; font-weight:600; color:#fff; cursor:pointer; border:0; border-radius:11px; padding:10px 14px; margin-top:2px; background:linear-gradient(160deg,var(--volt),var(--volt-2)); transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; } .xa-book button:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(10,132,255,.4); } .xa-book .xa-fine{ font-size:10.5px; color:var(--dim); text-align:center; margin-top:1px; } /* A field the backend rejected, and the one line that explains why. The button dims while the request is in flight so a second click has an obvious reason not to happen. */ .xa-book .xa-bad{ border-color:rgba(255,69,58,.75); } .xa-book .xa-err{ font-size:11.5px; color:#ff6961; text-align:center; margin:0; line-height:1.45; } .xa-book button:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; } .xa-book button:disabled:hover{ transform:none; box-shadow:none; } /* ============================================================ RESPONSIVE HARDENING Appended last, so each rule overrides its counterpart above on source order alone. Three things the widget needed for phones: · the launcher and panel sat 14px from the edge, which is inside the home indicator on a notched phone · every field was 12.4px, and iOS Safari zooms the whole page whenever a focused field is under 16px - and does not zoom back out afterwards · the panel was sized in vh, which changes by the height of the browser toolbar mid-conversation ============================================================ */ #xa-chat{ right:max(14px, calc(env(safe-area-inset-right) + 8px)); } @media (max-width:520px){ /* dvh tracks the visible area, so the panel does not jump when the address bar retracts. The vh line stays as the fallback. */ .xa-panel{ width:min(calc(100vw - 86px), 380px); height:min(66vh, 410px); height:min(62dvh, 430px); } } /* Touch: 16px fields (no zoom on focus) and a 44px send button. */ @media (pointer:coarse){ .xa-form textarea, .xa-book input, .xa-book select, .xa-book textarea{ font-size:16px; } .xa-form textarea{ min-height:40px; max-height:96px; } .xa-send{ width:40px; height:40px; } .xa-fab{ width:52px; height:52px; } .xa-book button{ min-height:44px; font-size:14px; } .xa-chips-row button{ min-height:36px; } } /* Landscape phone: 62dvh of a 390px-tall viewport is 240px, which is two messages. Take the width instead, since there is plenty of it. */ @media (orientation:landscape) and (max-height:520px){ .xa-panel{ width:min(calc(100vw - 86px), 420px); height:calc(100dvh - 84px); } }