@v-office/website-chat 1.0.1 → 1.1.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { r as MAX_MESSAGE_CHARS, t as CHAT_LOCALES } from "./protocol-BuNqZAMt.js";
-import { c as chatAvailable, i as Spark, o as loadConversation, t as Arrow } from "./icons-B5PAY3aU.js";
+import { f as chatAvailable, s as Spark, t as Arrow, u as loadConversation } from "./icons-DIqOmKoe.js";
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -12,7 +12,7 @@ const DEFAULT_COPY = {
 		title: "Reiseassistent",
 		newConversation: "Neues Gespräch",
 		notice: "Sie chatten mit einer KI. Preise und Verfügbarkeit in den Karten kommen direkt aus unserem Buchungssystem.",
-		greeting: "Hallo! Wann möchten Sie reisen, und mit wie vielen Personen?",
+		greeting: "Hallo! Erzählen Sie mir einfach, wie Ihr Urlaub aussehen soll: wann, mit wem und was Ihnen wichtig ist. Ich suche passende Unterkünfte, prüfe freie Termine und Preise und zeige Ihnen, was passt.",
 		suggestions: [
 			"Ein Ferienhaus für 4 Personen in den Sommerferien",
 			"Eine Woche mit Hund, gern mit eingezäuntem Garten",
@@ -31,6 +31,13 @@ const DEFAULT_COPY = {
 		contactLink: "Kontakt aufnehmen",
 		bookStay: "Zur Buchung",
 		viewRental: "Zur Unterkunft",
+		book: "Buchen",
+		view: "Ansehen",
+		matchBadge: "Passt genau",
+		nights: {
+			one: "{n} Nacht",
+			other: "{n} Nächte"
+		},
 		total: "Gesamtpreis",
 		notBookable: "Für diesen Zeitraum nicht buchbar",
 		photo: "Foto",
@@ -77,7 +84,7 @@ const DEFAULT_COPY = {
 		title: "Travel assistant",
 		newConversation: "New conversation",
 		notice: "You are chatting with an AI. Prices and availability in the cards come straight from our booking system.",
-		greeting: "Hello! When would you like to travel, and how many of you?",
+		greeting: "Hello! Just tell me what your holiday should look like: when, who with and what matters to you. I find rentals that fit, check free dates and prices and show you what suits.",
 		suggestions: [
 			"A holiday home for 4 in the summer holidays",
 			"A week with our dog, ideally with a fenced garden",
@@ -96,6 +103,13 @@ const DEFAULT_COPY = {
 		contactLink: "Contact us",
 		bookStay: "Book this stay",
 		viewRental: "View the rental",
+		book: "Book",
+		view: "View",
+		matchBadge: "Good match",
+		nights: {
+			one: "{n} night",
+			other: "{n} nights"
+		},
 		total: "Total",
 		notBookable: "Not bookable for these dates",
 		photo: "Photo",
@@ -138,17 +152,88 @@ const DEFAULT_COPY = {
 };
 //#endregion
 //#region src/theme.ts
-/** The curated looks over one layout: `classic` (soft shadows, medium corners), `soft` (round corners,
-*  lighter shadows), `minimal` (borders instead of shadows, small corners). */
+/** The curated looks over one layout, each relative to the site's corner radius: `classic` (soft
+*  shadows), `soft` (rounder corners, lighter shadows), `minimal` (borders instead of shadows, tighter
+*  corners). */
 const CHAT_THEMES = [
 	"classic",
 	"soft",
 	"minimal"
 ];
-/** See {@link ColorVariables}. */
+/** The site tokens the chat follows: the shadcn set every AI Studio template defines (and
+*  website-components reads), the chat variable each sets, and the chat's own value for a site
+*  without it. CSS custom properties reach into the shadow root; `all: initial` leaves them alone.
+*  Not `--secondary`: shadcn sets it next to `--muted`, so the visitor's messages would vanish on the
+*  message area; the chat's tint is the site's primary, lightened (`--chat-secondary`). */
+const SITE_COLORS = [
+	{
+		site: "--primary",
+		chat: "--chat-primary",
+		own: "#1f4f8b"
+	},
+	{
+		site: "--primary-foreground",
+		chat: "--chat-on-primary",
+		own: "#fff"
+	},
+	{
+		site: "--background",
+		chat: "--chat-surface",
+		own: "#fff"
+	},
+	{
+		site: "--muted",
+		chat: "--chat-surface-soft",
+		own: "#f5f7fa"
+	},
+	{
+		site: "--foreground",
+		chat: "--chat-text",
+		own: "#1b1f24"
+	},
+	{
+		site: "--muted-foreground",
+		chat: "--chat-muted",
+		own: "#5b6470"
+	},
+	{
+		site: "--border",
+		chat: "--chat-border",
+		own: "#d9dee5"
+	}
+];
+/** shadcn's base radius; the themes scale it (classic 1.6×, so 16px for shadcn's 10px). */
+const SITE_RADIUS = {
+	site: "--radius",
+	chat: "--chat-base-radius",
+	own: "10px"
+};
+/** See {@link UnusableSiteTokens}. */
+const unusableSiteTokens = (host) => {
+	if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return {};
+	const style = getComputedStyle(host);
+	const unusable = (token, property) => {
+		const value = style.getPropertyValue(token.site).trim();
+		return value !== "" && !CSS.supports(property, value);
+	};
+	return Object.fromEntries([...SITE_COLORS.filter((token) => unusable(token, "color")).map((t) => [t.chat, t.own]), ...unusable(SITE_RADIUS, "width") ? [[SITE_RADIUS.chat, SITE_RADIUS.own]] : []]);
+};
+/** See {@link ColorVariables}. An override brings its own text colour, as before the chat took the
+*  site's tokens: the site's foregrounds suit the site's colours (a dark theme's light primary has
+*  dark text), not the brand colour a site sets here. */
 const colorVariables = (colors) => ({
-	...colors?.primary && { "--chat-primary": colors.primary },
-	...colors?.secondary && { "--chat-secondary": colors.secondary }
+	...colors?.primary && {
+		"--chat-primary": colors.primary,
+		"--chat-on-primary": "#fff"
+	},
+	...colors?.secondary && {
+		"--chat-secondary": colors.secondary,
+		"--chat-on-secondary": "#1b1f24"
+	},
+	...colors?.accent && {
+		"--chat-accent": colors.accent,
+		"--chat-on-accent": "#fff"
+	}
 });
 /** The widget's stylesheet, inserted into its shadow root. */
 const CHAT_CSS = `
@@ -157,15 +242,17 @@ const CHAT_CSS = `
      \`:host\` rules, and only important ones reverse that. */
   all: initial !important;
   font-family: inherit !important;
-  --chat-primary: #1f4f8b;
-  --chat-on-primary: #fff;
-  --chat-secondary: #eaf0f7;
-  --chat-surface: #fff;
-  --chat-surface-soft: #f5f7fa;
-  --chat-text: #1b1f24;
-  --chat-muted: #5b6470;
-  --chat-border: #d9dee5;
-  --chat-radius: 16px;
+${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
+  ${SITE_RADIUS.chat}: var(${SITE_RADIUS.site}, ${SITE_RADIUS.own});
+  --chat-secondary: color-mix(in srgb, var(--chat-primary) 12%, var(--chat-surface));
+  --chat-on-secondary: var(--chat-text);
+  /* The small marks (the chat's name and sparkle, a card's place, icons, the ring): the primary,
+     unless a site sets an accent of its own (\`colors.accent\`). */
+  --chat-accent: var(--chat-primary);
+  --chat-on-accent: var(--chat-on-primary);
+  --chat-radius: calc(var(--chat-base-radius) * 1.6);
+  /* Buttons, chips and the pill are pills, unless the site's corners are square (radius 0). */
+  --chat-round: calc(var(--chat-base-radius) * 100);
   --chat-shadow: 0 18px 48px rgb(15 23 42 / 0.18);
   --chat-card-shadow: 0 1px 3px rgb(15 23 42 / 0.08), 0 8px 24px rgb(15 23 42 / 0.06);
   /* Not set here, so a site's value reaches the widget: \`--chat-top\` keeps a sticky header uncovered,
@@ -179,15 +266,16 @@ const CHAT_CSS = `
 .entry { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; }
 [data-position="left"] .entry { right: auto; left: 20px; }
 .pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px;
-  padding: 8px 20px 8px 8px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.7);
-  background: rgb(255 255 255 / 0.86); backdrop-filter: blur(16px) saturate(1.4);
+  padding: 8px 20px 8px 8px; border-radius: var(--chat-round);
+  border: 1px solid color-mix(in srgb, var(--chat-surface) 70%, transparent);
+  background: color-mix(in srgb, var(--chat-surface) 86%, transparent); backdrop-filter: blur(16px) saturate(1.4);
   -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--chat-shadow);
   color: var(--chat-text); font: inherit; text-align: left; cursor: pointer; }
 .spark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
-  background: var(--chat-primary); color: var(--chat-on-primary); }
+  background: var(--chat-accent); color: var(--chat-on-accent); }
 .pill-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
-.pill-title { font-size: 12px; font-weight: 600; color: var(--chat-primary); }
-.pill-prompt { font-size: 14px; font-weight: 600; }
+.pill-title { font-size: 12px; font-weight: 600; color: var(--chat-accent); }
+.pill-prompt { font-size: 15px; font-weight: 500; }
 .launcher-field { display: none; }
 .launcher-field input { border: 0; outline: none; background: transparent; padding: 0; margin: 0;
   font: inherit; font-size: 14px; font-weight: 600; color: var(--chat-text); width: 100%; }
@@ -195,12 +283,14 @@ const CHAT_CSS = `
 .launcher-field:focus-within input::placeholder { color: var(--chat-muted); }
 /* The field has no outline of its own: the pill shows keyboard focus, typed text or not. */
 .launcher-field:focus-within { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
-.glow { position: absolute; inset: -3px; border-radius: 999px; overflow: hidden; padding: 3px;
+/* Until the first message the pill glows in the accent colour as well. */
+.entry[data-glow] .pill { box-shadow: var(--chat-shadow), 0 0 28px color-mix(in srgb, var(--chat-accent) 38%, transparent); }
+.glow { position: absolute; inset: -3px; border-radius: var(--chat-round); overflow: hidden; padding: 3px;
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude,
   linear-gradient(#000 0 0); }
 .glow::before { content: ""; position: absolute; inset: -150%;
-  background: conic-gradient(from 0deg, transparent 0 62%, var(--chat-primary) 82%, transparent 100%); }
+  background: conic-gradient(from 0deg, transparent 0 62%, var(--chat-accent) 82%, transparent 100%); }
 @media (min-width: 1024px) {
   .launcher[data-narrow] { display: none; }
   .launcher-field { display: flex; width: 26rem; padding: 8px; cursor: text; }
@@ -216,46 +306,54 @@ const CHAT_CSS = `
 .scrim[hidden], .panel[hidden] { display: none; }
 @media (min-width: 1024px) {
   .panel { left: auto; right: 20px; bottom: 20px; top: calc(var(--chat-top, 0px) + 20px);
-    width: min(var(--chat-width, 600px), calc(100vw - 40px)); border-radius: var(--chat-radius); }
+    width: min(var(--chat-width, 700px), calc(100vw - 40px)); border-radius: var(--chat-radius); }
   [data-position="left"] .panel { right: auto; left: 20px; }
 }
