@v-office/website-chat 1.1.3 → 1.3.0

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 { h as chatAvailable, l as Spark, p as loadConversation, t as Arrow } from "./icons-B0_KM_uQ.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,16 +12,43 @@ 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.",
+		aiBadge: "KI",
+		noticeShort: "Preise aus dem Buchungssystem",
+		noticeMore: "Mehr zum KI-Hinweis",
 		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?",
+		placeholder: "Ihre Reise beschreiben …",
 		send: "Senden",
 		thinking: "Die Antwort wird geschrieben",
+		status: {
+			search: "Suche passende Unterkünfte …",
+			rental: "Lese die Angaben zur Unterkunft …",
+			availability: "Prüfe freie Tage …",
+			quote: "Prüfe den Preis im Buchungssystem …",
+			reviews: "Lese die Bewertungen …"
+		},
+		retry: "Erneut senden",
+		privacyLink: "Datenschutzerklärung",
+		yourPick: "Ihre Auswahl",
+		yourTrip: "Ihre Reise",
+		assumed: "angenommen",
+		guests: {
+			one: "{n} Gast",
+			other: "{n} Gäste"
+		},
+		adultsShort: { other: "{n} Erw." },
+		weekend: "Wochenende",
+		tripStarters: {
+			party: "Wir sind ",
+			period: "Andere Reisezeit: ",
+			nights: "Andere Dauer: ",
+			wishes: "Andere Wünsche: "
+		},
 		yourMessage: "Ihre Nachricht",
 		consent: "Der Chat wird von einer KI beantwortet. Ihre Nachrichten werden dazu an unseren KI-Dienstleister übermittelt.",
 		consentAccept: "Chat starten",
