@v-office/website-chat 1.1.3 → 1.2.0

package/README.md

@@ -41,8 +41,8 @@ It takes its colours and corners from the site's shadcn tokens (`--primary`,
 are square (`--radius: 0`) gets square buttons too.
 
 A site with a sticky header sets `--chat-top` (its height) on any element around the widget, such as
-`:root`: the dimmed page and the panel start below it. `--chat-width` widens the panel on wide screens
-(default `700px`).
+`:root`: from 1024 px wide, the dimmed page and the panel start below it; narrower, the chat opens as a
+full-height sheet over the header. `--chat-width` widens the panel on wide screens (default `700px`).
 
 The service places these components in replies: `RentalCard` (photo gallery, rating, the wishes the
 search that found it applied), `RentalCarousel`, `Compare`, `StayQuote`, `PriceBreakdown`,

package/dist/{catalog-y3xQ2jXW.js → catalog-ClcCUjf7.js}

@@ -28,67 +28,67 @@ const chatCatalog = defineCatalog(schema, {
 		},
 		RentalCarousel: {
 			props: z.object({ items: z.array(offer).min(2).max(8) }),
-			description: "Several rentals side by side, swipeable, each as a RentalCard. Use it for search results instead of several RentalCards."
+			description: "Several rentals side by side, swipeable, each as a RentalCard: search results, instead of several RentalCards. After a flexible search, each rental with its first period as its stayId."
 		},
 		StayQuote: {
 			props: z.object({ stayId: id }),
-			description: "One priced stay: the rental, the dates, the party, the total and a booking button."
+			description: "One priced stay: the rental, the dates, the party, the total and a booking button. Show it whenever the visitor asks what one stay costs, with the stayId from quote_stay."
 		},
 		PriceBreakdown: {
 			props: z.object({ stayId: id }),
-			description: "What a quoted stay's total is made of (nights, cleaning, pets, …), line by line. Only for a stay from quote_stay."
+			description: "What a stay's total is made of (nights, cleaning, pets, …), line by line, when the visitor asks. Only for a stay from quote_stay or configure_stay."
 		},
 		AlternativeStays: {
 			props: z.object({
 				rentalId: id,
 				stayIds: z.array(id).min(1).max(6)
 			}),
-			description: "Free periods of one rental as tappable choices with their prices: other dates when the asked ones are taken, or the periods a flexible search found."
+			description: "Other free periods of one rental as tappable choices with their prices, right after that rental's card: the rental the reply is about, the one taken on the asked dates, or a rental's further periods after a flexible search; never the stay its card shows. For a rental the visitor named, its RentalCard comes first (stayId null when taken). For several taken rentals use a RentalCarousel with each rental's first free period as its stayId, and say the dates differ. At most one AlternativeStays per reply."
 		},
 		AvailabilityCalendar: {
 			props: z.object({
 				rentalId: id,
 				stayId: id.nullable()
 			}),
-			description: "A rental's month calendar of free and taken days, with a stay's dates marked when there is one. Only after get_availability."
+			description: "A rental's month calendar of free and taken days, with a stay's dates marked when there is one. Show it whenever the visitor asks when a rental is free, after get_availability. Read-only: the visitor cannot pick days in it."
 		},
 		PriceCalendar: {
 			props: z.object({ rentalId: id }),
-			description: "One rental's total for the same length of stay at the arrivals around the asked one, cheapest marked; tapping one asks for it. Only after price_calendar."
+			description: "One rental's total for the same length of stay at the arrivals around the asked one; tapping one asks for it. For other or cheaper arrival dates, only after price_calendar. Not what one stay costs: that is a StayQuote."
 		},
 		ReviewSummary: {
 			props: z.object({ rentalId: id }),
-			description: "A rental's guest rating as the booking system sums it up, its category ratings and a few review texts. Only after get_reviews."
+			description: "A rental's guest rating as the booking system sums it up, its category ratings and a few review texts, when the visitor asks how guests rate it. Only after get_reviews; sum up in a sentence, in your own words, what guests value."
 		},
 		RentalFacts: {
 			props: z.object({
 				rentalId: id,
 				groups: z.array(z.string().trim().min(1).max(80)).min(1).max(4)
 			}),
-			description: "The facts of one rental in the groups get_rental listed (by their label, such as Haustiere or Lage), for a question about pets, the kitchen or the surroundings."
+			description: "The facts of one rental in the groups get_rental listed, by their label. Show it whenever the visitor asks what one rental has or allows (pets, kitchen, parking, surroundings), after get_rental; answer the question in your text as well."
 		},
 		RentalMap: {
 			props: z.object({ rentalId: id }),
-			description: "Where one rental is: a map the visitor loads with a tap, and a link to its page."
+			description: "Where one rental is, when the visitor asks: a map the visitor loads with a tap, and a link to its page."
 		},
 		Compare: {
 			props: z.object({ items: z.array(offer).min(2).max(3) }),
-			description: "Two or three rentals side by side: rating, rooms, highlights, the stay and its price."
+			description: "Two or three rentals side by side: rating, rooms, highlights, the stay and its price. Show it whenever the visitor weighs or compares two or three rentals, with stays of the same dates; a rental taken then gets stayId null."
 		},
 		StayLink: {
 			props: z.object({
 				rentalId: id,
 				stayId: id.nullable()
 			}),
-			description: "A button to the rental's page on this website, with the stay filled in, to book there."
+			description: "A button to the rental's page on this website, with the stay filled in, to book there. Only for a rental or stay shown without one: cards, carousels, comparisons and quotes carry their own booking buttons."
 		},
 		ContactLink: {
 			props: z.object({}),
-			description: "A link to this website's contact page."
+			description: "A link to this website's contact page. Show it whenever you send the visitor to the agency; never only offer it."
 		},
 		QuickReplies: {
 			props: z.object({ options: z.array(z.string().trim().min(1).max(40)).min(1).max(4) }),
-			description: "Up to four short answers the visitor can tap to send as their next message (\"Nur mit Sauna\", \"Andere Termine\"). Never a fact or a price."
+			description: "Up to four short answers the visitor can tap, in the language of your reply (a date, a party size, a wish): with every question you ask. Never a fact or a price."
 		}
 	},
 	actions: {}