-.header { display: flex; align-items: center; gap: 8px; padding: 16px 20px 6px; }
-.title { margin: 0 auto 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
-  text-transform: uppercase; color: var(--chat-primary); }
-.icon-button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
-  border: 1px solid var(--chat-border); border-radius: 999px; background: var(--chat-surface);
+.header { display: flex; align-items: center; gap: 8px; padding: 20px 24px 4px; }
+.title { margin: 0 auto 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
+  text-transform: uppercase; color: var(--chat-accent); }
+.icon-button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
+  border: 1px solid var(--chat-border); border-radius: var(--chat-round); background: var(--chat-surface);
   color: var(--chat-text); cursor: pointer; }
 .icon-button:hover { border-color: var(--chat-primary); }
-.notice { margin: 0; padding: 0 20px 12px; font-size: 12px; color: var(--chat-muted);
-  border-bottom: 1px solid var(--chat-border); }
-.messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 36px;
+/* Closing is the panel's one strong control, filled like the site's buttons. */
+.close { background: var(--chat-primary); border-color: var(--chat-primary); color: var(--chat-on-primary); }
+.close:hover { opacity: 0.9; }
+.notice { margin: 0; padding: 0 24px 14px; font-size: 12px; color: var(--chat-muted); }
+.messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px 40px;
   display: flex; flex-direction: column; gap: 16px; background: var(--chat-surface-soft);
   container-type: inline-size; }
 .turn { display: flex; flex-direction: column; }
 .message { max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; }