@@ -31,7 +58,7 @@ const DEFAULT_COPY = {
 		contactLink: "Kontakt aufnehmen",
 		bookStay: "Zur Buchung",
 		viewRental: "Zur Unterkunft",
-		book: "Buchen",
+		book: "Zur Buchung",
 		view: "Ansehen",
 		matchBadge: "Passt genau",
 		nights: {
@@ -39,10 +66,31 @@ const DEFAULT_COPY = {
 			other: "{n} Nächte"
 		},
 		total: "Gesamtpreis",
+		totalForNights: {
+			one: "Gesamtpreis für {n} Nacht",
+			other: "Gesamtpreis für {n} Nächte"
+		},
+		priceDetails: "Preisdetails",
+		dealFallback: "Angebot",
+		youSave: "Sie sparen {amount}",
+		freeCancellation: "Kostenlos stornierbar bis {date}",
+		nonRefundable: "Nicht erstattbar",
+		arrival: "Anreise",
+		departure: "Abreise",
+		continueToBooking: "Weiter zur Buchung",
+		nothingBookedYet: "Noch nichts gebucht. Auf der Buchungsseite:",
+		handoverSteps: [
+			"Kontaktdaten eingeben",
+			"Zahlungsart wählen",
+			"Bestätigung per E-Mail"
+		],
 		notBookable: "Für diesen Zeitraum nicht buchbar",
 		photo: "Foto",
+		openPhotos: "Fotos von {name} ansehen",
+		closePhotos: "Fotos schließen",
 		previous: "Zurück",
 		next: "Weiter",
+		rentalsFound: "Gefundene Unterkünfte",
 		reviews: {
 			one: "{n} Bewertung",
 			other: "{n} Bewertungen"
@@ -53,6 +101,19 @@ const DEFAULT_COPY = {
 		booked: "belegt",
 		closed: "nicht buchbar",
 		yourStay: "Ihr Zeitraum",
+		arrivalPossible: "Anreise möglich",
+		cheaper: "günstiger",
+		dearer: "teurer",
+		showPrice: "Preis anzeigen",
+		arrivalOn: "Anreise {date}",
+		possibleFrom: "Ab {date} möglich",
+		until: "bis {date}",
+		otherArrival: "Anderen Anreisetag wählen",
+		otherArrivalStarter: "Anreise am ",
+		freePeriods: "Freie Termine",
+		freePeriodsIn: "Freie Termine im {month}",
+		datesDiffer: "Termine je Unterkunft verschieden",
+		otherDate: "anderer Termin",
 		compareRooms: "Räume",
 		compareHighlights: "Highlights",
 		compareRating: "Bewertung",
@@ -75,6 +136,10 @@ const DEFAULT_COPY = {
 		children: {
 			one: "{n} Kind",
 			other: "{n} Kinder"
+		},
+		pets: {
+			one: "{n} Haustier",
+			other: "{n} Haustiere"
 		}
 	},
 	en: {
@@ -84,16 +149,43 @@ 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.",
+		aiBadge: "AI",
+		noticeShort: "Prices from the booking system",
+		noticeMore: "About this AI chat",
 		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?",
+		placeholder: "Describe your trip …",
 		send: "Send",
 		thinking: "Writing the answer",
+		status: {
+			search: "Searching rentals …",
+			rental: "Reading about the rental …",
+			availability: "Checking free days …",
+			quote: "Checking the price with the booking system …",
+			reviews: "Reading reviews …"
+		},
+		retry: "Send again",
+		privacyLink: "Privacy policy",
+		yourPick: "Your choice",
+		yourTrip: "Your trip",
+		assumed: "assumed",
+		guests: {
+			one: "{n} guest",
+			other: "{n} guests"
+		},
+		adultsShort: { other: "{n} ad." },
+		weekend: "Weekend",
+		tripStarters: {
+			party: "We are ",
+			period: "Other dates: ",
+			nights: "Other length: ",
+			wishes: "Other wishes: "
+		},
 		yourMessage: "Your message",
 		consent: "The chat is answered by an AI. Your messages are sent to our AI provider for that.",
 		consentAccept: "Start chat",
@@ -111,10 +203,31 @@ const DEFAULT_COPY = {
 			other: "{n} nights"
 		},
 		total: "Total",
+		totalForNights: {
+			one: "Total for {n} night",
+			other: "Total for {n} nights"
+		},
+		priceDetails: "Price details",
+		dealFallback: "Offer",
+		youSave: "You save {amount}",
+		freeCancellation: "Free cancellation until {date}",
+		nonRefundable: "Non-refundable",
+		arrival: "Arrival",
+		departure: "Departure",
+		continueToBooking: "Continue to booking",
+		nothingBookedYet: "Nothing is booked yet. On the booking page:",
+		handoverSteps: [
+			"Enter your details",
+			"Choose how to pay",
+			"Confirmation by email"
+		],
 		notBookable: "Not bookable for these dates",
 		photo: "Photo",
+		openPhotos: "View photos of {name}",
+		closePhotos: "Close photos",
 		previous: "Previous",
 		next: "Next",
+		rentalsFound: "Rentals found",
 		reviews: {
 			one: "{n} review",
 			other: "{n} reviews"
@@ -125,6 +238,19 @@ const DEFAULT_COPY = {
 		booked: "taken",
 		closed: "not bookable",
 		yourStay: "Your stay",
+		arrivalPossible: "Arrival possible",
+		cheaper: "cheaper",
+		dearer: "dearer",
+		showPrice: "Show price",
+		arrivalOn: "Arrival {date}",
+		possibleFrom: "Possible from {date}",
+		until: "until {date}",
+		otherArrival: "Choose another arrival",
+		otherArrivalStarter: "Arrival on ",
+		freePeriods: "Free dates",
+		freePeriodsIn: "Free dates in {month}",
+		datesDiffer: "Dates differ per rental",
+		otherDate: "other dates",
 		compareRooms: "Rooms",
 		compareHighlights: "Highlights",
 		compareRating: "Rating",
@@ -147,6 +273,10 @@ const DEFAULT_COPY = {
 		children: {
 			one: "{n} child",
 			other: "{n} children"
+		},
+		pets: {
+			one: "{n} pet",
+			other: "{n} pets"
 		}
 	}
 };
@@ -246,6 +376,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 +387,28 @@ ${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. */
+  /* The stars' colour: dark amber on a light surface, light amber on a dark one, AA on both. */
+  --chat-rating: #8a5a00;
+  /* 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. */
+}
+@supports (color: oklch(from red calc(l + 0.1) c h)) {
+  :host { --chat-rating: oklch(from var(--chat-surface) calc(0.52 + (1 - l) * 0.35) 0.13 75);
+    /* Lines inside a raised dark card: the site's border lifted as the card is (cards below). */
+    --chat-card-border: oklch(from var(--chat-border) calc(l + max(0, 0.5 - l) * 0.6) c h); }
 }
 * { 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,72 +442,132 @@ ${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; }
-.title { margin: 0 auto 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
-  text-transform: uppercase; color: var(--chat-accent); }
+.header { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 24px 4px; }
+@media (min-width: 1024px) { .header { padding-top: 20px; } }
+/* Once the conversation runs: one line under the title instead of the notice, the list gets the room. */
+.header[data-slim] { padding: 10px 16px 10px 24px; border-bottom: 1px solid var(--chat-border); }
+/* A small phone keeps the line on one line: less inset, and an ellipsis before it would wrap. */
+@media (max-width: 359px) { .header[data-slim] { padding-inline: 16px 12px; } }
+.title-block { margin-right: auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
+  letter-spacing: 0.16em; text-transform: uppercase; color: var(--chat-accent); }
+/* The persistent AI mark (AI Act transparency), in words, not colour. */
+.badge { padding: 0 6px; border: 1px solid var(--chat-tint-edge); border-radius: min(6px, var(--chat-radius));
+  background: var(--chat-secondary); color: var(--chat-on-secondary); font-size: 12px; letter-spacing: 0.04em; }
+.notice-short { margin: 0; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px;
+  color: var(--chat-muted); }
+.notice-short > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* A small mark with a finger's target: the pseudo-element takes the tap around it. */
+.info { position: relative; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0;
+  border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
+.info::after { content: ""; position: absolute; inset: -12px; }
+.info svg { width: 14px; height: 14px; }
+.notice-pop { position: absolute; z-index: 2; top: calc(100% + 6px); left: 16px; right: 16px; margin: 0;
+  padding: 12px 16px; border: 1px solid var(--chat-border); border-radius: calc(var(--chat-radius) * 0.75);
+  background: var(--chat-surface); box-shadow: var(--chat-shadow); font-size: 13px; color: var(--chat-text); }
 .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: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
+  background: var(--chat-surface-soft); container: dock / inline-size; }
 .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: 2px 8px 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; }
+/* A quick reply is a tinted pill, never outlined: outlined is a link out of the chat (ContactLink). The
+   one the visitor took goes quiet. */
+.chip { padding-left: 16px; }
+.chip[data-chosen] { border-color: var(--chat-border); background: transparent; color: var(--chat-muted);
+  cursor: default; }
+.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), and only for a keyboard: a text
+   field matches :focus-visible after a tap as well. */
+.composer[data-keyboard]: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; }
+/* The bar over the input: the stay in reach with its total and button, or what the chat searched with.
+   The composer's shape, one thumb above it. */
+.dock-bar { display: flex; align-items: center; gap: 8px; min-height: 50px; margin-bottom: 8px; padding: 3px 3px 3px 16px;
+  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); }
+.dock-bar .thumb { display: none; width: 40px; height: 40px; margin-left: -10px; border-radius: 999px; }
+/* A wide panel has room for the photo; a phone needs the width for the party. */
+@container dock (min-width: 456px) { .dock-bar .thumb { display: block; } }
+.dock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0;
+  border: 0; background: none; color: inherit; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
+.dock-name, .dock-sub { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dock-name { font-size: 14px; font-weight: 600; }
+.dock-sub { font-size: 12px; color: var(--chat-muted); }
+.dock-sub .price { color: var(--chat-text); }
+/* Narrower than a card's button: the bar's width goes to the party. */
+.dock-bar .button.compact { margin: 0; min-height: 42px; padding: 0 11px; font-size: 13px; }
+.dock-bar[data-kind="trip"] { padding: 3px 0 3px 6px; }
+.trip-chips { flex: 1; min-width: 0; display: flex; gap: 4px; padding-right: 16px; overflow-x: auto;
+  scrollbar-width: none; mask-image: linear-gradient(to left, transparent, #000 16px); }
+.trip-chips::-webkit-scrollbar { display: none; }
+.trip-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px;
+  border: 1px solid var(--chat-border); border-radius: var(--chat-round); background: transparent;
+  color: var(--chat-text); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
+/* Inside the row that scrolls, so it clips: the ring sits inside the chip. */
+.trip-chip:focus-visible { outline-offset: -2px; }
+/* A party the search assumed: dashed, and said in words. */
+.trip-chip[data-assumed] { border-style: dashed; border-color: var(--chat-muted); }
+.trip-chip em { font-style: normal; font-weight: 500; color: var(--chat-muted); }
+/* The bar's stay, brought into view in the list: marked for a moment. */
+[data-pulse] { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
 .consent { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px;
   background: var(--chat-surface-soft); }
 .consent p { margin: 0; }
@@ -374,8 +579,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);
@@ -383,8 +591,26 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 .gallery-wrap, .carousel-wrap { position: relative; }
 .gallery, .carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
 .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 img, .photo-open { flex: 0 0 100%; scroll-snap-align: start; display: block; width: 100%;
+  aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
+/* Flatter in a row, to bring a card's price above the input on a phone: 5:3, and 2:1 on a card with
+   free periods; the single card keeps 4:3. */
+.carousel :is(.gallery > img, .photo-open), .carousel .no-photo { aspect-ratio: 5 / 3; }
+.carousel .rental-card:has(.periods) :is(.gallery > img, .photo-open, .no-photo) { aspect-ratio: 2 / 1; }
+/* A card's photo opens the photos large. */
+.photo-open { padding: 0; border: 0; background: none; cursor: zoom-in; }
+.photo-open img { aspect-ratio: auto; height: 100%; }
+.photo-open:focus-visible { outline-offset: -3px; }
+.photo-count { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: var(--chat-round);
+  background: rgb(15 23 42 / 0.55); color: #fff; font-size: 12px; font-weight: 600;
+  font-variant-numeric: tabular-nums; pointer-events: none; }
+/* Place and score on the photo's foot, white on a dark gradient whatever the photo. */
+.photo-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end;
+  justify-content: space-between; gap: 8px; padding: 36px 16px 12px; pointer-events: none;
+  background: linear-gradient(transparent, rgb(15 23 42 / 0.62)); color: #fff; font-size: 14px; font-weight: 600; }
+.photo-rating { flex: none; }
+.photo-rating .star { color: #ffd166; }
+.photo-rating small { font-size: 12px; font-weight: 500; opacity: 0.9; }
 /* 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; }
@@ -397,7 +623,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; }
@@ -407,105 +633,382 @@ ${SITE_COLORS.map((t) => `  ${t.chat}: var(${t.site}, ${t.own});`).join("\n")}
 @container (min-width: 520px) {
   .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; }
+  .carousel-wrap:has(> .carousel > .card:nth-child(2):last-child) > .snap-nav > :not(.snap-caption) {
+    display: none; }
+  /* The count follows the first card in view, and two show at once: it would skip numbers. */
+  .carousel-wrap > .snap-nav > .snap-count { 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; }
-.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;
+/* The row's controls, grouped at its end: "‹ 2 / 8 ›" under a pointer, dots under a finger; a caption
+   at its start. */
+.snap-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+.snap-caption { flex: 1; min-width: 0; color: var(--chat-muted); font-size: 13px; }
+.snap-dots { display: none; gap: 5px; }
+.snap-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--chat-border); }
+.snap-dots i[data-current] { width: 18px; background: var(--chat-primary); }
+@media (pointer: coarse) {
+  .snap-dots { display: flex; }
+  .snap-nav > button.snap-arrow, .snap-count { display: none; }
+}
+/* More cards beyond an edge fade out there. Cards snap to the row's start, so in the middle of the row
+   nothing of the previous card shows: only the end fades, never the card being read. At the row's end
+   the previous card peeks in, and its edge fades. */
+.carousel:is([data-fade="end"], [data-fade="both"]) { mask-image: linear-gradient(to left, transparent, #000 44px); }
+.carousel[data-fade="start"] { mask-image: linear-gradient(to right, transparent, #000 44px); }
+.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: var(--chat-rating); font-weight: 700; }
+.breakdown .line, .price-details .line { display: flex; justify-content: space-between; gap: 12px;
+  font-variant-numeric: tabular-nums; }
+.breakdown .total, .price-details .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); }
+.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; }
+/* A chip on its own in a reply (a refused stay's "Anderen Anreisetag wählen"): as wide as its words. */
+.ui > .chip { align-self: flex-start; }
+/* Rows that choose or ask: other free periods (a radio mark, the total right-aligned), a refused stay's
+   allowed lengths ("Preis anzeigen"). Full width, a finger's height. */
+.rows-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  border-bottom: 1px solid var(--chat-border); }
+.rows-head > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
+.rows-head strong { font-weight: 600; }
+.rows-head .thumb { width: 40px; height: 40px; }
+.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 16px;
+  border: 0; border-top: 1px solid var(--chat-border); background: transparent; color: inherit; font: inherit;
+  text-align: left; cursor: pointer; }
+.rows > .row:first-child { border-top: 0; }
+.row:disabled { cursor: default; }
+/* Inside the card, which clips: the ring sits inside the row. */
+.row:focus-visible { outline-offset: -2px; }
+.row[aria-pressed="true"] { background: var(--chat-secondary); box-shadow: inset 3px 0 0 var(--chat-primary); }
+.row-when { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
+.row-when strong { font-weight: 600; }
+.row-when span { color: var(--chat-muted); font-size: 13px; }
+.row > .price { flex: none; white-space: nowrap; }
+/* The nights and a discount's badge: side by side, or the badge under the nights where the row is narrow. */
+.row-when > span:has(.deal) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
+.row-when .deal { color: var(--chat-on-secondary); }
+.row-go { display: inline-flex; align-items: center; gap: 4px; color: var(--chat-primary); font-size: 14px;
+  font-weight: 600; white-space: nowrap; }
+.radio { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
+  border: 1.5px solid var(--chat-muted); }
+.row[aria-pressed="true"] .radio { border-color: var(--chat-primary); background: var(--chat-primary);
+  color: var(--chat-on-primary); }
+.refused .card-body { padding-bottom: 12px; }
+.refused .rows { border-top: 1px solid var(--chat-border); }
+/* A card's free periods from a flexible search: pills that switch its stay in place. */
+.periods { margin: 0 18px; padding: 10px 0 12px; border-top: 1px solid var(--chat-border); }
+.periods-caption { margin: 0 0 6px; font-size: 13px; color: var(--chat-muted); }
+/* "24. Apr. – 1. Mai" needs about 115px: two to a carousel card's row, one on a small phone. Days of one
+   month ("14.–21.") fit three or four to a row. */
+.period-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); gap: 6px; }
+.period-pills[data-one-month] { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
+.period-pill { min-height: 38px; padding: 0 8px; border: 1px solid var(--chat-border);
+  border-radius: var(--chat-round); background: transparent; color: var(--chat-text); font: inherit;
+  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
+.period-pill:disabled { cursor: default; }
+.period-pill[aria-pressed="true"] { border-color: var(--chat-primary); background: var(--chat-primary);
+  color: var(--chat-on-primary); }
+.periods + .card-foot { border-top: 0; padding-top: 0; }
+/* Compare: a stay on other dates than the first column's says so, in words. */
+.other-date { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--chat-border);
+  border-radius: var(--chat-round); color: var(--chat-muted); font-size: 12px; }
 .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; }
-.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; }
+/* Read without colour: free days plain, taken ones hatched with a muted numeral, arrival days a dot and a
+   bold numeral, a free day's price level one to three ticks; the stay filled. */
+.day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 3px; min-height: 40px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
+  font-variant-numeric: tabular-nums; }
+button.day { cursor: pointer; }
+.day[data-status="booked"], .legend i[data-status="booked"] { color: var(--chat-muted);
+  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--chat-border) 4px 5.5px);
+  box-shadow: inset 0 0 0 1px var(--chat-border); }
 .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; }