package/dist/catalog.js

@@ -1,3 +1,3 @@
 import { i as SESSION_TTL_S, n as CHAT_PATH, r as MAX_MESSAGE_CHARS, t as CHAT_LOCALES } from "./protocol-BuNqZAMt.js";
-import { a as componentsFor, c as rendersBold, i as chatSpec, l as stateKey, n as PLACEABLE_COMPONENTS, o as handsOverStays, r as chatCatalog, s as parseItem, t as COMPONENT_SINCE, u as statePath } from "./catalog-y3xQ2jXW.js";
+import { a as componentsFor, c as rendersBold, i as chatSpec, l as stateKey, n as PLACEABLE_COMPONENTS, o as handsOverStays, r as chatCatalog, s as parseItem, t as COMPONENT_SINCE, u as statePath } from "./catalog-ClcCUjf7.js";
 export { CHAT_LOCALES, CHAT_PATH, COMPONENT_SINCE, MAX_MESSAGE_CHARS, PLACEABLE_COMPONENTS, SESSION_TTL_S, chatCatalog, chatSpec, componentsFor, handsOverStays, parseItem, rendersBold, stateKey, statePath };

package/dist/{icons-DIqOmKoe.js → icons-BK5Lk0cP.js}

@@ -171,7 +171,7 @@ const TOPICS = [
 	},
 	{
 		topic: "people",
-		words: /famili|kinder|zu zweit|personen|erwachsene|gruppe|family|kids|people|adults|couple/
+		words: /famili|kinder|zu zweit|personen|erwachsene|gruppe|family|kids|people|adults|couple|for two(?! weeks| nights)/
 	},
 	{
 		topic: "date",

package/dist/index.d.ts

@@ -45,6 +45,8 @@ interface ChatCopy {
   readonly photo: string;
   readonly previous: string;
   readonly next: string;
+  /** A carousel of found rentals, for a screen reader. */
+  readonly rentalsFound: string;
   /** `{n}` reviews, per plural form. */
   readonly reviews: Readonly<Partial<Record<Intl.LDMLPluralRule, string>>> & {
     readonly other: string;
@@ -82,6 +84,10 @@ interface ChatCopy {
   readonly children: Readonly<Partial<Record<Intl.LDMLPluralRule, string>>> & {
     readonly other: string;
   };
+  /** The pets in a stay's party, after the people. */
+  readonly pets: Readonly<Partial<Record<Intl.LDMLPluralRule, string>>> & {
+    readonly other: string;
+  };
 }
 export declare const DEFAULT_COPY: Readonly<Record<ChatLocale, ChatCopy>>;
 //#endregion

package/dist/index.js

@@ -1,5 +1,5 @@
 import { r as MAX_MESSAGE_CHARS, t as CHAT_LOCALES } from "./protocol-BuNqZAMt.js";
-import { f as chatAvailable, s as Spark, t as Arrow, u as loadConversation } from "./icons-DIqOmKoe.js";
+import { f as chatAvailable, s as Spark, t as Arrow, u as loadConversation } from "./icons-BK5Lk0cP.js";
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,10 +14,10 @@ const DEFAULT_COPY = {
 		notice: "Sie chatten mit einer KI. Preise und Verfügbarkeit in den Karten kommen direkt aus unserem Buchungssystem.",
 		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",
+			"Sommerwoche für 2 Erwachsene und 2 Kinder",
 			"Eine Woche mit Hund, gern mit eingezäuntem Garten",
 			"Ein Wochenende zu zweit mit Sauna",
-			"Was ist in den Herbstferien noch frei?"
+			"Was ist am nächsten Wochenende noch frei?"
 		],
 		placeholder: "Wann, mit wem, was ist Ihnen wichtig?",
 		send: "Senden",
@@ -43,6 +43,7 @@ const DEFAULT_COPY = {
 		photo: "Foto",
 		previous: "Zurück",
 		next: "Weiter",
+		rentalsFound: "Gefundene Unterkünfte",
 		reviews: {
 			one: "{n} Bewertung",
 			other: "{n} Bewertungen"
@@ -75,6 +76,10 @@ const DEFAULT_COPY = {
 		children: {
 			one: "{n} Kind",
 			other: "{n} Kinder"
+		},
+		pets: {
+			one: "{n} Haustier",
+			other: "{n} Haustiere"
 		}
 	},
 	en: {
@@ -86,10 +91,10 @@ const DEFAULT_COPY = {
 		notice: "You are chatting with an AI. Prices and availability in the cards come straight from our booking system.",
 		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 summer week for 2 adults and 2 kids",
 			"A week with our dog, ideally with a fenced garden",
 			"A weekend for two with a sauna",
-			"What is still free in the autumn holidays?"
+			"Anything free next weekend?"
 		],
 		placeholder: "When, who with, what matters to you?",
 		send: "Send",
@@ -115,6 +120,7 @@ const DEFAULT_COPY = {
 		photo: "Photo",
 		previous: "Previous",
 		next: "Next",
+		rentalsFound: "Rentals found",
 		reviews: {
 			one: "{n} review",
 			other: "{n} reviews"
@@ -147,6 +153,10 @@ const DEFAULT_COPY = {
 		children: {
 			one: "{n} child",
 			other: "{n} children"
+		},
+		pets: {
+			one: "{n} pet",
+			other: "{n} pets"
 		}
 	}
 };
@@ -246,6 +256,8 @@ ${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 tinted bubbles' edge: on a dark surface the tint alone barely stands off the message area. */
+  --chat-tint-edge: color-mix(in srgb, var(--chat-primary) 30%, transparent);
   /* 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);
@@ -255,15 +267,21 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
   --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,
-     \`--chat-width\` widens the panel on wide screens. */
+  /* Not set here, so a site's value reaches the widget, on wide screens (from 1024px): \`--chat-top\`
+     keeps a sticky header uncovered, \`--chat-width\` widens the panel. A phone's sheet covers the
+     header: the panel is modal, so the header could not be tapped and would only cost height. */
 }
 * { box-sizing: border-box; }
 .chat { color: var(--chat-text); font-size: 15px; line-height: 1.45; }
+/* One focus ring for every control, in the site's primary; a click or a tap shows none. Without
+   specificity (:where), so a control that needs its ring elsewhere sets it with a plain rule. */
+:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--chat-primary);
+  outline-offset: 2px; }
 
 /* The entry pill: frosted glass over any page, the chat's mark, a ring running round it until the
    visitor has asked something. Phones tap it; wide screens type into it. */
-.entry { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; }
+.entry { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+  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: var(--chat-round);
@@ -297,69 +315,75 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 }
 
 /* The panel: over the dimmed page, a card at the screen's edge; on a phone a sheet from the bottom. */
-.scrim { position: fixed; left: 0; right: 0; bottom: 0; top: var(--chat-top, 0px); z-index: 2147482999;
+.scrim { position: fixed; inset: 0; z-index: 2147482999;
   background: rgb(15 23 42 / 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
+/* Clipped, not hidden, where supported: a clipping box is no scroll container, so no script, focus or
+   find-in-page can scroll the panel and shift its header out of view. */
 .panel { position: fixed; z-index: 2147483000; left: 0; right: 0; bottom: 0;
-  top: calc(var(--chat-top, 0px) + 12px); display: flex; flex-direction: column;
+  top: 12px; display: flex; flex-direction: column;
   background: var(--chat-surface); border-radius: var(--chat-radius) var(--chat-radius) 0 0;
-  box-shadow: var(--chat-shadow); overflow: hidden; }
+  box-shadow: var(--chat-shadow); overflow: hidden; overflow: clip; }
 .scrim[hidden], .panel[hidden] { display: none; }
+/* Focused by script only (a phone reopening a conversation), never a stop for Tab. */
+.panel:focus { outline: none; }
 @media (min-width: 1024px) {
+  .scrim { top: var(--chat-top, 0px); }
   .panel { left: auto; right: 20px; bottom: 20px; top: calc(var(--chat-top, 0px) + 20px);
     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: 20px 24px 4px; }
+.header { display: flex; align-items: center; gap: 8px; padding: 12px 24px 4px; }
+@media (min-width: 1024px) { .header { padding-top: 20px; } }
 .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); }
 /* 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;
+.notice { margin: 0; padding: 0 24px 14px; font-size: 13px; color: var(--chat-muted); }
+/* Positioned: the absolute speaker labels (.sr-only) scroll with the list instead of giving the panel a
+   scroll range, and a turn's offsetTop is measured from the list. */
+.messages { position: relative; 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: 12px 16px;
-  border-radius: calc(var(--chat-radius) * 0.75); background: var(--chat-secondary);
+  border: 1px solid var(--chat-tint-edge); 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 { display: flex; align-items: center; gap: 5px; padding: 4px 2px; }
+.thinking-label { margin-left: 6px; color: var(--chat-muted); font-size: 14px; }
 .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 { position: relative; padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px));
+  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; }
-/* Suggestions and quick replies: filled pills, an icon for the topic in the accent colour. */
+/* Suggestions wrap, on a phone too: in a row that scrolls, one cut chip hides the others. */
+.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
+/* Suggestions and quick replies: filled pills; a suggestion has an icon for its topic in the accent
+   colour (a quick reply is the model's words, an icon guessed from them can be wrong). */
 .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);
+  border: 1px solid var(--chat-tint-edge); 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; }
-}
+  font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
+.chip { padding-left: 16px; }
+.suggestion svg { flex: none; color: var(--chat-accent); }
 .composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 18px;
   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); }