-.message[data-role="visitor"] { align-self: flex-end; margin-left: 48px; padding: 10px 14px;
-  border-radius: var(--chat-radius); background: var(--chat-secondary); }
-.message[data-role="assistant"] { align-self: flex-start; max-width: 100%; }
+.message[data-role="visitor"] { align-self: flex-end; margin-left: 48px; padding: 12px 16px;
+  border-radius: calc(var(--chat-radius) * 0.75); background: var(--chat-secondary);
+  color: var(--chat-on-secondary); }
+.message[data-role="assistant"] { align-self: flex-start; max-width: 100%; font-size: 16px; line-height: 1.6; }
+.message strong { font-weight: 600; }
 .ui { align-self: stretch; display: flex; flex-direction: column; gap: 12px; }
 .thinking { display: flex; gap: 5px; padding: 4px 2px; }
-.thinking i { width: 7px; height: 7px; border-radius: 999px; background: var(--chat-primary); opacity: 0.5; }
-.dock { position: relative; padding: 10px 20px 16px; background: var(--chat-surface); }
+.thinking i { width: 7px; height: 7px; border-radius: 999px; background: var(--chat-accent); opacity: 0.5; }
+.dock { position: relative; padding: 10px 20px 16px; background: var(--chat-surface-soft); }
 .dock::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
   pointer-events: none; background: linear-gradient(to top, var(--chat-surface-soft), transparent); }
 .suggestions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 10px;
   padding: 0 20px; }
 .suggestions::-webkit-scrollbar { display: none; }
