/* AI Ellie chat widget — MyPashmina. Refinement round 260729 (Paul's "final premium" direction, with two reference renders — light and dark). The plum/sage accent scheme is RETIRED: the widget now runs on warm neutrals alone, with black (light mode) / cream (dark mode) as the single primary. The design must read as a luxury retailer or hotel concierge, never as a chatbot, and the two themes must read as one product seen twice — not two designs. Values below are sampled from Paul's renders, not invented. The five rules that keep it there: · separation comes from SPACING, SHADOW and ALIGNMENT — never from an outline you can see or a coloured box; · shadows are paper-resting-on-paper, never Material elevation; · typography is the design; corners stay generous; · exactly one accent family (warm sand) for "selected"/"done"; · nothing purple, blue or neon, in either theme. */ :root { /* warm ivory — NOT pure white; white is reserved for the customer's own bubbles so they read as sitting on top of the page */ --aec-ivory: #faf8f4; --aec-ivory-2: #f1ede5; /* customer name pill — a warm neutral grey that clears BOTH the white bubble and the ivory window (Paul 260722; the old blue nudge went with the "no blue" ruling 260729) */ --aec-tag-customer: #dedbd5; /* bubbles are FLAT now (260729): the old top-to-bottom gradients read as a device, and depth is the shadow's job. The -2 tokens are kept equal to their tops so any remaining gradient is a no-op. */ --aec-surface-2: #ffffff; --aec-bubble-agent-2: #f1e9de; /* Ellie's bubble: warm beige, sitting CLEARLY below the ivory page. It used to be #f6f2ea — "a breath below", which on a real screen was no separation at all (Paul 260802: "the bubbles do not contrast enough from the background"). #f1e9de is his hex; it takes the bubble/page ratio from 1.05 to 1.13, roughly tripling the step, while staying inside the warm-neutral palette. The customer's bubble stays pure white — it is already at the ceiling, so its separation comes from the (now stronger) shadow below. */ --aec-bubble-agent: #efe6d6; /* Ellie's name pill, darkened with her bubble so it still reads as a pill sitting on top of it (1.17 against the bubble, 1.33 the page) */ --aec-bubble-agent-line: #e3d8c5; /* soft warm ring for calm "listening"/success pulses */ --aec-sage-ring: rgba(160, 140, 112, .28); --aec-surface: #ffffff; /* the customer's message bubble only — see .aec-msg-bubble */ --aec-bubble-customer: #ffffff; --aec-bubble-customer-line: #e5ded1; --aec-charcoal: #1a1917; --aec-charcoal-soft: #5d574e; /* --aec-ink replaces the retired plum: quiet near-black emphasis for links, typing dots and spinners. Colour is NOT the affordance any more — links carry weight + underline, so the ink can be the same black as body copy (§1 "black text", §2 "no coloured boxes"). */ --aec-ink: #1a1917; --aec-focus: #1a1917; /* the single accent family: warm sand. Used for the selected chip, the done-tick disc and quiet fills — never for text emphasis. */ --aec-accent: #f2eae0; --aec-accent-line: #e6dbcb; --aec-chip-on-bg: #f0e7da; --aec-chip-on-fg: #1a1917; /* "sage" survives only as the human-colleague identity and the done tick — desaturated so it belongs to a warm neutral palette */ --aec-sage: #8d9a80; --aec-sage-text: #5c6b4f; --aec-sage-bg: #eef0e8; /* the colleague's name pill, darkened off his bubble by the same step Ellie's is off hers (~1.16) — since the bubble lost its outline (Paul 260818), the pill's own shade is what says "a pill sitting on top of it" */ --aec-sage-tag: #dee0d8; --aec-line: #e7e2d9; --aec-danger: #9c4a3c; /* the same red with a third of the saturation, for a destructive row that is resting rather than warning */ --aec-danger-quiet: #8a5f57; --aec-danger-bg: #9c4a3c; /* hover DARKENS. The old rule brightened, which on a filled danger button walks the ground towards its own white text (Paul 260811 #1). */ --aec-danger-hover: #7d3628; /* ONE primary: black in light, cream in dark. -fg travels with it so every primary control flips text colour with the theme. */ --aec-primary-bg: #141312; --aec-primary-hover: #33302c; --aec-primary-fg: #ffffff; --aec-banner-bg: #f3ece0; --aec-banner-text: #1a1917; /* nudged down with Ellie's darker bubble — 4.51:1 there was AA by a hair, #6b655c restores headroom (4.79 on her bubble, 5.77 on white) */ --aec-time: #6b655c; --aec-radius: 16px; --aec-gutter: 16px; /* ONE horizontal grid for all rows */ /* 70px while the bar carried a two-line tagline; 56px now that it carries two controls and nothing else (Paul 260813). Every header offset in this file derives from it, so the whole screen moves up with it — which is where the reclaimed room goes. */ --aec-head-h: 56px; --aec-glass: rgba(250, 248, 244, .84); /* header only: airier glass so scrolling text ghosts through (260721h #3) — and one step LESS airy once scrolled, so the controls stay crisp over moving text (260813) */ --aec-glass-head: rgba(250, 248, 244, .68); --aec-glass-head-scrolled: rgba(250, 248, 244, .88); /* the header's own hairline: a shade stronger than the general glass line, because it fades to nothing across the empty half and needs to still register where it does land */ --aec-head-line: rgba(26, 25, 23, .11); /* the intro's primary launcher: ~10% darker than --aec-surface in HSL lightness (100% → 89%), same warm hue as the rest */ --aec-welcome-primary: #ede7de; --aec-welcome-primary-hover: #e5ded2; --aec-welcome-primary-line: #ded5c7; /* placeholder text: a step darker than the general soft grey, which on the composer's pale ground was close to reading as disabled */ --aec-placeholder: #4f4a42; /* the wash behind an open menu — a suggestion of depth, never a modal veil */ --aec-scrim: rgba(26, 25, 23, .04); /* the greeting's robot: 30 points of HSL lightness QUIETER than the word beside it (--aec-ink, L 9.6% → 39.6%). It is the mark for who is speaking, not a second headline. */ --aec-hello-bot: #6b665f; /* the raised cell inside a segmented pill (chosen Appearance, and the A− / A+ ends of Text size) */ --aec-seg-raised: #ffffff; /* light: Send IS the primary — black on cream, nothing to soften */ --aec-send-bg: var(--aec-primary-bg); --aec-send-hover: var(--aec-primary-hover); --aec-send-fg: var(--aec-primary-fg); /* waiting, not refusing: the disc recedes to the composer's own surface and the arrow to the quiet ink — still legible, no longer the loudest thing on an empty screen */ --aec-send-idle-bg: #efece6; --aec-send-idle-fg: #8b857b; /* input box: its own tint — dark must run MUCH airier or the ghosting is invisible on real phones (260722q). A LIGHTER shade than the panel around it (Paul, 260820d). Light mode has almost no headroom left — the panel is already ivory at 96.9% lightness — so the step is taken to pure white and held a little more opaque, which is what actually separates the typing area from the wash behind it. */ --aec-glass-input: rgba(255, 255, 255, .78); /* The line above the typing area, 50% lighter (Paul, 260820d: "similar colour to right hand end of top divider line"). Those two halves point in slightly different directions — the header line's strong end is `--aec-head-line`, which blends to about the same value as the solid `--aec-line` rather than a lighter one — so this takes the instruction literally: `--aec-line` (#e7e2d9) halfway to the ivory behind it, in the same warm family as the header's. */ --aec-input-line: #f0ede6; --aec-glass-strong: rgba(250, 248, 244, .94); --aec-glass-line: rgba(26, 25, 23, .07); /* paper resting on paper (§12) — never Material elevation */ --aec-shadow: 0 8px 30px rgba(26, 25, 23, .1), 0 1px 3px rgba(26, 25, 23, .05); /* the white customer bubble on ivory is a 1.06 step — the tint cannot carry it, so the shadow does (Paul 260802). Still paper-on-paper. */ --aec-shadow-bubble: 0 1px 2px rgba(26, 25, 23, .07), 0 4px 14px rgba(26, 25, 23, .06); --aec-shadow-card: 0 1px 2px rgba(26, 25, 23, .04), 0 6px 20px rgba(26, 25, 23, .05); --aec-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --aec-serif: "Playfair Display", "Cormorant Garamond", Didot, Georgia, "Times New Roman", serif; /* the MyPashmina logo is Century Gothic — headers and name labels match it (Paul 260721 #7). Questrial (webfont, enqueued by the plugin) and Futura cover devices without Century Gothic. */ --aec-display: "Century Gothic", CenturyGothic, Questrial, "Futura PT", Futura, "Trebuchet MS", sans-serif; } /* ── Night mode ───────────────────────────────────────────────────── data-aec-theme on #aiellie-root is only ever "light" or "dark" — the script resolves the menu's "Auto" against the visitor's clock before it touches the DOM (Paul 260803: night mode was showing at noon because the OS said dark). One variable set restyles everything, and the byte-identical prefers-color-scheme copy that used to live below is gone with it — there is nothing left to keep in sync. */ #aiellie-root[data-aec-theme="dark"] { /* Dark: a luxury hotel lobby at night. Warm charcoal throughout — never blue-black, never purple. Ellie's bubble sits LIGHTER than the page so her text reads; the customer's sits between the two. The primary flips to cream: a black button on a near-black page is not a button. 260802: both bubbles came up. The customer's was #1e1b18 on a #141210 page — 1.09:1, which is not a bubble, it is a rumour. The ladder is now page 1.00 → customer 1.31 → Ellie 1.61, so each is plainly its own surface and they are still plainly different from each other (1.23 between them). */ --aec-ivory: #141210; --aec-ivory-2: #211d18; --aec-tag-customer: #403a33; --aec-bubble-agent: #3e3830; --aec-bubble-agent-2: #3e3830; --aec-bubble-agent-line: #524b40; --aec-surface: #1e1b18; --aec-surface-2: #1e1b18; --aec-bubble-customer: #2e2a24; --aec-bubble-customer-line: #474036; --aec-sage-ring: rgba(190, 176, 150, .3); --aec-charcoal: #f1ebe2; /* +1 step on the three quiet things: secondary text, hairlines and button outlines were all correct in isolation and collectively a little under-said (Paul 260813). Nothing here moves more than a few points — dark mode was already close. */ --aec-charcoal-soft: #b6ae9f; --aec-ink: #f1ebe2; --aec-focus: #c9bda9; --aec-accent: #2b2620; --aec-accent-line: #3b342b; --aec-chip-on-bg: #c8b6a8; --aec-chip-on-fg: #17150f; --aec-sage: #8d9a80; --aec-sage-text: #a8b79a; /* lifted with the other two bubbles — the human colleague's must not be the one surface left sitting in the page (mic-on shares it) */ --aec-sage-bg: #333a2c; /* lightened off the bubble in dark, same step as Ellie's pill */ --aec-sage-tag: #474d3c; --aec-line: #3d3831; --aec-danger: #d38a79; --aec-danger-quiet: #bb9186; --aec-danger-bg: #7f3d31; --aec-danger-hover: #96493a; --aec-primary-bg: #decdc0; --aec-primary-hover: #ecdccf; --aec-primary-fg: #17150f; --aec-banner-bg: #322a20; --aec-banner-text: #f0e5d2; /* tuned against Ellie's bubble, the LIGHTEST surface a timestamp sits on in dark mode. She moved to #3e3830, which took the old #a49c8d to 4.26:1 — under AA; #b0a898 restores it (4.91 on her bubble, 6.04 on the customer's) */ --aec-time: #b0a898; --aec-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --aec-shadow-bubble: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .22); --aec-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .26); --aec-glass: rgba(20, 18, 16, .82); --aec-glass-head: rgba(20, 18, 16, .64); --aec-glass-head-scrolled: rgba(20, 18, 16, .86); /* the same 10% step, in the direction dark mode has room for: rgb(24,21,18) is 8.2% lightness, so 18.2% lands here (260820d) */ --aec-glass-input: rgba(53, 46, 40, .5); /* dark keeps the panel's own divider: the border is already a light line on a dark ground, so "lighter" would erase it. */ --aec-input-line: var(--aec-line); --aec-glass-strong: rgba(20, 18, 16, .94); --aec-glass-line: rgba(241, 235, 226, .13); --aec-head-line: rgba(241, 235, 226, .16); /* the same 10% step, in the other direction: LIGHTER than the surface the secondaries are filled with (10.6% → 20.6%) */ --aec-welcome-primary: #3b342e; --aec-welcome-primary-hover: #473f37; --aec-welcome-primary-line: #4a4239; --aec-placeholder: #b6ae9f; --aec-scrim: rgba(0, 0, 0, .16); /* the same 30 points of quiet, in the other direction: DARKER than the word it stands beside (--aec-ink, L 91.6% → 61.6%) */ --aec-hello-bot: #a99f91; /* dark's --aec-surface is within a point of the pill's own ground, so a raised cell filled with it would be invisible — it needs its own step up */ --aec-seg-raised: #37312b; /* Send is the only PLACE the warm cream primary sits on its own, surrounded by neutral dark — which is what made it read as peach rather than as "the primary, in dark" (Paul 260813). It keeps the primary's job and loses the warmth: a near-neutral bone, same lightness, a third of the saturation. Everything else the primary fills (switches, hovers) sits ON something and is left alone. */ --aec-send-bg: #ded9d2; --aec-send-hover: #ece7e0; --aec-send-fg: #17150f; --aec-send-idle-bg: #2b2722; --aec-send-idle-fg: #7d766c; } /* page lock while the mobile chat is open — the underlying WordPress page neither scrolls nor peeks through */ html.aec-locked, html.aec-locked body { overflow: hidden !important; height: 100%; } html.aec-locked body { position: fixed; width: 100%; } #aiellie-root, #aiellie-root * { box-sizing: border-box; } /* display:flex on the widget containers would otherwise defeat the hidden attribute — a hidden window must never intercept clicks. */ #aiellie-root [hidden] { display: none !important; } #aiellie-root { font-family: var(--aec-font); /* --aec-font-scale: customer-set via the menu's Font size − / + */ font-size: calc(16.5px * var(--aec-font-scale, 1)); line-height: 1.5; color: var(--aec-charcoal); font-weight: 400; } #aiellie-root button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* every button eases to 96% while pressed (260721h #6). :where() keeps specificity at zero so component transition lists still win — any rule declaring its own `transition` must include transform. */ :where(#aiellie-root) button { transition: transform .09s ease; } :where(#aiellie-root) button:active:not([disabled]) { transform: scale(.96); } #aiellie-root button:focus-visible, #aiellie-root a:focus-visible, #aiellie-root textarea:focus-visible, #aiellie-root input:focus-visible { outline: 2px solid var(--aec-focus); outline-offset: 2px; } @media (max-width: 640px) { #aiellie-root { font-size: calc(17px * var(--aec-font-scale, 1)); line-height: 1.5; } } /* ── Launcher ─────────────────────────────────────────────────────── */ /* #aiellie-root prefix everywhere: theme button styles were washing the launcher out to white-on-light-grey on the shop (Paul 260721 #8) */ /* 260729: the launcher is the first thing anyone sees of the chat, so it is held to the same rules as the panel — one solid primary, no plum gradient, no ✦ sparkles (§4: the decorative AI/star mark goes and is NOT replaced), no sheen/glow/wiggle loop (§14: nothing flashy). What is left is a quiet pill in the shop's own ink. */ /* Paul 260809d: "move launcher on desktop to a better position and also put the hide button in. so it is more similar to mobile version". Both rigs now work the same way. The launcher stands on the centre line of the panel it becomes, at the height the composer's ▾ Hide chat pill will occupy — so on desktop, as on a phone, the chat goes back into the button your pointer is already on. Derived from the panel's own geometry (--aec-dock-*), never from a number typed twice: the band below is deliberately asymmetric so that `margin: auto` centres the pill on the PANEL's centre rather than the viewport's. It also bought the desktop its enlarged-icon moment. The old corner position had the launcher inside the window's own bottom-right corner with half its height beneath it, so the handover rectangle could not grow at all without being cropped by the window edge, and desktop fell back to a plain swap at natural size. On the centre line there is room, and desktop now animates exactly as the phone does. */ :root, #aiellie-root { --aec-dock-right: 22px; /* the panel's own offset */ --aec-dock-w: 420px; /* the panel's own width */ /* the centre line of the launcher, above the bottom of the SCREEN: the panel's 22px offset plus the 36px the Hide pill sits at */ --aec-anchor-centre: 58px; } #aiellie-root .aec-launcher { position: fixed; z-index: 99990; left: 0; right: calc(2 * (var(--aec-dock-right) + var(--aec-dock-w) / 2) - 100vw); margin-left: auto; margin-right: auto; width: -moz-fit-content; width: fit-content; bottom: calc(var(--aec-anchor-centre) - 24px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 9px; padding: 14px 22px; /* the pill's own fill is on ::before, not here — see the living edge below: the light has to get UNDER the button, and a child cannot paint beneath its parent's own background */ background: transparent; color: var(--aec-primary-fg); border: 0; border-radius: 28px; box-shadow: var(--aec-shadow); font-family: var(--aec-display); font-size: 16px; font-weight: 600; letter-spacing: .01em; transition: transform .09s ease; /* the fourth number tuned alongside the living edge's colours, live, against the same rendered picture — kept as a filter rather than baked into the gradient stops because a browser's saturate-filter math (a matrix operation on rendered RGB) is not the same arithmetic as scaling each colour's own HSL saturation by hand; baking it would not reproduce what was actually approved */ filter: saturate(300%); } /* the green "we're online" dot went with the header's status indicator (§3) — a launcher that is there IS the availability signal */ .aec-launcher .aec-badge { margin-left: 2px; } /* ── The living edge (Paul, 260823, redone 260824) ───────────────── Three looks in a day, all three ruled on by him: > it looks bad. the colour glow reveals a straight edge. it doesnt > move smoothly. too faded. too low quality > > try this [the Gemini rotating conic-gradient border] — which gave the RING below: a conic gradient on a square behind the button, clipped to the pill, with the button's own surface sitting inside it. A vector, so it is exact at any size and any pixel density, never blurred, never faded, never a photograph. Then, tuned by hand in a standalone playground and handed back as a settings block ("implement with these settings"), the GLOW arrived: three independent balls behind the ring, each drifting/breathing/ deforming on its own — see livingEdge() in aiellie.js for what that needed to change (a `requestAnimationFrame` loop in place of the ring's old `@keyframes` rotation, so an UNEVEN turning speed and balls that wander are even expressible). The ring's own gap-proof geometry is untouched by any of it — see the JS. BOTH controls carry it, and the minimised tab is the important one: nothing in the widget ever puts windowMode back to 'closed', so the launcher is what a FIRST-TIME visitor sees and the ▾ tab is what everybody else sees, forever. Layers, in this order, inside the control's own stacking context: z -1 .aec-glow three drifting balls — NOT clipped, free to peek past the pill on any side z 0 .aec-edge the clipped, rotating gradient ring — inert z 1 ::before the surface, inset by the ring's width z 2 the label 'Ask AI Ellie' / '💬 Chat', and its badge Both are CHILDREN of the control on purpose. Every transform the launcher already owns — the visual-viewport lift, the press-scale, the morph's per-axis scale — carries them without a second writer for their position, which is the mistake the 260809 round paid for once already. */ :root, #aiellie-root { --aec-ring: 1px; /* one palette, read by the ring AND every glow ball — tuned in the playground as hue/sat/bright per colour; kept here as literal hex for the same reason the first round avoided color-mix(): baseline compatibility over syntax convenience. First colour repeated at the end so the sweep closes without a seam. */ --aec-gradient: conic-gradient(#5c83c1, #8658bb, #f3dddf, #d0a93e, #5c83c1); } /* The clip. overflow:hidden plus the pill's own radius is what turns a spinning square into a ring; border-radius: inherit so it can never disagree with the button it is cut from. */ #aiellie-root .aec-launcher .aec-edge, #aiellie-root .aec-mintab .aec-edge { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; /* it must never eat the tap it is advertising */ pointer-events: none; animation: aec-edge-in .5s ease both; } /* The gradient itself. Sized and centred by the JS — a square of the button's own diagonal, which is the smallest one that still covers the button at every angle. Its rotation is written by JS every frame now (`requestAnimationFrame`, not `@keyframes`) — the only way to give it an UNEVEN turning speed — but nothing here changed to allow that: the browser doesn't care who sets `transform`, only that nothing else about the element (its shape, above all) also moves. */ #aiellie-root .aec-edge-spin { position: absolute; background: var(--aec-gradient); will-change: transform; } @keyframes aec-edge-in { from { opacity: 0; } to { opacity: 1; } } /* The glow: three balls, NOT clipped — the halo is meant to escape the pill on whichever side a ball has drifted toward. Shape, size and position are written by JS every frame (see livingEdge in aiellie.js); this only declares what CSS is allowed to touch. */ #aiellie-root .aec-launcher .aec-glow, #aiellie-root .aec-mintab .aec-glow { position: absolute; inset: 0; z-index: -1; overflow: visible; pointer-events: none; animation: aec-edge-in .5s ease both; } #aiellie-root .aec-glow-ball { position: absolute; background: var(--aec-gradient); will-change: transform; } /* Dark while the chat is in flight. The morph scales whichever control the chat is coming out of by the panel's own ratio — on a phone that is ~8x — and there is nothing to see under a button already fading to nothing. It comes back when the flight settles, with the fade-in. */ #aiellie-root .aec-launcher.aec-morphing-anchor .aec-edge, #aiellie-root .aec-launcher.aec-morphing-anchor .aec-glow, #aiellie-root .aec-mintab.aec-morphing-anchor .aec-edge, #aiellie-root .aec-mintab.aec-morphing-anchor .aec-glow { display: none; } @media (prefers-reduced-motion: reduce) { /* Asked for less motion: the colours stay, nothing turns or drifts. livingEdge()'s own sync() is what actually stops the JS loop; this is only the CSS-side guard for the mount fade. */ #aiellie-root .aec-edge, #aiellie-root .aec-glow { animation: none; } } /* The surface, inset by the ring so the ring is what shows around it. This is the fill that used to be `background` on the button itself — a child cannot paint beneath its parent's own background, and the light has to come from behind. */ #aiellie-root .aec-launcher::before { content: ''; position: absolute; inset: var(--aec-ring); z-index: 1; border-radius: inherit; background: var(--aec-primary-bg); transition: background-color .16s ease; } #aiellie-root .aec-launcher:hover::before { background: var(--aec-primary-hover); } /* The tab is frosted glass rather than solid ink, so its ::before takes the backdrop-filter with it. Its own hairline border goes transparent rather than away: it is part of the layout box, and removing it would have taken 2px off the tab and shifted its text. */ #aiellie-root .aec-mintab::before { content: ''; position: absolute; inset: var(--aec-ring); z-index: 1; border-radius: inherit; background: var(--aec-glass-strong); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } #aiellie-root .aec-launcher > span, #aiellie-root .aec-mintab > span { position: relative; z-index: 2; } /* mobile: the launcher sits ON the Hide-chat pill's spot (260809b). It used to sit 102px up — Paul 260720, because a bottom-22px launcher fell below the visible fold on pages with odd layout viewports. That ruling is superseded by his 260809 one ("it should be right at the bottom of the screen ... in exactly the same place as the hide chat button"), and the fold problem keeps its OTHER guard from that same round: positionFloaters() measures the overhang and lifts by exactly it, which the static 80px was only ever an approximation of. 36px above the bottom is not a taste: it is where the composer puts ▾ Hide chat (an 18px gap under a 36px pill), and the two controls are the same journey in opposite directions. The offsets below are that centre line minus each control's own half-height, so a customer who hides the chat watches it shrink into the button their thumb is already on. --aec-anchor-centre keeps the two in step; the E2E asserts the centres land within 2px of each other. */ @media (max-width: 640px) { /* #aiellie-root prefix: must outrank the base launcher rule, which carries the same prefix to beat theme button styles */ #aiellie-root .aec-launcher, #aiellie-root .aec-mintab { /* full screen, so the panel's bottom IS the screen's bottom and the Hide pill's 36px is measured straight off it */ --aec-anchor-centre: 36px; right: 0; /* BOTTOM CENTRE on a phone (260809). The chat now grows out of the launcher and shrinks back into it, and a full-screen panel can only plausibly come from — and return to — a point on its own centre line. A right-corner anchor made the expansion read as a diagonal wipe; centred, it reads as the button opening. Centred with auto margins, NOT translateX(-50%): the transform channel belongs to positionFloaters() (visual-viewport lift) and to the press-scale, and a second writer silently wins. */ left: 0; right: 0; margin-left: auto; margin-right: auto; width: -moz-fit-content; width: fit-content; max-width: calc(100vw - 32px); } /* 48px tall (14px padding + 20px line) */ #aiellie-root .aec-launcher { bottom: calc(var(--aec-anchor-centre) - 24px + env(safe-area-inset-bottom)); } /* 46px tall (12px padding + 22px line) */ #aiellie-root .aec-mintab { bottom: calc(var(--aec-anchor-centre) - 23px + env(safe-area-inset-bottom)); } } /* ── Minimised tab ────────────────────────────────────────────────── */ .aec-mintab { position: fixed; z-index: 99990; left: 0; right: calc(2 * (var(--aec-dock-right) + var(--aec-dock-w) / 2) - 100vw); margin-left: auto; margin-right: auto; width: -moz-fit-content; width: fit-content; bottom: calc(var(--aec-anchor-centre) - 23px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; /* 13px, not 12px + a 1px border. The hairline border is gone — the rainbow ring is the tab's edge now — and its width moved into the padding so the box is the same 46px it has always been (13 + 20 + 13), which the morph's anchor arithmetic depends on. It had to go rather than merely turn transparent: `inset: 0` on an absolutely positioned child resolves against the PADDING box, so a 1px border held the ring 1px inside the tab and left its outermost pixel showing the shop's page. The launcher, which has no border, was fine — which is exactly why the ring check asks both. */ padding: 13px 19px; filter: saturate(300%); /* same fourth number, see .aec-launcher */ /* glass and blur are on ::before, above the living edge — see it */ background: transparent; color: var(--aec-charcoal); border: 0; border-radius: 26px; box-shadow: var(--aec-shadow); font-family: var(--aec-display); font-size: 15px; font-weight: 600; } .aec-mintab .aec-spinner { width: 15px; height: 15px; } .aec-mintab-status { color: var(--aec-charcoal-soft); font-size: 14px; font-weight: 400; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aec-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--aec-primary-bg); color: var(--aec-primary-fg); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } /* ── Window ───────────────────────────────────────────────────────── */ .aec-window { position: fixed; right: 22px; bottom: 22px; z-index: 99991; width: 420px; height: 95vh; max-height: calc(100vh - 44px); max-width: calc(100vw - 44px); min-width: 330px; min-height: 430px; background: var(--aec-ivory); border: 1px solid var(--aec-line); border-radius: var(--aec-radius); box-shadow: var(--aec-shadow); display: flex; flex-direction: column; overflow: hidden; resize: none; /* the top-left grip does the resizing */ } .aec-window.aec-max { width: min(780px, calc(100vw - 44px)); height: calc(100vh - 44px); resize: none; } .aec-window.aec-docked { top: 0; right: 0; bottom: 0; left: auto; height: 100vh; max-height: none; max-width: none; min-width: 340px; border-width: 0 0 0 1px; border-radius: 0; box-shadow: -2px 0 10px rgba(38, 36, 31, .06); } html.aec-dock-active body { width: calc(100% - var(--aec-dock-width)); max-width: calc(100% - var(--aec-dock-width)); overflow-x: clip; transition: width .18s ease, max-width .18s ease; } html.aec-resizing, html.aec-resizing * { cursor: col-resize !important; user-select: none !important; } html.aec-resizing body { transition: none; } html.aec-dock-preferred:not(.aec-dock-active) #aiellie-root .aec-launcher, html.aec-dock-preferred:not(.aec-dock-active) #aiellie-root .aec-mintab { /* The closed control occupies the same horizontal band as the open dock. Auto margins therefore put its centre on the composer's centred Hide-chat button, regardless of the saved dock width. */ left: calc(100vw - var(--aec-dock-width)); right: 0; margin-left: auto; margin-right: auto; } @media (max-width: 640px) { .aec-window, .aec-window.aec-max { position: fixed; inset: 0; right: 0; bottom: 0; top: 0; left: 0; width: 100vw; height: 100%; height: 100dvh; max-width: 100vw; max-height: 100dvh; /* the desktop floor is not a floor here: full screen IS the size, and 330px of it on a 320px phone hung 10px off the right edge — enough to put the chat's own centre line 5px off the launcher's (found at 320px, 260809) */ min-width: 0; min-height: 0; border-radius: 0; border: 0; resize: none; z-index: 2147483000; /* above any theme/shortcode stacking */ } .aec-head { padding-top: env(safe-area-inset-top); height: calc(var(--aec-head-h) + env(safe-area-inset-top)); } } /* ── Launcher ⇄ window morph (260809) ────────────────────────────── The chat must be SEEN to come out of the launcher and go back into it. On a phone the full-screen panel otherwise arrives like a page navigation — the customer's own words for it are "where has the shop gone?" — and the answer is not to shrink the chat, it is to show the journey. The geometry is computed in the JS (morphWindow) from the launcher's real bounding rect, so there is no hard-coded origin here and the anchor stays true at any width, orientation, safe-area inset or scroll position. This block only declares what the transition is allowed to touch. */ .aec-window.aec-morphing { /* the panel is mid-flight: nothing in it is a real target yet, and a tap landing on a half-grown control is a tap the customer did not mean to make */ pointer-events: none; /* NO will-change (260809c). It was here on the usual reasoning — tell the browser what is about to move — and measurement says it makes this animation worse, not better: promoting a full-screen panel to its own layer AND hinting clip-path pushes Chrome onto a path that re-rasters the whole layer per frame. Interleaved A/B at 6x CPU throttle, 12 flights each: worst frame per flight median 84ms → 75ms and p90 186ms → 130ms with the hint REMOVED. A hint that costs memory and buys nothing does not stay. */ } /* The panel, rendered once while nobody is looking (260809c). A chat that has never been opened has never been laid out or painted either, and that bill falls due in the frame the customer taps — on a mid-range phone, measured at 6x CPU throttle, it held the panel frozen at launcher size for 214–448ms before the transition could even start, and in the worst trial the whole 300ms flight played four frames. Doing it once at idle moves the cost to a moment nobody is watching. Invisible and untouchable while it happens; a class rather than inline styles so it cannot collide with the morph's own opacity if the customer taps mid-warm. */ .aec-window.aec-warming { opacity: 0 !important; pointer-events: none !important; } /* the launcher cross-fades with the panel it becomes — set by the JS, which owns the timing so open and close stay mirror images */ #aiellie-root .aec-launcher.aec-morphing-anchor, #aiellie-root .aec-mintab.aec-morphing-anchor { pointer-events: none; } @media (prefers-reduced-motion: reduce) { /* asked for less motion: the chat simply IS open, or IS closed. No scale, no travel — the JS skips the whole morph, and this is the guard for anything that reaches the element another way. */ .aec-window.aec-morphing { transition: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; } #aiellie-root .aec-launcher.aec-morphing-anchor, #aiellie-root .aec-mintab.aec-morphing-anchor { transition: none !important; } } /* drag-and-drop target (Paul 260804) — a drop with no visible target is a guess, and a guess that fails opens the file in the browser and loses the page. An ::after overlay rather than a border so nothing in the conversation reflows while the pointer is over it, and pointer-events:none so it can never eat the drop it is advertising. */ .aec-window.aec-dropping::after { content: 'Drop your photo here'; position: absolute; inset: 12px; z-index: 60; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--aec-primary-bg); border-radius: calc(var(--aec-radius) - 4px); background: var(--aec-glass-head); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); color: var(--aec-ink); font-size: 16px; font-weight: 500; pointer-events: none; } /* header — floats over the conversation (functional glass): messages scroll beneath it into the fade. 260813: the bar holds Human help and Menu, both on the right, and nothing at all on the left. Two consequences are deliberate: * the rule beneath it FADES OUT towards the empty side. A hard full-width line under an empty left half draws a border around nothing; a line that arrives with the controls reads as their underscore. (border-bottom cannot be a gradient, so the line is an ::after — it also lets the scrolled state raise only the line's opacity without touching the bar's own geometry.) * at rest the glass is airy enough for text to ghost through; on scroll it thickens (see .aec-head-shadow below) so passing messages stay faint while the controls stay crisp. */ .aec-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: var(--aec-head-h); display: flex; align-items: center; gap: 6px; /* buttons sit ~10px further right on desktop (Paul 260723 #6); the mobile media block restores the full gutter */ padding: 0 6px 0 var(--aec-gutter); background: var(--aec-glass-head); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); transition: background-color .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease; } .aec-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; /* transparent at the empty left, full strength under the controls */ background: linear-gradient(to right, transparent 0%, var(--aec-head-line) 46%, var(--aec-head-line) 100%); opacity: .7; transition: opacity .25s ease; } /* the empty left half — a flex spacer, so Human help and Menu are pushed to the right without either of them having to know it */ .aec-head-space { flex: 1 1 auto; min-width: 0; } /* (collapsing header removed — Paul 260722r: it stays as it is) */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aec-head { background: var(--aec-glass-strong); } .aec-window.aec-dropping::after { background: var(--aec-glass-strong); } } /* (.aec-head-id / .aec-title / .aec-tagline are GONE — Paul 260813. The name and the tagline moved into the greeting bubble; the rules went with the markup rather than being left behind as dead weight that a later round would have to guess about.) */ /* SCROLLED (§3): content passing behind must stay faint while the controls stay crisp — so the glass thickens and the blur deepens, and the fading rule comes up a little to say the bar is now sitting ON something. Explicitly NOT a drop shadow (Paul 260813): a shadow lifts the bar off the page and the widget is paper on paper (§12). */ .aec-window.aec-head-shadow .aec-head { background: var(--aec-glass-head-scrolled); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } .aec-window.aec-head-shadow .aec-head::after { opacity: 1; } /* (the hairline between Human help and Menu is REMOVED — Paul 260730. It read as a vertical rule floating in the header on desktop; the gap already separates them. The element is gone from the JS too, not merely hidden.) */ /* one gap value everywhere in the header row (Paul 260723 #7) */ .aec-headbtns { display: flex; gap: 6px; flex: 0 0 auto; } .aec-headbtns .aec-iconbtn { flex: 0 0 auto; } .aec-iconbtn { min-width: 36px; height: 38px; border: 1px solid var(--aec-glass-line); background: transparent; transition: height .18s ease, min-width .18s ease, transform .09s ease, background-color .12s ease; border-radius: 9px; color: var(--aec-charcoal-soft); font-size: 17px; line-height: 1; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; } .aec-iconbtn:hover { background: var(--aec-ivory-2); } /* (the top-left collapse chevron was removed 260721d #2 — unclear and messy; the labelled bottom-right Hide button minimises on mobile) */ /* the word "Menu" shows EVERYWHERE (Paul 260723 #1 — desktop had a bare ☰) */ .aec-menu-label { display: inline; font-size: 13.5px; font-weight: 600; } /* tighter (Paul 260813) — the bars and the word were carrying 7px of air each side plus the icon button's own 6px */ .aec-btn-menu { padding: 0 4px; gap: 5px; white-space: nowrap; width: auto; } .aec-menu-bars { display: inline-flex; align-items: center; } .aec-menu-bars svg { width: 17px; height: 17px; display: block; } @media (max-width: 640px) { .aec-head { padding: 0 var(--aec-gutter); } .aec-btn-max { display: none; } /* (the '–' is gone, 260809d) */ } /* chips — a second glass strip under the header (the direct child only; inline chip rows inside the log keep normal flow) */ .aec-window > .aec-chips { position: absolute; top: var(--aec-head-h); left: 0; right: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px var(--aec-gutter); background: var(--aec-glass); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--aec-glass-line); } @media (max-width: 640px) { .aec-window > .aec-chips { top: calc(var(--aec-head-h) + env(safe-area-inset-top)); } } /* §11 — the layout is unchanged; only the contrast drops. The SELECTED chip is a warm sand fill (no border at all, so it reads as chosen rather than outlined); the others are quiet surfaces behind a hairline. Nothing becomes colourful. */ .aec-chip { /* ~10% smaller (Paul 260723 #3) */ font-size: 12.5px; font-weight: 500; padding: 6px 13px; border-radius: 8px; /* the bubble's corner (Paul 260821d) */ border: 1px solid transparent; background: var(--aec-chip-on-bg); color: var(--aec-chip-on-fg); } .aec-chip.aec-chip-action { background: var(--aec-surface); border-color: var(--aec-line); color: var(--aec-charcoal); cursor: pointer; transition: background-color .12s ease, border-color .12s ease, transform .09s ease; } .aec-chip.aec-chip-action:hover { background: var(--aec-ivory-2); border-color: var(--aec-accent-line); } /* ── yes/no quick replies (Paul 260808) ───────────────────────────── Two buttons under a reply that asked a yes/no question. Same family as the chips and the on-page actions — surface, hairline, the one primary on hover — because they are the same kind of object: a small, optional thing to tap that must read as Ellie offering rather than the page insisting. Deliberately NOT a call-to-action pair: no colour on Yes to make it the "right" answer, no fill, no shadow. A leading question is a design decision as much as a wording one, and this one declines to lead. Typing the answer instead is always available and never discouraged — the composer is untouched while these are on screen. */ .aec-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px 0; padding: 0 var(--aec-gutter); /* buttons arrive smoothly, never in a flash (Paul 260821 #5) — the same quiet entrance the messages themselves make */ animation: aec-soft-in .26s ease-out both; } /* One entrance for everything that joins the conversation after the words: quick answers, on-page actions, product cards, colour swatches. They already wait for the reveal to finish; this is the other half of the 260821 ruling — arriving gently once they may. */ @keyframes aec-soft-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes aec-fade-in { from { opacity: 0; } to { opacity: 1; } } #aiellie-root .aec-quick__btn { font: inherit; font-size: 13px; font-weight: 500; min-height: 40px; padding: 9px 20px; /* the bubble's own corner (Paul 260821d: buttons and product bits match the text — the pills were "much too rounded") */ border-radius: 8px; border: 1px solid var(--aec-line); background: var(--aec-surface); color: var(--aec-charcoal); cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } #aiellie-root .aec-quick__btn:hover { background: var(--aec-primary-bg); border-color: var(--aec-primary-bg); color: var(--aec-primary-fg); } #aiellie-root .aec-quick__btn:focus-visible { outline: 2px solid var(--aec-focus); outline-offset: 2px; } @media (max-width: 640px) { #aiellie-root .aec-quick__btn { min-height: 44px; padding: 11px 22px; } } /* An ANSWERED row (Paul 260821 #6). The chosen button keeps the primary colour so the row records which answer was given; the others step back; and after a beat the whole set shrinks to half size and stays in the chat — a record of what was offered, not a control any more. The transitions live on the answered state so hovering a live button is untouched. */ #aiellie-root .aec-quick--answered .aec-quick__btn { cursor: default; opacity: .55; transition: font-size .3s ease, padding .3s ease, min-height .3s ease, opacity .3s ease; } #aiellie-root .aec-quick--answered .aec-quick__btn:hover { background: var(--aec-surface); border-color: var(--aec-line); color: var(--aec-charcoal); } /* The chosen mark is the welcome-primary sand, not the ink fill (Paul 260821e: "the selected colour can be more gentle") — the same 10% step off the surface that already means "the chosen one" on the welcome primary, read against the others' faded .55. */ #aiellie-root .aec-quick--answered .aec-quick__btn--chosen, #aiellie-root .aec-quick--answered .aec-quick__btn--chosen:hover { background: var(--aec-welcome-primary); border-color: var(--aec-welcome-primary-line); color: var(--aec-charcoal); opacity: 1; } /* half the 40px pill: half the height, half the padding, and the type only as far down as it stays readable */ #aiellie-root .aec-quick--small { gap: 5px; } #aiellie-root .aec-quick--small .aec-quick__btn { min-height: 20px; padding: 3px 10px; font-size: 11px; } /* ── on-page action buttons (260803) ──────────────────────────────── "Take me there", "Show me". Same family as the chips above — surface, hairline, warm neutrals, the one primary on hover — because they are the same kind of object: a small, optional thing to tap. They must read as Ellie offering, never as the page shouting. Three states, and a button never leaves the one it lands in: busy while the browser works, done when it worked, failed when it did not. A finished button stays disabled — one action, one outcome. */ .aec-page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px 0; padding: 0 var(--aec-gutter); animation: aec-soft-in .26s ease-out both; /* Paul 260821 #5 */ } #aiellie-root .aec-pa-btn { font: inherit; font-size: 13px; font-weight: 500; /* 40px on a mouse, 44px under a thumb (below) — comfortably tappable without turning into a call-to-action bar */ min-height: 40px; padding: 9px 16px; border-radius: 8px; /* the bubble's corner (Paul 260821d) */ border: 1px solid var(--aec-line); background: var(--aec-surface); color: var(--aec-charcoal); cursor: pointer; text-align: left; transition: background-color .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease; } #aiellie-root .aec-pa-btn:hover:not(:disabled) { background: var(--aec-primary-bg); border-color: var(--aec-primary-bg); color: var(--aec-primary-fg); } #aiellie-root .aec-pa-btn:disabled { cursor: default; } #aiellie-root .aec-pa-btn[data-state="busy"] { opacity: .7; } #aiellie-root .aec-pa-btn[data-state="done"] { background: var(--aec-chip-on-bg); border-color: transparent; color: var(--aec-chip-on-fg); opacity: 1; } #aiellie-root .aec-pa-btn[data-state="done"] .aec-pa-label::after { content: " ✓"; } #aiellie-root .aec-pa-btn[data-state="failed"] { color: var(--aec-danger); border-color: var(--aec-danger); background: var(--aec-surface); opacity: 1; } @media (max-width: 640px) { #aiellie-root .aec-pa-btn { min-height: 44px; padding: 11px 18px; } } /* The page-side mark. This lands on the SHOP's markup, outside #aiellie-root, so it cannot use the widget's theme variables — the ring is a dark line inside a light halo, which reads on a white page and on a black one. Box-shadow only: no border, no padding, no margin, so nothing on the customer's page moves by a pixel. */ .aec-page-highlight { box-shadow: 0 0 0 2px rgba(26, 25, 23, .85), 0 0 0 5px rgba(250, 248, 244, .92), 0 0 0 7px rgba(26, 25, 23, .25) !important; border-radius: 6px; animation: aec-page-highlight-in .35s ease-out both; } @keyframes aec-page-highlight-in { from { box-shadow: 0 0 0 0 rgba(26, 25, 23, 0); } } @media (prefers-reduced-motion: reduce) { /* the mark stays — it is the answer to "where is it?" — but it arrives instantly instead of growing */ .aec-page-highlight { animation: none; } } /* messages */ .aec-logwrap { flex: 1 1 auto; position: relative; min-height: 0; } /* messages fade as they slide beneath the sticky header — decorative only (pointer-events none, plain gradient: no mask/backdrop needed, works in every browser). Appears ONLY once the conversation has been scrolled, so the first message is never dimmed at the top. */ .aec-logwrap::before { content: ""; position: absolute; top: var(--aec-head-h); left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--aec-ivory), transparent); opacity: 0; transition: opacity .15s ease; } .aec-logwrap.aec-scrolled::before { opacity: 1; } .aec-log { position: absolute; inset: 0; overflow-y: auto; /* Hold the scrollbar's space ALWAYS. Without this the bar appears the moment the log outgrows the panel, every bubble narrows by its width, and a reply being written mid-reveal re-wraps — text moving after it has been read, which is the one thing the reveal must never do (260726). */ scrollbar-gutter: stable; /* the bottom pad only has to clear the composer — the 16px on top of it was dead air on a tall phone, where the screen is mostly the gap between the shortcuts and the box (Paul 260813) */ padding: calc(var(--aec-head-h) + 16px) var(--aec-gutter) calc(var(--aec-comp-h, 96px) + 6px); display: flex; flex-direction: column; gap: 14px; } /* Theme typography must not leak decorative shadows into the widget. */ #aiellie-root, #aiellie-root * { text-shadow: none !important; } /* scrollbar matches the widget and spans only the visible reading area — the track margins mirror the header/composer overlays (Paul 260723 #2). Webkit pseudos deliberately WITHOUT the standard scrollbar-* props: setting those makes Chromium ignore the pseudos (and the standard props can't do track margins). */ .aec-log::-webkit-scrollbar { width: 8px; } .aec-log::-webkit-scrollbar-track { background: transparent; margin-top: var(--aec-head-h); margin-bottom: calc(var(--aec-comp-h, 96px) + 2px); } .aec-log::-webkit-scrollbar-thumb { background: var(--aec-line); border-radius: 4px; } .aec-log::-webkit-scrollbar-thumb:hover { background: var(--aec-charcoal-soft); } /* flex items in the scroll column must NEVER be crushed to fit — the log scrolls instead. Found 260721h: the products row's overflow-x zeroes its flex minimum, so in any long conversation the flex algorithm collapsed product cards to a 2px sliver. */ .aec-log > * { flex-shrink: 0; } .aec-log { /* NO scroll-behavior:smooth here — it makes every programmatic pin animate, so scrollTop lags the target, the "near bottom?" guard misreads mid-flight, and the pin lands short (the half-cut thinking box, Paul 260720/21). Deliberate glides pass an explicit behavior:'smooth'. */ } .aec-has-chips .aec-log { padding-top: calc(var(--aec-head-h) + 58px); } @media (max-width: 640px) { .aec-log { padding-top: calc(var(--aec-head-h) + env(safe-area-inset-top) + 16px); } .aec-has-chips .aec-log { padding-top: calc(var(--aec-head-h) + env(safe-area-inset-top) + 58px); } } .aec-msg { display: flex; flex-direction: column; inline-size: fit-content; min-inline-size: min(144px, 80%); max-inline-size: 80%; animation: aec-msg-in .18s ease-out both; } @keyframes aec-msg-in { /* premium entrance: a longer rise, same quick fade (260722d #8) */ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* §9 — messages breathe. 14px → 20px, so the conversation never reads as a dense feed; the gap is what separates speakers now that the outlines have gone. */ .aec-msg + .aec-msg { margin-top: 0; } /* THE rule (Paul 260802, flipped): AI Ellie / humans LEFT, customer RIGHT — the shop speaks from the left, you answer from the right, which is the way every messenger the customer already uses reads. */ .aec-msg.aec-from-agent { align-self: flex-start; align-items: flex-start; } .aec-msg.aec-from-customer { align-self: flex-end; align-items: flex-end; } .aec-msg.aec-from-agent, .aec-msg.aec-from-customer { width: fit-content; } /* name tag — its own borderless pill in a contrast tone, sitting ON TOP of the bubble and slightly overlapping its top edge (Paul 260721g #2 flipped the stacking). §5 keeps this for the CUSTOMER — explicitly NOT an avatar circle, NOT initials — and drops it from every AI reply after the first (the JS adds .aec-unlabelled; from then on the layout says who is speaking). */ .aec-msg-author { position: relative; z-index: 0; font-family: var(--aec-display); font-size: 11.5px; line-height: 1.2; font-weight: 500; color: var(--aec-charcoal-soft); background: var(--aec-tag-customer); border: 0; border-radius: 5px; padding: 2px 9px 5px; margin: 0 0 4px 0; box-shadow: none; inline-size: fit-content; max-inline-size: min(180px, 80%); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .aec-from-agent .aec-msg-author { background: var(--aec-bubble-agent-line); align-self: flex-start; } .aec-from-customer .aec-msg-author { align-self: flex-end; } .aec-msg-author-text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } .aec-msg-author-bot { display: inline-flex; flex: 0 0 auto; color: inherit; } .aec-msg-author-bot svg { display: block; width: 14px; height: 14px; } .aec-from-agent.aec-human .aec-msg-author { background: var(--aec-sage-tag); } /* an AI reply that is not the first one carries no tag at all — the element stays in the DOM (screen readers still announce the author) but takes no space and shows nothing */ .aec-msg.aec-unlabelled > .aec-msg-author { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; } /* Time and delivery form one quiet tab tucked behind the bubble. It is outside the message-content box, so even 05:27:52 ✓ cannot widen Yes. */ .aec-msg-stack { display: grid; grid-template-columns: 10px minmax(0, auto) 10px; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; } .aec-msg-stack > .aec-msg-bubble { grid-column: 1 / -1; grid-row: 1; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; } .aec-msg-meta { position: relative; z-index: 0; grid-column: 1 / -1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 4px; inline-size: max-content; max-inline-size: 100%; min-height: 18px; box-sizing: border-box; margin-top: 3px; padding: 0; border-radius: 0; background: transparent; color: var(--aec-time); white-space: nowrap; } .aec-from-customer .aec-msg-meta { justify-self: end; } .aec-msg-time { font-size: calc(10px * var(--aec-font-scale, 1)); line-height: 1; font-weight: 400; color: inherit; font-variant-numeric: tabular-nums; /* a small natural pause after the reply lands, then a gentle fade — always the last thing to arrive (260722e #4) */ animation: aec-time-in .4s ease .3s both; } @keyframes aec-time-in { from { opacity: 0; } to { opacity: 1; } } .aec-msg-bubble { position: relative; /* anchors the "Copied ✓" toast */ z-index: 1; /* overlaps the name-tag pill's lower half */ /* §13 generous corners, §12 paper-on-paper shadow, §6 no border at all. The 260722 gradient is GONE (§1): the customer's bubble is pure white, Ellie's is a flat warm beige — a gradient inside a bubble is a device, and it made both look printed rather than laid down. The customer's fill has its OWN token rather than --aec-surface: dark mode had to lift the bubble clear of the page (260802) and --aec-surface is also every card, menu, drawer and input, which were not the complaint. */ padding: 9px 13px; border-radius: 8px; line-height: 1.6; border: 0; background: var(--aec-bubble-customer); box-shadow: none; white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; } .aec-from-customer .aec-msg-bubble { box-sizing: border-box; border: .5px solid var(--aec-bubble-customer-line); } /* A one-word customer reply bottomed out at roughly 70px — narrower than the timestamp tab tucked behind it. Longer messages keep their content-driven width; this is only a floor. It does NOT live on the bubble (260820). There the declaration won the cascade and did nothing: `min(144px, 100%)` resolves its percentage against the bubble's containing block, which is a grid area inside a `fit-content` stack — indefinite, so the percentage collapsed to the content width and the min never applied. Measured in a real browser: "Yes" came out at 70.7px with `getComputedStyle` cheerfully reporting `min(150px, 100%)`. It sat on `.aec-from-customer .aec-msg-stack` until the 260821 width round flattened that layer, and now lives on `.aec-msg` (above). Either way the percentage resolves against the log, which has a real width, so the floor holds and a narrow screen still cannot be overflowed. */ /* touch devices: long-press = copy (the native selection callout would fight the gesture); desktop keeps normal text selection */ @media (pointer: coarse) { .aec-msg-bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } .aec-copied { position: absolute; top: -32px; right: 6px; z-index: 3; background: var(--aec-charcoal); color: var(--aec-ivory); font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 12px; box-shadow: var(--aec-shadow); pointer-events: none; white-space: pre-line; transition: opacity .4s ease; } .aec-copied-out { opacity: 0; } /* word-by-word reveal: each word fades in softly at reading pace */ /* Per-CHARACTER fade (Paul 260726): "each letter should fade in, just enough to make it smooth." 140ms linear is deliberately barely perceptible — it softens the leading edge without the shimmer the old .45s per-WORD fade produced. Only the few characters still fading carry this class; the JS merges them into plain text afterwards, so this never animates more than a handful of nodes at once. Reduced-motion users get the text with no animation at all. */ /* Streaming flow (Paul 260726). Each line is a NON-WRAPPING block whose break point was measured before it was revealed, so nothing re-wraps and no character can move once it has appeared. The animated height lives on .aec-flow and only ever grows at the bottom edge; only one upcoming line is ever reserved, so the empty shape of the full answer is never exposed. Width is untouched — the bubble is already a fixed share of the panel. */ .aec-msg-bubble .aec-flow { overflow: hidden; transition: height .14s cubic-bezier(.25,.8,.3,1); will-change: height; } .aec-msg-bubble .aec-flow-in { display: block; } .aec-msg-bubble .aec-para { display: block; } .aec-msg-bubble .aec-para + .aec-para { margin-top: .75em; } .aec-msg-bubble .aec-line { display: block; white-space: pre; /* the break is already decided */ } /* hidden measuring twin: inherits the bubble's typography, contributes no height, and is what Range.getClientRects() is read from */ .aec-msg-bubble .aec-mirror { position: absolute; visibility: hidden; pointer-events: none; height: 0; overflow: hidden; top: 0; left: 0; /* MUST match the bubble's own wrapping (white-space + word-wrap above), or the measured breaks would not be the ones the finished message settles into. Links keep the `anywhere` rule they get from .aec-msg-bubble a, here as well. */ white-space: pre-wrap; word-wrap: break-word; } .aec-msg-bubble .aec-ch { animation: aec-ch-in .14s linear both; } @keyframes aec-ch-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .aec-msg-bubble .aec-ch { animation: none; } /* no animated height either — the JS also switches to grouped reveals */ .aec-msg-bubble .aec-flow { transition: none; } } .aec-msg-bubble a, .aec-receipt-body a { color: var(--aec-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; /* raw tracking URLs wrap, never overflow */ } /* speech tails (Paul 260802, replacing the 260721h tightened bottom corner): three corners keep the generous 24px curve; the TOP corner on the speaker's own side is squared off and grows a small beak that runs out past the bubble edge and tapers back in — the start of a 💬 tail, drawn at the corner rather than hanging off the bottom. The beak is a clipped pseudo-element inheriting the bubble's own fill, so it follows both themes and every bubble variant for free. */ .aec-from-agent .aec-msg-bubble::before, .aec-from-customer .aec-msg-bubble::before { content: none; } /* Ellie/human on the left: the beak points out to the LEFT */ .aec-from-agent .aec-msg-bubble { border-top-left-radius: 8px; } .aec-from-agent .aec-msg-bubble::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); } /* the customer on the right: the beak points out to the RIGHT */ .aec-from-customer .aec-msg-bubble { border-top-right-radius: 8px; } .aec-from-customer .aec-msg-bubble::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); } /* (the human colleague's beak used to be drawn twice — a sage edge in ::before and the fill laid back 1px inside it in ::after — purely to carry the bubble's hairline round the corner. The hairline is gone (Paul 260818), so the beak is the ordinary one above: `inherit` picks up the sage fill in both themes for free.) */ /* Ellie's bubbles hold a STABLE width (Paul 260726 acceptance: "no bubble-width changes" during streaming). They used to shrink-wrap to content — align-self:flex-end makes the message column content-sized — so a streamed reply widened with every line until it hit the cap, and worse, the line-break measurement was taken at whatever width the bubble happened to be at that instant. A reply BEING WRITTEN therefore takes its full share and holds it, which is the only width knowable at the first character: the text it will settle at has not arrived yet. Left as fit-content, the column measures against the handful of characters on screen, bottoms out at the 144px floor — and that floor is the width the line breaks are then measured against, so the whole reply wraps at ~150px and SNAPS to its real width at the settle (Paul 260821, screenshots). Growth is now purely vertical and the measurement is correct from the first character. Two states carry it, because they overlap rather than follow one another: .aec-streaming is the turn bubble from the dots onward, and .aec-revealing is on any message a revealer is writing into. The revealer adds its class before the first measurement and NEVER removes it — adoptStream drops .aec-streaming the moment the final text lands, which is typically seconds before the last character is written, and the width must not move then either. Static and history bubbles keep the balanced fit-content sizing (260821 12:53) — they have a real natural width and no measurement depending on it. */ .aec-msg.aec-from-agent.aec-streaming, .aec-msg.aec-from-agent.aec-revealing { inline-size: 80%; width: 80%; } /* (the separate typing bubble is retired — the dots now open inside the reply's own bubble, see .aec-turn-status) */ .aec-from-agent .aec-msg-bubble { background: var(--aec-bubble-agent); border: 0; /* the AI bubble sits BELOW the page in light mode and above it in dark, so its shadow would fight the tint — the tint alone is the separation (§6) */ box-shadow: none; } /* a real colleague's message keeps an identity of its own — now the fill ALONE (Paul 260818: the outline on his bubble goes). Every other bubble in the conversation is borderless; his was the one exception, and it read as a box round what he said rather than as him. */ .aec-from-agent.aec-human .aec-msg-bubble { border: 0; background: var(--aec-sage-bg); box-shadow: none; } .aec-msg-state { min-width: 0; min-height: 10px; font-size: calc(10px * var(--aec-font-scale, 1)); line-height: 1; color: var(--aec-time); display: inline-flex; align-items: center; gap: 4px; } .aec-msg-state:empty { display: none; } .aec-delivery-ok { color: var(--aec-time); font-weight: 500; } .aec-msg-state .aec-fail { color: var(--aec-danger); font-weight: 600; } .aec-msg-state button { border: 0; background: none; color: var(--aec-ink); font-weight: 600; text-decoration: underline; font-size: 13px; padding: 2px; } .aec-msg-attachment { font-size: 13.5px; color: var(--aec-charcoal-soft); padding: 3px 4px; font-style: italic; } /* jump to latest */ .aec-jump { /* floating semi-transparent pill just above the composer, sliding in like modern messengers (260722e #3); surface tokens so it stays readable in BOTH themes (260720 #5) */ position: absolute; right: 14px; z-index: 2; /* lifted clear of the box edge and near-opaque: floating over text it must read as a deliberate control, not a rendering error (Paul 260722p screenshot) */ bottom: calc(var(--aec-comp-h, 96px) + 18px); border: 1px solid var(--aec-glass-line); border-radius: 8px; background: var(--aec-glass-strong); color: var(--aec-charcoal); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); font-size: 13px; font-weight: 600; padding: 6px 12px; box-shadow: none; animation: aec-jump-in .2s ease both; } @keyframes aec-jump-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* receipts — success feedback that reinforces confidence without flash (260722e #7): soft rise-in, then one gentle sage settle */ .aec-receipt, .aec-basket-card { animation: aec-msg-in .18s ease-out both; } .aec-receipt:not(.aec-receipt-fail) { animation: aec-msg-in .18s ease-out both, aec-settle 1s ease .25s; } @keyframes aec-settle { 0% { box-shadow: 0 0 0 0 var(--aec-sage-ring); } 60% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* (the ✓-in-a-disc tick and its aec-tick pop went with the card's title row, 260821j — Ellie's sentence is the confirmation now) */ .aec-receipt { align-self: stretch; max-width: 100%; border: 1px solid var(--aec-line); border-left: 3px solid var(--aec-sage); border-radius: var(--aec-radius); background: var(--aec-surface); padding: 13px 16px; box-shadow: var(--aec-shadow-card); } .aec-receipt.aec-receipt-fail { border-left-color: var(--aec-danger); } .aec-receipt-title { font-weight: 600; font-size: 15px; } .aec-receipt-body { font-size: 15px; margin-top: 3px; } .aec-receipt-meta { font-size: 13.5px; color: var(--aec-charcoal-soft); margin-top: 5px; } /* ── the answer that came back (CP3, 260804) ───────────────────────── Deliberately the receipt's shape rather than a new one: it is the same kind of object — a settled outcome, not somebody talking. An INTERIM update ("still on it") keeps the quiet line; a FINAL one takes the emphasis border, because that is the one the customer was waiting for. No new colours: this is the existing restrained language. */ .aec-update-card { align-self: stretch; max-width: 100%; border: 1px solid var(--aec-line); border-left: 3px solid var(--aec-line); border-radius: var(--aec-radius); background: var(--aec-surface); padding: 13px 16px; box-shadow: var(--aec-shadow-card); animation: aec-msg-in .18s ease-out both; } .aec-update-card.aec-update-final { border-left-color: var(--aec-ink); } .aec-update-head { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--aec-charcoal-soft); } .aec-update-body { font-size: 15px; margin-top: 4px; } .aec-update-meta { font-size: 13.5px; color: var(--aec-charcoal-soft); margin-top: 5px; } /* ── basket / checkout card (§10) ──────────────────────────────────── Layout unchanged, deliberately: this is the one place in the widget where a customer is about to spend money, and it already works. Refinements only — softer border, more whitespace, the product thumbnail on the right, a BLACK Checkout, View basket secondary, Undo text-only. */ /* COMPACT since 260821j (Paul: "excessive repetition and the huge card"). Ellie's sentence carries the words; this element is the working line while the shop answers, then just the two buttons. The thumbnail, product and price rows went with their markup — the silent transcript record keeps name and price for the export. */ .aec-basket-card { align-self: stretch; position: relative; border: 1px solid var(--aec-line); border-radius: 8px; /* the bubble's corner (Paul 260821d) */ background: var(--aec-surface); padding: 12px 14px; box-shadow: var(--aec-shadow-card); } /* settled OK: no box at all — a row of buttons under Ellie's sentence, the same weight as the quick answers above it */ .aec-basket-card.aec-basket--done { border: 0; background: none; box-shadow: none; padding: 2px 0 6px; } .aec-basket-line { display: flex; align-items: center; gap: 10px; font-size: 15px; } .aec-basket-line[hidden] { display: none; } .aec-basket-title { font-weight: 600; } .aec-basket-title .aec-fail { color: var(--aec-danger); } .aec-basket-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; } /* buttons only: nothing above them to stand off from */ .aec-basket-card.aec-basket--done .aec-basket-actions { margin-top: 0; } .aec-basket-actions .aec-undo { border: 0; background: none; color: var(--aec-charcoal-soft); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; padding: 6px; } @media (max-width: 640px) { /* All three sit on ONE row, at their natural widths — as in the render. They used to stretch edge-to-edge, which on a 390px phone pushed Undo onto a line of its own and dropped the timestamp below the card's own thumbnail. */ .aec-basket-actions .aec-btn { flex: 0 1 auto; text-align: center; padding: 11px 16px; } } /* ── product cards — COMPARISON CARDS (Paul 260822) ─────────────────── The cards were miniature shop rows: a 40px round thumbnail, the whole database name wrapping beside it, and a large black Add button carrying most of the ink on a strip that ran the full width of the window. Two of them shown "so you can compare" could not be compared — the picture, the one thing the customer asked for, was the smallest element on the card and the controls were the loudest. Inverted here. Reading order down each card is PICTURE → short name → specs → price + a small Add, the picture is roughly four times the area it was, and the row of cards is no wider than the bubble above it so it reads as part of Ellie's message rather than a shop pane bolted underneath. Nothing filled, nothing shadowed: a hairline, the bubble's 8px corner, and the photograph doing the talking. Compact is still the rule (Paul 260806 — "do not place large images inside the conversation because this makes the chat chaotic"). Four times a thumbnail is a card, not a hero image. */ .aec-products { /* the bubble's width, on the bubble's side: two cards and the gap land within Ellie's 80% (.aec-msg), so the row belongs to what she just said. 420px caps it on a docked/desktop window, where 80% of 760px would give each card the width of a poster. */ align-self: flex-start; max-width: min(80%, 420px); display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px; animation: aec-soft-in .26s ease-out both; /* Paul 260821 #5 */ } .aec-product-card { /* Two cards SHARE the row; three or more scroll rather than shrink into unreadable slivers (the 260721h flex-minimum trap). The shrink is 1, not 0, and the floor is min-width — with `flex: 1 0 150px` two 150px cards plus the 10px gap came to 310 in a 302px row, so the second card was clipped by 8px and lost the right edge of its "This one" button. Every geometry assertion passed that; the screenshot did not (Paul's rule, 260821). */ flex: 1 1 150px; max-width: 200px; min-width: 130px; transition: border-color .15s ease; border: 1px solid var(--aec-line); border-radius: 8px; /* the bubble's corner (Paul 260821d) */ background: var(--aec-surface); overflow: hidden; display: flex; flex-direction: column; } .aec-product-card:hover { border-color: var(--aec-accent-line); } /* The picture, and the whole panel is the enlarge control — Paul asked for the image itself to be clickable, with a magnifier in the corner and the words underneath. A real