+/* The field's ring, not the send button's too (that one has its own). */
+.composer:has(textarea:focus-visible) { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
 /* 16px keeps iOS from zooming into the field. */
 .composer textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 128px; resize: none; border: 0;
   outline: none; background: transparent; padding: 6px 0; font: inherit; font-size: 16px;
   line-height: 1.5; color: inherit; field-sizing: content; }
+/* The field's only visible label: the muted text colour, not the browser's grey (below AA in dark). */
+.composer textarea::placeholder { color: var(--chat-muted); opacity: 1; }
 .send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
   border-radius: var(--chat-round); background: var(--chat-primary); color: var(--chat-on-primary); cursor: pointer; }
 .send:disabled { opacity: 0.3; cursor: not-allowed; }
@@ -374,8 +398,11 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
   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; }
+/* The chat cannot answer: its reply to the visitor's message, the ways on as buttons. */
+.fallback { display: flex; flex-direction: column; gap: 12px; }
 .fallback p { margin: 0; }
+.fallback-links { display: flex; flex-wrap: wrap; gap: 8px; }
+.fallback-links > .button { margin: 0; }
 
 /* What the replies show. */
 .card { border-radius: var(--chat-radius); overflow: hidden; background: var(--chat-surface);
@@ -397,7 +424,7 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
   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; }