-.suggestion { flex: none; max-width: 100%; border: 1px solid transparent; border-radius: 20px;
-  background: var(--chat-secondary); color: var(--chat-text); padding: 8px 14px; font: inherit;
-  font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left; white-space: nowrap;
-  cursor: pointer; }
-.suggestion:hover { border-color: var(--chat-primary); background: var(--chat-surface); }
+/* Suggestions and quick replies: filled pills, an icon for the topic in the accent colour. */
+.suggestion, .chip { flex: none; max-width: 100%; display: inline-flex; align-items: center; gap: 8px;
+  border: 1px solid transparent; border-radius: var(--chat-round); background: var(--chat-secondary);
+  color: var(--chat-on-secondary); padding: 8px 16px 8px 12px; font: inherit; font-size: 14px;
+  font-weight: 600; line-height: 1.35; text-align: left; white-space: nowrap; cursor: pointer; }
+.suggestion svg, .chip svg { flex: none; color: var(--chat-accent); }
+/* Suggestions scroll in one row; a quick reply wraps inside the message's width. */
+.chip { white-space: normal; }
+.suggestion:hover { border-color: var(--chat-primary); background: var(--chat-surface); color: var(--chat-text); }
 @media (min-width: 1024px) {
   .suggestions { flex-wrap: wrap; overflow: visible; margin: 0 0 10px; padding: 0; }
   .suggestion { white-space: normal; }
 }
 .composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 18px;
