/* ══ THE CHAT — Backbone ═══════════════════════════════════════════════════════ The chat, the /open/ front door and the /join/ invite share this file. TWO ACCENTS, AND THE SPLIT IS THE WHOLE POINT --------------------------------------------- --accent is the TENANT's colour. app.js sets it INLINE on from the bot's config (with a WCAG-picked --accent-fg beside it), and an inline style beats every stylesheet. It carries the things that are *the bot's*: its identity mark, the primary send button, the user's own bubble, the active/selected states, and the marks on the sources it cited. --sig is BACKBONE's signal cyan, from public/css/backbone.css. It carries the SHELL: rules, borders, focus rings, mono micro-labels, the thinking indicator, the streaming caret. It is identical for every tenant, so two customers' embeds are recognisably the same product while still looking like theirs. Never write --accent where the meaning is "this is Grounded", and never write --sig where the meaning is "this is your bot". THE THREE ANSWER STATES ARE NOT ERROR STYLING --------------------------------------------- --ok a grounded answer that cited what it used --ungrounded it answered, but could not support every detail --warn it refused: the question was outside what it was given backbone.css resolves --warn and --ungrounded to the SAME hue, so the three are told apart by FORM, not colour: a refusal tints its bubble and carries an inset bar plus a tag; an ungrounded answer leaves its bubble alone and hangs an outlined badge beneath it; a grounded answer gets the cited-sources rule. TOKENS BELOW ARE A FALLBACK, NOT THE PALETTE. public/css/backbone.css is linked AFTER this file on all three pages and re-values every name here in both themes (dark is the default). These light values are what the page renders with in the window before Backbone arrives, and if it ever fails to arrive. Do not add a dark block here — theme.css/backbone.css own the themes and would outrank it anyway. ========================================================================== */ :root { --bg: #e3eff4; --surface: #f7fbfd; --surface2: #e8f2f6; --border: rgba(6, 36, 48, 0.20); --accent: #075260; /* signal cyan, light-read; overridden at runtime from bot config */ --accent-fg: #ffffff; /* readable text/icon colour ON the accent; recomputed in app.js per bot */ --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent); /* THE TENANT ACCENT, USED AS TEXT. --accent-fg is the colour readable ON the accent; this is its dual — the colour to use when the accent IS the glyphs and the surface is behind them. They are different problems and only the first one was solved. measured, tenant accent #0F6E7E as text on the dark chat surface: 2.87:1 — fails 1.4.3 the same accent as text on the light chat surface: 6.9:1 — passes A tenant picks one hex and it is used in BOTH themes, so an accent that reads on paper can be two stops too dark on the dark surface — which is the default here. Everything that set the accent as text inherited that: the citation numerals, the source count, and the hover colour of all three disclosure controls. NOT --accent-text, which already exists and means something else. backbone.css declares it as a fixed pair with its OWN accent (#8ceef1 dark / #05454f light, beside --accent: #5ce1e6) — the shell's cyan. On this surface app.js overwrites --accent inline from the bot's config and sets --accent-fg beside it, but never --accent-text, so that token stays backbone cyan no matter whose bot is loaded. Reaching for it would have painted every tenant's citations the same shell colour and quietly broken the two-accent rule at the top of this file. It is derived rather than declared per theme for the same reason --accent-soft is: --text is white on the dark surface and near-black on the light one, so mixing toward it always moves AWAY from the background, and one declaration stays correct when the reader flips the theme. 55% keeps the hue unmistakably the tenant's. measured after the change, same accent: 6.02:1 dark, 9.17:1 light. Use --accent for FILLS, rules and marks — 1.4.3 does not apply there and the tenant's exact hue is the point. Use this wherever the accent is glyphs a person reads. */ --accent-on-surface: color-mix(in srgb, var(--accent) 55%, var(--text)); /* Backbone chrome. Re-declared (not just consumed) so a missing backbone.css degrades to a flat, readable page instead of dropping every rule that reads one of these. Values mirror backbone.css's LIGHT block, matching the palette immediately above. */ --sig: #075260; --sig-ink: #ffffff; --sig-text: #05454f; --line: rgba(6, 36, 48, 0.20); --line-hi: rgba(6, 36, 48, 0.42); --control-border: rgba(6, 36, 48, 0.42); /* WCAG 1.4.11 wants 3:1 for the visible boundary of a control. backbone.css's --control-border is rgba(6,36,48,.42) in the light theme, and its comment claims 3.4:1 on --surface; recomputed against #f7fbfd it is 2.57:1, so every input outline on a light chat would fail. That file belongs to another track, so the fix is local: derive a control edge from --muted, which flips correctly with the theme AND with high contrast, at a strength that clears 3:1 on both sides. light #1d4655 60% over #f7fbfd -> 3.29:1 dark #d8ecf4 60% over #08232f -> 5.63:1 Used for the boundary of every INTERACTIVE control (fields, outlined buttons, chips, the empty stars). --line-hi still carries decorative hairlines, where 1.4.11 does not apply. */ --control-edge: color-mix(in srgb, var(--muted) 60%, var(--surface)); --text: #062430; --muted: #1d4655; --text-muted: #1d4655; --faint: rgba(29, 70, 85, 0.78); --ok: #075260; --warn: #7a4e07; /* 6.4:1 as body text on --surface — WCAG 1.4.3 */ --ungrounded: #7a4e07; --err: #9c2b36; /* 7.2:1 on --surface */ --radius: 0px; /* Backbone is square. The only curve is the hexagon. */ --serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Backbone has no serif voice */ --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --shadow-card: 0 24px 60px rgba(6, 36, 48, 0.16); --backdrop: rgba(6, 36, 48, 0.42); --user-bubble: rgba(6, 36, 48, 0.07); --bot-bubble: rgba(7, 82, 96, 0.07); --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ── THE MOTION SCALE ─────────────────────────────────────────────────────── Four durations, and every transition on this surface picks one of them by what it MEANS, not by how it feels in isolation. Before this there was one token (--t-ui) and a scatter of literals — 180ms, 220ms, 260ms, 320ms — so two controls doing the same job moved at different speeds and the surface read as a set of unrelated widgets. --t-tap a control acknowledging a press or a hover. Below ~120ms the change reads as instant while still being interpolated. --t-ui a small control state: hover tint, border, icon rotation. --t-state one content state BECOMING another: a disclosure opening, the working state giving way to the answer. --t-layout the largest move allowed here — a box resizing around content that has already arrived. Nothing on this surface is slower. --t-exit is not a fifth step, it is the house rule that leaving is faster than arriving (design-reference §house tokens): a closing panel is a result the reader has already asked for, so it should not be dwelt on. AND EXITS GET THEIR OWN CURVE. --ease is an exponential ease-OUT: it covers most of the distance immediately and decelerates into the destination, which is right for something arriving and wrong for something leaving. Measured on a closing source panel it collapsed 91% of its height in the first 60ms and then spent the remaining 110ms creeping through the last half-pixel — the panel looked shut and the interface still felt busy. That tail is what reads as lag. --ease-exit accelerates instead: slow off the mark, gone by the end, so the moment the motion stops is the moment it looks finished. Pair arrivals with --ease and departures with --ease-exit. Never plain `ease`, never a bounce. backbone.css re-values --ease and --t-ui in both themes; the four names it does not declare are owned here. ── */ --t-tap: 110ms; --t-ui: 160ms; --t-state: 240ms; --t-layout: 300ms; --t-exit: 170ms; --ease-exit: cubic-bezier(0.45, 0, 0.9, 0.85); /* A pointy-top hexagon: the bot's identity mark, and the one curved thing here. */ --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* syntax-highlight token colours (light) */ --hl-keyword: #0b4a8c; --hl-string: #10603f; --hl-number: #7a4e07; --hl-comment: rgba(29, 70, 85, 0.72); --hl-function: #075260; --hl-tag: #9c2b36; --hl-attr: #6b4a12; --hl-punct: rgba(29, 70, 85, 0.85); } /* ══ GEOMETRY, ENFORCED ════════════════════════════════════════════════════════ Radius 0 is an identity switch, not a preference, so it has to hold across the WHOLE chat — including the feature modules under public/js/ (settings, uploads, artifacts, share/export, voice, consent, capabilities…). Each of those appends its own