+.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; }
@@ -408,74 +435,112 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
   .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; }
+  /* The count follows the first card in view, and two show at once: it would skip numbers. */
+  .carousel-wrap > .snap-nav > span { display: none; }
 }
-.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: 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; }
+/* The row's controls, grouped at its end: "‹ 2 / 8 ›". */
+.snap-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+.snap-nav button, .calendar-head button { flex: none; display: grid; place-items: center; width: 36px;
+  height: 36px; padding: 0; border: 1px solid var(--chat-border); background: var(--chat-surface);
+  color: var(--chat-text); border-radius: var(--chat-round); cursor: pointer; }
+.snap-nav button:disabled, .calendar-head button:disabled { opacity: 0.5; cursor: default; }
 .rating { color: #b7791f; font-weight: 700; }
 .breakdown .line { display: flex; justify-content: space-between; gap: 12px; }
 .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: var(--chat-round);
-  padding: 5px 10px; text-decoration: none; font-size: 13px; }
-.chip:hover { border-color: var(--chat-primary); background: var(--chat-surface); color: var(--chat-text); }
+.alt-chips, .quick-replies { display: flex; flex-wrap: wrap; gap: 6px; }
+.alt-caption { margin: 0 0 4px; font-size: 13px; color: var(--chat-muted); }
+.chip-link { display: inline-flex; align-items: center; border: 1px solid var(--chat-primary);
+  color: var(--chat-primary); border-radius: var(--chat-round); padding: 5px 10px; text-decoration: none;
+  font-size: 14px; }
 .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;
   font-weight: 700; margin-bottom: 8px; text-align: center; }
 .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center;