-  border: 1px solid var(--chat-border); border-radius: 24px; background: var(--chat-surface);
+  border: 1px solid var(--chat-border); border-radius: var(--chat-round); background: var(--chat-surface);
   box-shadow: 0 4px 16px rgb(15 23 42 / 0.08); }
 .composer:focus-within { border-color: var(--chat-text); }
 /* 16px keeps iOS from zooming into the field. */
@@ -263,14 +361,19 @@ const CHAT_CSS = `
   outline: none; background: transparent; padding: 6px 0; font: inherit; font-size: 16px;
   line-height: 1.5; color: inherit; field-sizing: content; }
 .send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
-  border-radius: 999px; background: var(--chat-primary); color: var(--chat-on-primary); cursor: pointer; }
+  border-radius: var(--chat-round); background: var(--chat-primary); color: var(--chat-on-primary); cursor: pointer; }
 .send:disabled { opacity: 0.3; cursor: not-allowed; }
-.consent { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; flex-direction: column; gap: 14px;
+.consent { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px;
   background: var(--chat-surface-soft); }
 .consent p { margin: 0; }
+.consent-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px;
+  border: 1px solid var(--chat-border); border-radius: var(--chat-radius); background: var(--chat-surface);
+  font-size: 14px; color: var(--chat-muted); }
 .pending { margin: 0; align-self: flex-end; max-width: 88%; padding: 10px 14px;
-  border-radius: var(--chat-radius); background: var(--chat-secondary); white-space: pre-wrap; }
-.pending figcaption { margin-bottom: 2px; }
+  border-radius: var(--chat-radius); background: var(--chat-secondary); color: var(--chat-on-secondary);
+  white-space: pre-wrap; }
+/* The bubble's own text colour, softened: the muted grey suits the surface, not a set secondary. */
+.pending figcaption { margin-bottom: 2px; color: inherit; opacity: 0.75; }
 .fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
 .fallback p { margin: 0; }
 
@@ -282,19 +385,35 @@ const CHAT_CSS = `
 .gallery::-webkit-scrollbar, .carousel::-webkit-scrollbar { display: none; }
 .gallery img { flex: 0 0 100%; scroll-snap-align: start; display: block; width: 100%; aspect-ratio: 5 / 3;
   height: auto; object-fit: cover; }
-.gallery-wrap .snap-nav { position: absolute; left: 8px; right: 8px; bottom: 8px; }
-.gallery-wrap .snap-nav .muted { background: rgb(0 0 0 / 0.5); color: #fff; padding: 1px 7px;
-  border-radius: 999px; font-size: 11px; }
-.carousel { gap: 12px; padding: 2px 2px 6px; }
+/* Dots say which photo shows; arrows come up under a pointer and on keyboard focus (a finger swipes:
+   on a touch screen they take no tap, so a tap on a photo's edge does not turn it unseen). */
+.dots { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: flex; gap: 4px; }
+.dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.6);
+  box-shadow: 0 0 2px rgb(0 0 0 / 0.3); }
+.dots i[data-current] { width: 14px; background: #fff; }
+.gallery-arrow { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center;
+  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--chat-round);
+  background: color-mix(in srgb, var(--chat-surface) 92%, transparent); color: var(--chat-text);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); cursor: pointer; opacity: 0; }
+.gallery-arrow[data-side="prev"] { left: 10px; }
+.gallery-arrow[data-side="next"] { right: 10px; }
+.gallery-wrap:hover .gallery-arrow:not(:disabled), .gallery-arrow:focus-visible { opacity: 1; }
+@media (hover: none) { .gallery-arrow:not(:focus-visible) { pointer-events: none; } }
+/* The row scrolls, so it clips: room below for the cards' shadow, taken back from the gap under it. */
+.carousel { gap: 12px; padding: 2px 2px 16px; margin-bottom: -10px; }
 .carousel > .card { flex: 0 0 86%; scroll-snap-align: start; }