+.day[data-arrival] { font-weight: 700; }
+/* At the numeral, however wide the cell. */
+.day[data-arrival]::before, .legend i[data-arrival] { content: ""; position: absolute; top: 4px;
+  right: calc(50% - 16px);
+  width: 5px; height: 5px; border-radius: 50%; background: var(--chat-primary); }
+.ticks { display: flex; gap: 2px; height: 3px; }
+.ticks i { width: 6px; height: 3px; border-radius: 2px; background: var(--chat-muted); }
+.day[data-stay], .legend i[data-stay], .day[aria-pressed="true"] { background: var(--chat-primary);
+  color: var(--chat-on-primary); }
+.day[data-stay]::before, .day[data-stay] .ticks i, .day[aria-pressed="true"]::before,
+.day[aria-pressed="true"] .ticks i { background: var(--chat-on-primary); }
+/* A tapped arrival is the one filled day: the marked stay steps back to a tint meanwhile. */
+.calendar-grid:has(.day[aria-pressed="true"]) .day[data-stay]:not([aria-pressed="true"]) {
+  background: var(--chat-secondary); color: var(--chat-on-secondary); }
+.calendar-grid:has(.day[aria-pressed="true"]) .day[data-stay]:not([aria-pressed="true"])::before {
+  background: var(--chat-primary); }
+.calendar-grid:has(.day[aria-pressed="true"]) .day[data-stay]:not([aria-pressed="true"]) .ticks i {
+  background: var(--chat-muted); }
+/* A finger's height for a day that takes a tap. */
+@media (pointer: coarse) { button.day { min-height: 44px; } }
+.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
+  padding-top: 10px; border-top: 1px solid var(--chat-border); }
+.cal-foot strong { font-weight: 600; white-space: nowrap; }
+.cal-foot .button { gap: 6px; }
+/* Forced colours drop tints and backgrounds: borders and the system's text colour carry the marks. */
+@media (forced-colors: active) {
+  .day[data-status="booked"], .legend i[data-status="booked"] { background: none; border: 1px dashed CanvasText;
+    text-decoration: line-through; }
+  .day[data-arrival]::before, .ticks i, .legend i[data-arrival] { background: CanvasText; }
+  .day[data-stay], .day[aria-pressed="true"] { border: 2px solid Highlight; }
+  /* The stay and the tapped day share that border: the tapped one gets a second mark. */
+  .day[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -5px; }
+}
+.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 13px; }
+.legend > span { display: inline-flex; align-items: center; gap: 4px; }
+.legend > span > i { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
+  border: 1px solid var(--chat-border); }
+.legend > span > i[data-arrival] { position: static; width: 6px; height: 6px; border: 0; }
+.legend-levels .ticks { align-self: center; }
 .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; }
