/* GENERATED by tools/make-chat.py -- do not edit by hand. Sources: Ninova_Revise/assets/css/chat.css (the panel) aagh-concierge/assets/ask.css (the quick answers) Both recoloured onto this site's tokens; see the block below. */ /* ----------------------------------------------------------------------- * * THE PANEL'S OWN TOKENS, on Ninova V2's palette. * * V1 hardcodes a blue (#5B9BD5) and the WordPress ask view a gold (#C9A876). * Both resolve here instead, so the whole panel is re-skinned by this block * and no rule below carries a colour of its own. * ----------------------------------------------------------------------- */ .aagh-concierge { --agc-accent: var(--teal); --agc-accent-rgb: var(--teal-rgb); --agc-text: var(--ink); --agc-text-rgb: 243, 237, 228; --agc-ink-rgb: 11, 9, 22; /* --void-raised, the sheet */ --agc-deep-rgb: var(--void-rgb); /* the launcher and the veil */ } /* Base rules for classes the panel uses that section 6E does not define on their own -- shared utilities from EI's stylesheet. Without these the panel is styled by nothing. */ .aagh-concierge-meta { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--agc-accent); display: inline-block; margin-bottom: 1.5rem; } .aagh-concierge { position: fixed; right: max(2rem, calc((100vw - 1320px) / 2)); bottom: 1.75rem; z-index: 950; } .aagh-concierge-veil { position: fixed; inset: 0; background: rgba(var(--agc-deep-rgb), 0); visibility: hidden; transition: background 0.4s ease, visibility 0s linear 0.4s; z-index: 0; } .aagh-concierge.is-open .aagh-concierge-veil { visibility: visible; transition: background 0.4s ease, visibility 0s; } .aagh-concierge-launch { position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 1rem; z-index: 1; } .aagh-concierge-btn { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: rgba(var(--agc-deep-rgb), 0.9); border: 1px solid rgba(var(--agc-accent-rgb), 0.55); border-radius: 50%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* champagne glow — a black shadow vanishes on an obsidian page */ box-shadow: 0 0 22px rgba(var(--agc-accent-rgb), 0.35), 0 0 60px -8px rgba(var(--agc-accent-rgb), 0.28), 0 14px 34px -12px rgba(0, 0, 0, 0.8); animation: aagh-concierge-glow 3.2s ease-in-out infinite; transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } @keyframes aagh-concierge-glow { 0%, 100% { box-shadow: 0 0 22px rgba(var(--agc-accent-rgb), 0.35), 0 0 60px -8px rgba(var(--agc-accent-rgb), 0.28), 0 14px 34px -12px rgba(0, 0, 0, 0.8); } 50% { box-shadow: 0 0 30px rgba(var(--agc-accent-rgb), 0.5), 0 0 80px -6px rgba(var(--agc-accent-rgb), 0.38), 0 14px 34px -12px rgba(0, 0, 0, 0.8); } } .aagh-concierge-btn:hover { border-color: var(--agc-accent); transform: translateY(-2px); animation-play-state: paused; box-shadow: 0 0 34px rgba(var(--agc-accent-rgb), 0.6), 0 0 90px -6px rgba(var(--agc-accent-rgb), 0.42), 0 18px 40px -12px rgba(0, 0, 0, 0.85); } /* Once the panel is open, the launcher stops calling for attention */ .aagh-concierge.is-open .aagh-concierge-btn { animation: none; box-shadow: 0 0 18px rgba(var(--agc-accent-rgb), 0.22), 0 12px 30px -12px rgba(0, 0, 0, 0.75); } .aagh-concierge-btn::before, .aagh-concierge-btn::after { content: '+'; position: absolute; font-family: monospace; font-size: 0.85rem; line-height: 1; color: rgba(var(--agc-accent-rgb), 0.55); pointer-events: none; } .aagh-concierge-btn::before { top: -7px; left: -3px; } .aagh-concierge-btn::after { bottom: -7px; right: -3px; } .aagh-concierge-btn svg { width: 20px; height: 20px; fill: var(--agc-accent); position: absolute; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .aagh-concierge-icon-close { opacity: 0; transform: rotate(-45deg); } .aagh-concierge.is-open .aagh-concierge-icon-chat { opacity: 0; transform: rotate(45deg); } .aagh-concierge.is-open .aagh-concierge-icon-close { opacity: 1; transform: none; } .aagh-concierge-pulse { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(var(--agc-accent-rgb), 0.5); animation: aagh-concierge-ping 3.2s ease-out infinite; pointer-events: none; } .aagh-concierge.is-open .aagh-concierge-pulse { display: none; } @keyframes aagh-concierge-ping { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } .aagh-concierge-label { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(var(--agc-text-rgb), 0.52); transition: color 0.3s ease; pointer-events: none; } .aagh-concierge-launch:hover .aagh-concierge-label { color: var(--agc-accent); } /* The panel — a small obsidian card above the launcher */ .aagh-concierge-panel { position: absolute; right: 0; bottom: calc(100% + 1.25rem); width: 340px; padding: 2.25rem 2rem 1.5rem 2rem; background: rgba(var(--agc-ink-rgb), 0.97); border: 1px solid rgba(var(--agc-text-rgb), 0.13); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s; z-index: 1; } .aagh-concierge.is-open .aagh-concierge-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } .aagh-concierge-panel::before, .aagh-concierge-panel::after { content: '+'; position: absolute; font-family: monospace; font-size: 0.9rem; line-height: 1; color: rgba(var(--agc-accent-rgb), 0.55); } .aagh-concierge-panel::before { top: -7px; left: -5px; } .aagh-concierge-panel::after { bottom: -7px; right: -5px; } .aagh-concierge-panel .aagh-concierge-meta { margin-bottom: 0.6rem; } .aagh-concierge-title { font-family: var(--font-sans); font-size: 1.6rem; font-weight: 300; line-height: 1.2; margin-bottom: 1.25rem; } .aagh-concierge-close { position: absolute; top: 1.1rem; right: 1.1rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 50%; color: rgba(var(--agc-text-rgb), 0.52); font-size: 1rem; line-height: 1; transition: color 0.3s ease, border-color 0.3s ease; } .aagh-concierge-close:hover { color: var(--agc-text); border-color: rgba(var(--agc-text-rgb), 0.13); } .aagh-concierge-item { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; border-top: 1px solid rgba(var(--agc-text-rgb), 0.13); transition: padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .aagh-concierge-item:hover { padding-left: 0.5rem; } /* The rows fall into place one after another when the panel opens: fourteen pixels of travel over 0.62s, 85ms apart, with the opacity finished at 60% of that travel so a row is fully there while it is still settling. Keyed to .is-open, so it replays on every open and resets on close. The delay comes from the row's position among its siblings, because the rows have no wrapper of their own -- they are a run inside .aagh-concierge-scroll, after the eyebrow and the title. With the shipped defaults those two take children 1 and 2, so the first row lands two steps in; a panel whose eyebrow and title have been cleared starts a step or two earlier. The rhythm between the rows is the same either way. */ .aagh-concierge.is-open .aagh-concierge-item { animation: aghcItemIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.160s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(2) { animation-delay: 0.245s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(3) { animation-delay: 0.330s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(4) { animation-delay: 0.415s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(5) { animation-delay: 0.500s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(6) { animation-delay: 0.585s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(7) { animation-delay: 0.670s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(8) { animation-delay: 0.755s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(9) { animation-delay: 0.840s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(10) { animation-delay: 0.925s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(11) { animation-delay: 1.010s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(12) { animation-delay: 1.095s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(13) { animation-delay: 1.180s; } .aagh-concierge.is-open .aagh-concierge-item:nth-child(14) { animation-delay: 1.265s; } /* The icon disc grows inside its own row's timeline -- it holds, then opens, a beat behind the row it belongs to. `inherit` takes the row's delay, so the fourteen delays above are written once rather than twice. */ .aagh-concierge.is-open .aagh-concierge-item .aagh-concierge-node { animation: aghcNodeIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: inherit; } @keyframes aghcItemIn { from { opacity: 0; transform: translateY(-14px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes aghcNodeIn { 0%, 18% { transform: scale(0.86); } to { transform: scale(1); } } /* Motion off: the rows are simply there when the panel is. */ @media (prefers-reduced-motion: reduce) { .aagh-concierge.is-open .aagh-concierge-item, .aagh-concierge.is-open .aagh-concierge-item .aagh-concierge-node { animation: none; } } } .aagh-concierge-node { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--agc-accent-rgb), 0.35); border-radius: 50%; transition: border-color 0.3s ease; } .aagh-concierge-item:hover .aagh-concierge-node { border-color: var(--agc-accent); } .aagh-concierge-node svg { width: 16px; height: 16px; fill: var(--agc-accent); } .aagh-concierge-item b { display: block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--agc-text); transition: color 0.3s ease; } .aagh-concierge-item:hover b { color: var(--agc-accent); } .aagh-concierge-item small { display: block; font-size: 0.7rem; color: rgba(var(--agc-text-rgb), 0.52); margin-top: 0.2rem; } .aagh-concierge-note { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid rgba(var(--agc-text-rgb), 0.13); font-size: 0.58rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(var(--agc-text-rgb), 0.52); } .aagh-concierge-note::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--agc-accent); flex-shrink: 0; } @media (max-width: 640px) { .aagh-concierge { right: 1rem; bottom: 1rem; } .aagh-concierge-label { display: none; } .aagh-concierge-panel { position: fixed; left: 1rem; right: 1rem; bottom: 5.5rem; width: auto; } .aagh-concierge.is-open .aagh-concierge-veil { background: rgba(var(--agc-deep-rgb), 0.65); } } @media (max-width: 400px) { .aagh-concierge { right: 0.75rem; bottom: 0.75rem; } } @media (prefers-reduced-motion: reduce) { .aagh-concierge-pulse { animation: none; opacity: 0; } .aagh-concierge-btn { animation: none; } } /* Scoped resets. EI gets these from `a {}` and `button {}` at the top of its stylesheet; a panel that travels has to bring them, and must not impose them on the site it lands in -- hence the scope. :where() so they carry NO specificity. Written plainly, `.aagh-concierge button` is (0,1,1) and beats `.aagh-concierge-btn` at (0,1,0) -- which stripped the launcher's fill and border on all nine sites at once. At zero specificity they still beat the browser's defaults, which is all they are for, and lose to every rule of the panel's own. */ :where(.aagh-concierge) :where(a) { color: inherit; text-decoration: none; } :where(.aagh-concierge) :where(button) { background: none; border: none; font-family: inherit; color: inherit; cursor: pointer; } /* The heading states its colour instead of inheriting it. EI's panel lets the h3 take the sheet's ivory by inheritance, which works because EI colours no headings of its own -- but ANY rule beats inheritance, so on a site that styles its own h3 the heading took the theme's colour and disappeared into the sheet. It did exactly that on AAC and on AAGH. The literal below is EI's ivory, so the per-site recolour rewrites it to that site's text colour like every other value here. */ .aagh-concierge-panel h3, .aagh-concierge-title { color: var(--agc-text); } /* The chat glyph shakes on the same 3.2s beat as the launcher's glow and its ping, so the three read as one gesture rather than three timers. It rests for most of the cycle -- a constant wobble stops being a signal and becomes noise. Off the moment the panel opens: the glyph rotates 45deg on its way out and an animation would fight that. */ @keyframes aagh-concierge-shake { 0%, 62%, 100% { transform: rotate(0deg); } 66% { transform: rotate(-11deg); } 70% { transform: rotate(9deg); } 74% { transform: rotate(-7deg); } 78% { transform: rotate(5deg); } 82% { transform: rotate(-3deg); } 86% { transform: rotate(0deg); } } .aagh-concierge-icon-chat { animation: aagh-concierge-shake 3.2s ease-in-out infinite; transform-origin: 50% 60%; } .aagh-concierge-btn:hover .aagh-concierge-icon-chat { animation-play-state: paused; } .aagh-concierge.is-open .aagh-concierge-icon-chat { animation: none; } @media (prefers-reduced-motion: reduce) { .aagh-concierge-icon-chat { animation: none; } } /* A tighter vertical rhythm than Edge Interior's -- see copy-chat-design.py. */ .aagh-concierge-panel { padding-top: 1.75rem; padding-bottom: 1.25rem; } .aagh-concierge-title { margin-bottom: 0.875rem; } .aagh-concierge-item { padding-top: 0.625rem; padding-bottom: 0.625rem; } .aagh-concierge-note { padding-top: 0.75rem; } /* The sheet can never be taller than the window. It hangs ABOVE the launcher, so it grows upward and runs off the TOP of the screen -- where the heading is, and where there is no scrollbar to tell you anything is missing. The reserve is the launcher (54px), its bottom offset and the gap between the two, rounded up: about 84vh on a 880px window, and derived from the launcher rather than guessed at. Real spaces around the minus: calc(a-b) is invalid and the whole declaration would be dropped. The sheet does NOT scroll. Its two '+' corner marks are ::before and ::after at bottom: -7px, deliberately outside the box -- and a scroll container counts anything past its bottom edge as content to scroll to. So an 8px decoration produced a permanent scrollbar at every content length, and was clipped out of sight into the bargain. The rows scroll instead. */ .aagh-concierge-panel { max-height: calc(100vh - 9rem); display: flex; flex-direction: column; } /* The inner column: this is what scrolls, and only once the rows genuinely outgrow the cap. Until then the sheet is exactly as tall as its content. */ .aagh-concierge-scroll { overflow-y: auto; /* Explicit, and not redundant: setting overflow-y to auto makes overflow-x compute to auto as well, and the vertical bar then narrows the content box just enough to push something over the edge -- which drew a horizontal scrollbar along the bottom of the sheet. */ overflow-x: hidden; overscroll-behavior: contain; /* Load-bearing. A flex item will not shrink below its own content, so without this the column keeps its full height, pushes the sheet past the cap, and the scrollbar comes straight back. */ min-height: 0; } /* Same treatment as the thread's, so a capped sheet does not show the browser's light scrollbar against dark ink. */ .aagh-concierge-scroll { scrollbar-width: thin; scrollbar-color: rgba(var(--agc-accent-rgb), 0.45) transparent; } .aagh-concierge-scroll::-webkit-scrollbar { width: 6px; } .aagh-concierge-scroll::-webkit-scrollbar-track { background: transparent; } .aagh-concierge-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--agc-accent-rgb), 0.45); } .aagh-concierge-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--agc-accent-rgb), 0.7); } /* --- The page behind the sheet ------------------------------------------- The veil has always been there to catch a click outside the panel, but it was transparent at every width above 640px, so the site carried on shouting behind an open conversation. It now dims and blurs at every width. backdrop-filter is missing from some browsers, and where it is the tint has to do the whole job on its own -- hence the deeper value under @supports, rather than a wash the panel cannot be read against. */ .aagh-concierge.is-open .aagh-concierge-veil { background: rgba(var(--agc-deep-rgb), 0.42); -webkit-backdrop-filter: blur(7px) saturate(0.92); backdrop-filter: blur(7px) saturate(0.92); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aagh-concierge.is-open .aagh-concierge-veil { background: rgba(var(--agc-deep-rgb), 0.66); } } /* On a phone the sheet is nearly the full width, so what shows through is a margin rather than a page. Deeper there, or those edges read as a fault. */ @media (max-width: 640px) { .aagh-concierge.is-open .aagh-concierge-veil { background: rgba(var(--agc-deep-rgb), 0.6); } } /* --- ...and it does not scroll ------------------------------------------- The holding is done by the script, which pins the position rather than setting overflow:hidden -- see lock_js for the 15px that decision cost. The class is still set on as the state hook -- it is how anything else on the page, or a probe, can tell the site is being held -- but it deliberately carries no rule of its own. */ /* --- The launcher waits for the loader ----------------------------------- The button was drawing on top of the loading screen on six of the ten sites: the widget sits at z-index 950 and those loaders sit at 99 to 500. Raising the widget would have been backwards, and matching each loader needs ten numbers that can each drift. Every site here puts a `-loading` class on before the first paint and adds `-ready` when the loader lifts -- ten different prefixes, measured on all ten. Matching the SHAPE rather than the names keeps this a widget that can be dropped into a site nobody has measured: a page that sets no such class is simply never held. In CSS and not in script, so the button is already hidden in the first paint -- a script at the end of the body runs after one, and the button would flash before hiding itself. */ html[class*="-loading"]:not([class*="-ready"]) .aagh-concierge { opacity: 0; visibility: hidden; pointer-events: none; } /* Fades in behind the loader lifting rather than appearing with it. */ .aagh-concierge { transition: opacity 0.5s ease 0.15s; } /* Quick answers — a second view inside the same sheet. * * Not a chat with a model: a fixed set of questions, each with an answer * written by the company. It borrows the panel's own custom properties, so it * arrives in whatever colours that site already set and needs no per-site rules. * * Loaded only when the site actually has questions, so a site that has not set * any pays nothing for it. */ /* The Quick answers row is a