-/* Room for two: results side by side, all of them, instead of a row to swipe. */
+/* Room for two: two cards side by side and the next one peeking in, still one row to swipe; two
+   results fill the row exactly, with nothing to swipe to. */
 @container (min-width: 520px) {
-  .carousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
-  .carousel-wrap > .snap-nav { display: none; }
+  .carousel > .card { flex-basis: calc((100% - 24px) / 2.15); }
+  .carousel:has(> .card:nth-child(2):last-child) > .card { flex-basis: calc((100% - 12px) / 2); }
+  .carousel-wrap:has(> .carousel > .card:nth-child(2):last-child) > .snap-nav { display: none; }
+  /* "n / total" counts one card per step, which a row of two no longer takes: the arrows stay. */
+  .carousel-wrap > .snap-nav > span { visibility: hidden; }
 }
 .snap-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
 .snap-nav button, .calendar-head button { border: 1px solid var(--chat-border); background: var(--chat-surface);
-  color: var(--chat-text); border-radius: 999px; width: 28px; height: 28px; cursor: pointer; font: inherit;
+  color: var(--chat-text); border-radius: var(--chat-round); width: 28px; height: 28px; cursor: pointer; font: inherit;
   line-height: 1; }
 .snap-nav button:disabled, .calendar-head button:disabled { opacity: 0.35; cursor: default; }
 .rating { color: #b7791f; font-weight: 700; }
@@ -302,11 +421,9 @@ const CHAT_CSS = `
 .breakdown .total { border-top: 1px solid var(--chat-border); padding-top: 6px; margin-top: 2px;
   font-weight: 700; }
 .alternatives, .quick-replies { display: flex; flex-wrap: wrap; gap: 6px; }
-.chip-link { border: 1px solid var(--chat-primary); color: var(--chat-primary); border-radius: 999px;
+.chip-link { border: 1px solid var(--chat-primary); color: var(--chat-primary); border-radius: var(--chat-round);
   padding: 5px 10px; text-decoration: none; font-size: 13px; }
-.chip { border: 1px solid transparent; background: var(--chat-secondary); color: var(--chat-text);
-  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer; }
-.chip:hover { border-color: var(--chat-primary); background: var(--chat-surface); }
+.chip:hover { border-color: var(--chat-primary); background: var(--chat-surface); color: var(--chat-text); }
 .calendar { border: 1px solid var(--chat-border); border-radius: var(--chat-radius); padding: 12px;
   background: var(--chat-surface); }
 .calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
@@ -314,13 +431,15 @@ const CHAT_CSS = `
 .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center;
   font-size: 12px; }
 .weekday { color: var(--chat-muted); font-weight: 600; }
-.day { padding: 4px 0; border-radius: 6px; }
+.day { padding: 4px 0; border-radius: min(6px, var(--chat-radius)); }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
   white-space: nowrap; }