-  font-size: 12px; }
+  font-size: 13px; }
 .weekday { color: var(--chat-muted); font-weight: 600; }
 .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; }
+/* Free, booked and the stay must tell apart in dark too: a stronger tint for free, an edge for booked
+   (inset, so a booked day is no taller than the others). */
 .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); }
+  background: color-mix(in srgb, var(--chat-primary) 26%, 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);
+  box-shadow: inset 0 0 0 1px var(--chat-border); color: var(--chat-muted);
   text-decoration: line-through; }
 .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; }
-.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px;
-  vertical-align: -1px; }
+.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 13px; }
+.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px;
+  vertical-align: -1px; border: 1px solid var(--chat-border); }
 .compare { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
 .compare-col { border-radius: var(--chat-radius); padding: 10px; background: var(--chat-surface);
-  box-shadow: var(--chat-card-shadow); display: flex; flex-direction: column; gap: 6px; font-size: 13px;
-  min-width: 0; }
-/* Three columns leave a button about 90px: "Zur Buchung" fits on one line only without side padding. */
-.compare-col .button { padding: 8px 2px; font-size: 13px; }
+  box-shadow: var(--chat-card-shadow); display: flex; flex-direction: column; gap: 6px; font-size: 14px;
+  min-width: 0; hyphens: auto; }
 .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; }