+  /* The rows line up across the columns: one long name off screen would push every visible row down. */
+  .compare-col > strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+    overflow: hidden; }
+}
+/* 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) {
+  .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, as in a narrow Compare; the single card and the quote 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; }
+.card-meta .photo-rating { margin-left: auto; font-size: 14px; font-weight: 600; }
+.card-meta .photo-rating .star { color: var(--chat-rating); }
 .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; }
+.price { font-weight: 700; font-variant-numeric: tabular-nums; }
+/* "Gesamtpreis für 7 Nächte": what a total covers, over it. */
+.price-label { color: var(--chat-muted); font-size: 13px; }
+.price-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
+/* 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 link out of the chat while a reply still streams (ReplyLink). */
+/* 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). A button keeps its full strength: it
+   waits a moment, it is not unavailable. */
 [aria-disabled="true"] { opacity: 0.5; cursor: progress; }
+.button[aria-disabled="true"] { opacity: 1; }
+
+/* Cards rise above the message area: on a dark surface a step lighter, with a 1 px edge where the shadow
+   cannot show; a light surface stays as it is (the lift only applies below the middle lightness). */
+@supports (color: oklch(from red calc(l + 0.1) c h)) {
+  .card, .compare-col, .calendar { background: oklch(from var(--chat-surface) calc(l + max(0, 0.5 - l) * 0.45) c h); }
+  .card, .compare-col, .calendar { --chat-border: var(--chat-card-border); }
+  .card, .compare-col { box-shadow: var(--chat-card-shadow),
+    0 0 0 1px oklch(from var(--chat-surface) calc(l + max(0, 0.5 - l) * 0.75) c h); }
+}
+/* A carousel card, about 290px wide on a phone and on a wide panel alike: the total's label across the
+   foot, the total and the button side by side under it, so the label does not wrap beside the button
+   and push the price under the input. */
+.carousel .card-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
+  gap: 0 8px; }
+.carousel .card-foot > .foot-price { display: contents; }
+.carousel .card-foot .price-label { grid-column: 1 / -1; }
+.carousel .card-foot > .button { grid-column: 2; grid-row: 2 / span 3; }
+@container (min-width: 300px) {
+  /* With a deal badge the total and the badge take the line, and the button sits beside dates and party. */
+  .carousel .card-foot:has(.deal) .price-line { grid-column: 1 / -1; }
+  .carousel .card-foot:has(.deal) > .button { grid-row: 3 / span 2; }
+  /* An unbookable stay: the button beside its one line. */
+  .carousel .card-foot:not(:has(.price-label)) > .button { grid-row: 1; }
+}
+/* A small phone's card has no room beside the total: the button goes under it, full width. */
+@container (max-width: 299px) {
+  .carousel .card-foot { grid-template-columns: minmax(0, 1fr); }
+  .carousel .card-foot > .button { grid-column: 1; grid-row: auto; margin-top: 8px; }
+}
+
+/* A card's photos large, in a sheet over the panel's content (sheet.tsx). */
+.sheet-host { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
+.sheet-host:empty { display: none; }
+.sheet-scrim { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
+  pointer-events: auto; background: rgb(15 23 42 / 0.55); }
+.sheet { display: flex; flex-direction: column; height: calc(100% - 40px);
+  border-radius: var(--chat-radius) var(--chat-radius) 0 0; background: var(--chat-surface);
+  box-shadow: 0 -8px 32px rgb(15 23 42 / 0.25); overflow: hidden; }
+.sheet:focus { outline: none; }
+.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 20px; }
+.sheet-title { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-weight: 600; }
+.sheet-count { color: var(--chat-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
+.sheet-photo { position: relative; flex: 1; min-height: 0; background: var(--chat-surface-soft); }
+.sheet-photos { display: flex; height: 100%; overflow-x: auto; overscroll-behavior: contain;
+  scroll-snap-type: x mandatory; scrollbar-width: none; }
+.sheet-photos::-webkit-scrollbar { display: none; }
+/* Uncropped, at the photo's own ratio. */
+.sheet-photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: start; }
+.sheet .sheet-photo > .gallery-arrow { opacity: 1; pointer-events: auto; }
+.sheet .sheet-photo > .gallery-arrow:disabled { opacity: 0.4; }
+.sheet-caption { margin: 0; padding: 10px 20px 0; font-size: 14px; }
+.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
+  padding: 12px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--chat-border); }
 
 /* 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);
+.no-photo { display: none; aspect-ratio: 4 / 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 :is(.gallery > img, .photo-open) { 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 :is(.gallery > img, .photo-open), .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;
   border: 1px solid var(--chat-border); border-radius: var(--chat-round); font-size: 13px; font-weight: 600; }
 .wishes svg { color: var(--chat-accent); }
 
+/* A quote: its dates and party, the labelled total beside the button, the discount and the
+   cancellation terms, then the price lines folded away under "Preisdetails". */
+.stay-card .card-body { gap: 12px; }
+.stay-card .card-body:last-child { padding-bottom: 16px; }
+.quote-head { display: flex; align-items: center; gap: 12px; }
+.quote-head > div { display: flex; flex-direction: column; min-width: 0; }
+.thumb { flex: none; width: 52px; height: 52px; border-radius: calc(var(--chat-radius) * 0.75);
+  object-fit: cover; }
+.quote-when { margin: 0; color: var(--chat-muted); font-size: 14px; }
+.quote-when .period { white-space: nowrap; }
+/* Wraps on a small phone: the button goes under a total that would not fit beside it. */
+.price-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
+  padding-top: 12px; border-top: 1px solid var(--chat-border); }
+.price-row .price { font-size: 24px; line-height: 1.2; white-space: nowrap; }
+.quote-facts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
+.deal, .cancel-line { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
+.deal svg, .cancel-line svg, .ho-lines svg { flex: none; color: var(--chat-accent); }
+.deal strong, .cancel-line strong { font-weight: 600; }
+/* The date wraps as one: "7." at a line's end and "Jan. 2027" on the next read as two. */
+.cancel-line strong { white-space: nowrap; }
+/* The discount in the primary's tint: its words say it, not the colour. */
+.deal { padding: 4px 12px 4px 10px; border: 1px solid var(--chat-tint-edge); border-radius: var(--chat-round);
+  background: var(--chat-secondary); color: var(--chat-on-secondary); }
+/* A badge stays one line: two would make a blob beside a card's button. */
+.deal.compact { display: inline-flex; padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
+/* The quote's line: a pill on one line, a rounded box on two. */
+.deal:not(.compact) { border-radius: 16px; }
+.deal .saving { white-space: nowrap; }
+.price-details { padding-top: 10px; border-top: 1px solid var(--chat-border); font-size: 14px; }
+.price-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 32px;
+  list-style: none; color: var(--chat-primary); font-weight: 600; cursor: pointer; }
+.price-details summary::-webkit-details-marker { display: none; }
+.price-details summary svg { transform: rotate(90deg); }
+.price-details[open] summary svg { transform: rotate(-90deg); }
+.price-details .line { margin-top: 6px; }
+/* The hand-over: what was chosen, the total as the largest figure, the conversation's one full-width
+   button, and what the booking page asks next. */
+.ho-dates { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
+  border-radius: calc(var(--chat-radius) * 0.75); background: var(--chat-surface-soft); }
+.ho-dates > div { display: flex; flex-direction: column; }
+.ho-dates > div:last-child { text-align: right; }
+.ho-dates strong { font-weight: 600; white-space: nowrap; }
+.ho-nights { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--chat-muted); font-size: 13px;
+  white-space: nowrap; }
+.ho-nights::before, .ho-nights::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.5; }
+/* A phone under 360px has no room for both dates and the nights in a row: the dates side by side, the
+   nights under them. */
+@container (max-width: 311px) {
+  .ho-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
+  .ho-nights { grid-column: 1 / -1; grid-row: 2; }
+}
+.ho-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
+  font-size: 14px; }
+.ho-lines li { display: flex; align-items: center; gap: 6px; }
+.ho-total { display: flex; flex-direction: column; padding-top: 12px; border-top: 1px solid var(--chat-border); }
+.ho-total .price { font-size: 30px; line-height: 1.15; }
+.button.block { display: flex; width: 100%; min-height: 50px; margin: 0; gap: 8px; font-size: 16px; }
+.ho-note { margin: 0; color: var(--chat-muted); font-size: 13px; }
+.ho-steps { list-style: none; counter-reset: step; margin: -4px 0 0; padding: 0; display: flex;
+  flex-direction: column; gap: 5px; font-size: 13px; }
+.ho-steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; }
+.ho-steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 20px;
+  height: 20px; border: 1px solid var(--chat-border); border-radius: 50%; color: var(--chat-muted);
+  font-size: 12px; font-weight: 700; }
+
 /* 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 +1034,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 +1045,29 @@ ${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); }
+  button.day:hover { box-shadow: inset 0 0 0 1px var(--chat-primary); }
+  .row:not(:disabled):hover { background: var(--chat-surface-soft); }
+  .row[aria-pressed="true"]:hover { background: var(--chat-secondary); }
+  .period-pill: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, .ui > .link, .fallback-links > .link, .period-pill { min-height: 44px; }
+  .price-details summary { 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,16 +1080,20 @@ ${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); } }
+@keyframes chat-ring { from { outline-color: transparent; outline-offset: 8px; } }
+@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; }
   .thinking i:nth-child(2) { animation-delay: 160ms; }
   .thinking i:nth-child(3) { animation-delay: 320ms; }
+  [data-pulse] { animation: chat-ring 500ms ease-out 2 alternate; }
 }
 /* Without motion the ring stands still, in the primary colour all round. */
 @media (prefers-reduced-motion: reduce) {
@@ -572,7 +1102,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-B_wg4Wl0.js"));
 /** See {@link WebsiteChatComponent}. */
 const WebsiteChat = function WebsiteChat(props) {
 	const { endpoint, locale, theme = "classic", position = "right" } = props;
@@ -644,11 +1174,12 @@ const WebsiteChat = function WebsiteChat(props) {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Panel, {
 					endpoint,
-					clientVersion: "1.1.3",
+					clientVersion: "1.3.0",
 					locale,
 					copy,
 					searchPath: props.searchPath,
 					contactPath: props.contactPath,
+					...props.privacyPath && { privacyPath: props.privacyPath },
 					open,
 					pending,
 					onSent: sent,