-.day[data-status="free"], .legend i[data-status="free"] { background: #e3f1e7; color: #1f5133; }
-.day[data-status="booked"], .legend i[data-status="booked"] { background: #f1f2f4; color: #9aa1a9;
+.day[data-status="free"], .legend i[data-status="free"] {
+  background: color-mix(in srgb, var(--chat-primary) 14%, var(--chat-surface)); color: var(--chat-text); }
+.day[data-status="booked"], .legend i[data-status="booked"] { background: var(--chat-surface-soft);
+  color: var(--chat-muted);
   text-decoration: line-through; }
-.day[data-status="closed"] { color: #b8bec6; }
+.day[data-status="closed"] { color: var(--chat-muted); opacity: 0.6; }
 .day[data-stay], .legend i[data-stay] { background: var(--chat-primary); color: var(--chat-on-primary);
   text-decoration: none; }
 .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; }
@@ -335,25 +454,41 @@ const CHAT_CSS = `
 .compare-col dl { margin: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
 .compare-col dt { color: var(--chat-muted); font-size: 11px; margin-top: 4px; }
 .compare-col dd { margin: 0; overflow-wrap: anywhere; }
-.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
-.card-title { margin: 0; font-size: 15px; font-weight: 700; }
+.card-body { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 6px; }
+.card-title { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; }
+/* A rental card: place and score, name, facts and wishes; the stay's price and button below a line. */
+.rental-card, .stay-card { display: flex; flex-direction: column; }
+.rental-card .card-body { flex: 1; }
+.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
+.place { color: var(--chat-accent); font-size: 14px; }
+.score-chip { margin-left: auto; padding: 2px 8px; border-radius: calc(var(--chat-radius) * 0.4);
+  background: var(--chat-secondary); color: var(--chat-on-secondary); font-size: 12px; font-weight: 700; }
+.specs { margin: 0; color: var(--chat-muted); font-size: 14px; }
+.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  margin: 0 18px; padding: 12px 0 16px; border-top: 1px solid var(--chat-border); }
+.foot-price { display: flex; flex-direction: column; min-width: 0; }
+.foot-price .price { font-size: 18px; line-height: 1.3; }
+.foot-meta { color: var(--chat-muted); font-size: 12px; }
+.button.compact { margin: 0 0 0 auto; padding: 9px 20px; font-size: 14px; white-space: nowrap; }
 .muted { color: var(--chat-muted); font-size: 13px; }
 .price { font-weight: 700; }
 .button { display: inline-block; margin-top: 6px; text-align: center; text-decoration: none;
-  padding: 10px 16px; border-radius: 999px; background: var(--chat-primary); color: var(--chat-on-primary);
+  padding: 10px 16px; border-radius: var(--chat-round); background: var(--chat-primary); color: var(--chat-on-primary);
   border: 0; cursor: pointer; font: inherit; font-weight: 600; }
 .link { color: var(--chat-primary); }
 /* A link out of the chat while a reply still streams (ReplyLink). */
 [aria-disabled="true"] { opacity: 0.5; cursor: progress; }
 
-/* Wishes a found stay matches: a badge on the photo, the wishes ticked under the name. */
-.card-media { position: relative; }
-.badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px;
-  background: var(--chat-surface); color: var(--chat-primary); font-size: 12px; font-weight: 600;
-  box-shadow: var(--chat-card-shadow); }
-.wishes { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px;
-  font-size: 13px; }
-.wishes li::before { content: "✓ "; color: var(--chat-primary); font-weight: 700; }
+/* A card without photos: in a carousel a quiet block holds the photo's place, so the row lines up;
+   on its own the card simply starts with its text. */
+.no-photo { display: none; aspect-ratio: 5 / 3; place-items: center; background: var(--chat-surface-soft);
+  color: var(--chat-muted); }
+.carousel .no-photo { display: grid; }
+/* Wishes a found stay matches, ticked under the name. */
+.wishes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.wishes li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px;
+  border: 1px solid var(--chat-border); border-radius: var(--chat-round); font-size: 13px; font-weight: 600; }
+.wishes svg { color: var(--chat-accent); }
 
 /* The price calendar: a column per arrival, the bar's height its total. */
 .price-columns { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-auto-flow: column;
@@ -365,7 +500,8 @@ const CHAT_CSS = `
 .price-column[data-free]:not(:disabled):hover { border-color: var(--chat-primary); }
 .price-column[data-asked] { border-color: var(--chat-border); background: var(--chat-surface-soft); }
 .bar-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 72px; }
-.bar { width: 60%; border-radius: 6px 6px 2px 2px; background: var(--chat-secondary); }
+.bar { width: 60%; border-radius: min(6px, var(--chat-radius)) min(6px, var(--chat-radius)) 0 0;
+  background: color-mix(in srgb, var(--chat-primary) 30%, var(--chat-surface)); }
 .price-column[data-cheapest] .bar, .legend i[data-cheapest] { background: var(--chat-primary); }
 .legend i[data-asked] { background: var(--chat-surface-soft); border: 1px solid var(--chat-border); }
 .price-text { font-size: 12px; font-weight: 700; white-space: nowrap; }
@@ -398,7 +534,7 @@ const CHAT_CSS = `
 .map-attribution { margin: 0; padding: 2px 8px; font-size: 10px; color: var(--chat-muted); text-align: right; }
 .map-attribution a { color: inherit; }
 .map-pin { display: block; width: 18px; height: 18px; border-radius: 999px; background: var(--chat-primary);
-  border: 3px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); }
+  border: 3px solid var(--chat-surface); box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); }
 .maplibregl-map { position: relative; overflow: hidden; }
 .maplibregl-canvas-container, .maplibregl-canvas { position: absolute; left: 0; top: 0; }
 /* The canvas takes keyboard focus: a ring for the keyboard, none for a click or a tap. */
@@ -406,13 +542,13 @@ const CHAT_CSS = `
 .maplibregl-canvas:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: -2px; }
 .maplibregl-marker { position: absolute; top: 0; left: 0; will-change: transform; }
 