+.compare-col dt { color: var(--chat-muted); font-size: 12px; margin-top: 4px; }
+.compare-col dd { margin: 0; overflow-wrap: break-word; }
+.compare-col .price { font-size: 16px; }
+/* A phone has room for two columns, not three of 100px with a word on each line: the third peeks in
+   and the row scrolls, with room below for the columns' shadow, as the carousel. */
+@container (max-width: 519px) {
+  /* A phone shows one card at a time: each as tall as its own content, so the first card's price and
+     button are not pushed down to the tallest card's foot. */
+  .carousel { align-items: flex-start; }
+  .compare { grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory;
+    scrollbar-width: none; padding: 2px 2px 16px; margin-bottom: -10px; }
+  .compare::-webkit-scrollbar { display: none; }
+  .compare-col { scroll-snap-align: start; }
+}
+/* Side by side, the rows line up across the columns (a long name pushes every row of its column down
+   otherwise): the name, the list's eight cells and the button share the comparison's ten rows. */
+@supports (grid-template-rows: subgrid) {
+  @container (min-width: 520px) {
+    .compare { grid-template-rows: repeat(10, auto); row-gap: 0; }
+    .compare-col { display: grid; grid-row: span 10; grid-template-rows: subgrid; }
+    .compare-col dl { display: grid; grid-row: span 8; grid-template-rows: subgrid; }
+    .compare-col .button { grid-row: -2; }
+  }
+}
 .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; }