-[data-theme="soft"] { --chat-radius: 24px; --chat-shadow: 0 12px 32px rgb(15 23 42 / 0.12);
+[data-theme="soft"] { --chat-radius: calc(var(--chat-base-radius) * 2.4); --chat-shadow: 0 12px 32px rgb(15 23 42 / 0.12);
   --chat-card-shadow: 0 4px 18px rgb(15 23 42 / 0.07); }
-[data-theme="minimal"] { --chat-radius: 6px; --chat-shadow: none; --chat-card-shadow: none; }
+[data-theme="minimal"] { --chat-radius: calc(var(--chat-base-radius) * 0.6); --chat-shadow: none; --chat-card-shadow: none; }
 [data-theme="minimal"] .panel, [data-theme="minimal"] .pill, [data-theme="minimal"] .card,
 [data-theme="minimal"] .compare-col { border: 1px solid var(--chat-border); }
-[data-theme="minimal"] .pill, [data-theme="minimal"] .composer, [data-theme="minimal"] .suggestion,
-[data-theme="minimal"] .chip { border-radius: var(--chat-radius); }
+/* No pills in minimal: every control has its tight corners. */
+[data-theme="minimal"] { --chat-round: var(--chat-radius); }
 
 @keyframes chat-spin { to { transform: rotate(1turn); } }
 @keyframes chat-in { from { opacity: 0; transform: translateY(16px); } }
@@ -436,7 +572,7 @@ const CHAT_CSS = `
 `;
 //#endregion
 //#region src/WebsiteChat.tsx
-const Panel = lazy(() => import("./panel-C0Bb7ln-.js"));
+const Panel = lazy(() => import("./panel-BsocDe9I.js"));
 /** See {@link WebsiteChatComponent}. */
 const WebsiteChat = function WebsiteChat(props) {
 	const { endpoint, locale, theme = "classic", position = "right" } = props;
@@ -445,6 +581,7 @@ const WebsiteChat = function WebsiteChat(props) {
 	const field = useRef(null);
 	const wasOpen = useRef(false);
 	const [root, setRoot] = useState(null);
+	const [replaced, setReplaced] = useState({});
 	const [available, setAvailable] = useState(false);
 	const [mounted, setMounted] = useState(false);
 	const [open, setOpen] = useState(false);
@@ -483,6 +620,7 @@ const WebsiteChat = function WebsiteChat(props) {
 	useEffect(() => {
 		const element = host.current;
 		if (!available || !element) return;
+		setReplaced(unusableSiteTokens(element));
 		setRoot(element.shadowRoot ?? element.attachShadow({ mode: "open" }));
 	}, [available]);
 	const submitEntry = (event) => {
@@ -494,7 +632,10 @@ const WebsiteChat = function WebsiteChat(props) {
 	};
 	return /* @__PURE__ */ jsx("div", {
 		ref: host,
-		style: colorVariables(props.colors),
+		style: {
+			...replaced,
+			...colorVariables(props.colors)
+		},
 		children: root && available && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: CHAT_CSS }), /* @__PURE__ */ jsxs("div", {
 			className: "chat",
 			"data-theme": theme,
@@ -503,7 +644,7 @@ const WebsiteChat = function WebsiteChat(props) {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Panel, {
 					endpoint,
-					clientVersion: "1.0.1",
+					clientVersion: "1.1.1",
 					locale,
 					copy,
 					searchPath: props.searchPath,