+/* One long name (v9 names often run to a dozen words) would make every card of a row taller: in a
+   carousel the name stops at three lines. The single card, the quote and Compare show it whole. */
+.carousel .card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+  overflow: hidden; }
 /* 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; }
+  background: var(--chat-secondary); color: var(--chat-on-secondary); font-size: 13px; 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; }
+.foot-meta { color: var(--chat-muted); font-size: 14px; }
+.foot-meta .period { white-space: nowrap; }
 .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: var(--chat-round); background: var(--chat-primary); color: var(--chat-on-primary);
-  border: 0; cursor: pointer; font: inherit; font-weight: 600; }
+/* Relative: the link's screen-reader name (an absolute .sr-only) stays inside a scrolled row, which
+   clips it, instead of sticking out of the row and widening the panel. */
+.button { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 6px;
+  text-align: center; text-decoration: none; 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 button on its own in a reply: as wide as its label needs, not the panel's 650px. */
+.ui > .button, .ui > .link { align-self: flex-start; min-width: 14rem; }
+/* The way to the contact page in a reply (ContactLink) and in the fallback: a button, outlined. */
+.ui > .link, .fallback-links > .link { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px;
+  border: 1px solid var(--chat-primary); border-radius: var(--chat-round); text-decoration: none;
+  font-weight: 600; }
 /* A link out of the chat while a reply still streams (ReplyLink). */
 [aria-disabled="true"] { opacity: 0.5; cursor: progress; }
 
@@ -484,6 +549,12 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .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; }
+/* A card on its own in a wide panel: a flatter photo, so the card's name and price fit the list with it. */
+@container (min-width: 520px) {
+  .ui > .rental-card .gallery img { aspect-ratio: 2 / 1; max-height: 280px; }
+  /* In a carousel too: the cards' prices and the reply under them come up above the dock sooner. */
+  .carousel .gallery img, .carousel .no-photo { aspect-ratio: 2 / 1; }
+}
 /* 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;
@@ -491,21 +562,31 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .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;
-  grid-auto-columns: minmax(68px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: none; }
-.price-column { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
+.price-columns { position: relative; list-style: none; margin: 10px 0 0; padding: 0; display: grid;
+  grid-auto-flow: column; grid-auto-columns: minmax(68px, 1fr); gap: 6px; overflow-x: auto;
+  scrollbar-width: none; }
+.price-columns::-webkit-scrollbar { display: none; }
+/* More columns beyond an edge fade out there. */
+.price-columns[data-fade="end"] { mask-image: linear-gradient(to left, transparent, #000 32px); }
+.price-columns[data-fade="start"] { mask-image: linear-gradient(to right, transparent, #000 32px); }
+.price-columns[data-fade="both"] { mask-image: linear-gradient(to right, transparent, #000 32px,
+  #000 calc(100% - 32px), transparent); }
+/* The arrival's day at the column's foot, level across the row when "nicht buchbar" takes two lines. */
+.price-column { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
   padding: 6px 2px; border: 1px solid transparent; border-radius: 10px; background: transparent;
   color: inherit; font: inherit; cursor: pointer; }
 .price-column:disabled { cursor: default; }
-.price-column[data-free]:not(:disabled):hover { border-color: var(--chat-primary); }
+/* Inside the row that scrolls, so it clips: the ring sits inside the column. */
+.price-column:focus-visible { outline-offset: -2px; }
 .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: 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; }
-.price-column:not([data-free]) .price-text { color: var(--chat-muted); font-weight: 500; }
+.price-column > .muted { margin-top: auto; }
+.price-text { font-size: 14px; font-weight: 700; white-space: nowrap; }
+.price-column:not([data-free]) .price-text { color: var(--chat-muted); font-weight: 500; white-space: normal; }
 
 /* Reviews: the PMS's score and grade, its categories, a few texts. */
 .score { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
@@ -531,7 +612,7 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .map-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
   min-height: 150px; padding: 16px; text-align: center; background: var(--chat-surface-soft); }
 .map-gate p { margin: 0; }
-.map-attribution { margin: 0; padding: 2px 8px; font-size: 10px; color: var(--chat-muted); text-align: right; }
+.map-attribution { margin: 0; padding: 2px 8px; font-size: 12px; 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 var(--chat-surface); box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); }
@@ -542,6 +623,24 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .maplibregl-canvas:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: -2px; }
 .maplibregl-marker { position: absolute; top: 0; left: 0; will-change: transform; }
 
+/* Hover only where there is a pointer: on a touch screen a tapped chip would keep its hover look. */
+@media (hover: hover) {
+  .icon-button:hover { border-color: var(--chat-primary); }
+  .close:hover { opacity: 0.9; }
+  .suggestion:hover, .chip:not(:disabled):hover { border-color: var(--chat-primary);
+    background: var(--chat-surface); color: var(--chat-text); }
+  .gallery-wrap:hover .gallery-arrow:not(:disabled) { opacity: 1; }
+  .price-column[data-free]:not(:disabled):hover { border-color: var(--chat-primary); }
+}
+
+/* Fingers: every control at least 44px each way. */
+@media (pointer: coarse) {
+  .icon-button, .send, .snap-nav button, .calendar-head button, .gallery-arrow { width: 44px; height: 44px; }
+  .composer { padding: 4px 4px 4px 18px; }
+  .composer textarea { min-height: 44px; padding-block: 10px; }
+  .chip, .suggestion, .button, .chip-link, .ui > .link, .fallback-links > .link { min-height: 44px; }
+}
+
 [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: calc(var(--chat-base-radius) * 0.6); --chat-shadow: none; --chat-card-shadow: none; }
@@ -554,11 +653,13 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 @keyframes chat-in { from { opacity: 0; transform: translateY(16px); } }
 @keyframes chat-fade { from { opacity: 0; } }
 @keyframes chat-pulse { 50% { opacity: 1; transform: translateY(-2px); } }
+@media (prefers-reduced-motion: no-preference) and (hover: hover) {
+  .pill:hover { transform: translateY(-2px); }
+}
 @media (prefers-reduced-motion: no-preference) {
   .glow::before { animation: chat-spin 3.2s linear infinite; }
   .entry { animation: chat-in 400ms cubic-bezier(0.25, 1, 0.5, 1); }
   .pill { transition: transform 200ms ease-out; }
-  .pill:hover { transform: translateY(-2px); }
   .panel { animation: chat-in 400ms cubic-bezier(0.25, 1, 0.5, 1); }
   .scrim { animation: chat-fade 300ms ease-out; }
   .thinking i { animation: chat-pulse 1.1s ease-in-out infinite; }
@@ -572,7 +673,7 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 `;
 //#endregion
 //#region src/WebsiteChat.tsx
-const Panel = lazy(() => import("./panel-BN_DMA4R.js"));
+const Panel = lazy(() => import("./panel-CfS3SuRX.js"));
 /** See {@link WebsiteChatComponent}. */
 const WebsiteChat = function WebsiteChat(props) {
 	const { endpoint, locale, theme = "classic", position = "right" } = props;
@@ -644,7 +745,7 @@ const WebsiteChat = function WebsiteChat(props) {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Panel, {
 					endpoint,
-					clientVersion: "1.1.3",
+					clientVersion: "1.2.0",
 					locale,
 					copy,
 					searchPath: props.searchPath,