/* The demo page: an example business website with the real assistant on it
 * (redesigned 21 Oct 2026, docs/briefs/subpages-aegean-2026-10-21.md).
 *
 * Three visual worlds live here on purpose and must not blend:
 *
 *   the frame   AI Growth Kit's own: the site header, the intro with the
 *               controls card, the explanation and the footer, in the
 *               Aegean look (site.css).
 *   .mock-site  a pretend customer's website. Modern, clean and generic on
 *               purpose, and never our brand: Inter rather than our
 *               Instrument faces, and each trade's own colours (picked from
 *               the trade select), so a prospect sees their own business.
 *   .dw-*       the assistant, drawn to match public/widget/widget.js as a
 *               client gets it: the widget's own base look, in the trade's
 *               accent as a client's own colour would be, so a prospect sees
 *               what actually lands on their site.
 *
 * The dw- prefix is deliberate. The real widget owns agk- and injects its own
 * stylesheet at runtime; two rule sets fighting over one prefix is how a
 * client's chat breaks. These are a faithful copy, not the same classes.
 */

/* ------------------------------------------------- the controls card --- */
/* Ours (round 3): the standard site header, and the trade, the name and
   Reskin in a row on a light card under the intro. */
.demo-page { background: var(--sand); }
.demo-controls-card { margin-top: 6px; padding: clamp(14px, 2vw, 20px); border-radius: 20px; background: #FBF8F2; color: var(--ink); border: 1px solid #E4DCCD; box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 12px 28px -18px rgba(20, 32, 31, .22); }
.demo-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.demo-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.demo-field label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #56635F; font-weight: 600; }
/* 16px: iOS zooms the whole page into a smaller field */
.demo-field select, .demo-field input {
  font: 400 16px/1.3 var(--sans); color: var(--ink); min-height: 48px; width: 100%;
  background: #fff; border: 1px solid #B9AE9A; border-radius: 12px; padding: 10px 12px;
}
.demo-field select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, #56635F 50%), linear-gradient(135deg, #56635F 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.demo-field select:focus-visible, .demo-field input:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; border-color: var(--lagoon); }
.apply-setup { min-height: 48px; height: 48px; border: 0; flex: none; }
.apply-setup:disabled { opacity: .55; cursor: default; }
.apply-setup .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .apply-setup { width: 100%; justify-content: center; } }

/* ---------------------------------------------------------- the intro --- */
.demo-intro { padding: clamp(28px, 4vw, 48px) 0 clamp(22px, 3vw, 32px); }
.demo-intro .wrap { display: grid; gap: 14px; }
.demo-intro .eyebrow { margin: 0; }
.demo-intro-title { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.02em; max-width: 22em; text-wrap: balance; }
.demo-intro-title em { font-style: normal; color: var(--gold-ink); }
.demo-bar-note { color: var(--muted); max-width: 44em; font-size: 1.0625rem; }
.demo-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; counter-reset: dstep; }
.demo-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; color: var(--fg); }
.demo-steps li::before { counter-increment: dstep; content: counter(dstep); width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; background: var(--reef); color: #EAF3F6; font-size: .8125rem; font-weight: 600; }

/* ------------------------------------------- the frame round the mock --- */
/* A browser window on a wide screen, so the example site reads as a site; on
   a phone it is the full width, under a slim label. */
.mock-frame { margin: 0 auto; max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.mock-window { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(20, 32, 31, .1), 0 40px 80px -40px rgba(10, 51, 70, .45); }
.mock-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #ECE6DA; border-bottom: 1px solid #DDD4C3; color: #4F5A57; font-size: .8125rem; }
.mock-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #CFC6B4; flex: none; }
.mock-chrome span { margin-left: 6px; padding: 3px 12px; border-radius: 999px; background: #F7F3EA; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .mock-frame { padding: 0; }
  .mock-window { border-radius: 0; box-shadow: 0 0 0 1px rgba(20, 32, 31, .1); }
  .mock-chrome i { display: none; }
}

/* ------------------------------------------------------- the mock site --- */
/* Each trade brings its own colours; the business name is the visitor's. */
.mock-site {
  --m-accent: #1E40AF; --m-accent-hover: #1E3A8A; --m-tint: #EEF2FF; --m-tint-line: #DCE3FB; --m-eyebrow: #9A3412; --m-shape-a: #1E40AF; --m-shape-b: #F59E0B;
  --m-ink: #18181B; --m-muted: #52525B; --m-line: #E4E4E7;
  background: #fff; color: var(--m-ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; letter-spacing: normal;
}
.demo-page:has(#industry-select option[value="pool"]:checked) .mock-site { --m-accent: #0369A1; --m-accent-hover: #075985; --m-tint: #ECF7FD; --m-tint-line: #D3ECF9; --m-eyebrow: #0369A1; --m-shape-a: #0EA5E9; --m-shape-b: #38BDF8; }
.demo-page:has(#industry-select option[value="auto_repair"]:checked) .mock-site { --m-accent: #B91C1C; --m-accent-hover: #991B1B; --m-tint: #F4F4F5; --m-tint-line: #E4E4E7; --m-eyebrow: #B91C1C; --m-shape-a: #27272A; --m-shape-b: #DC2626; }
.demo-page:has(#industry-select option[value="vet_clinic"]:checked) .mock-site { --m-accent: #15803D; --m-accent-hover: #166534; --m-tint: #F0F8F2; --m-tint-line: #D9EEDF; --m-eyebrow: #15803D; --m-shape-a: #22C55E; --m-shape-b: #FBBF24; }
.demo-page:has(#industry-select option[value="dental"]:checked) .mock-site { --m-accent: #4338CA; --m-accent-hover: #3730A3; --m-tint: #F2F2FD; --m-tint-line: #E0E0FA; --m-eyebrow: #4338CA; --m-shape-a: #818CF8; --m-shape-b: #C7D2FE; }
.demo-page:has(#industry-select option[value="real_estate"]:checked) .mock-site { --m-accent: #7C2D12; --m-accent-hover: #6B2710; --m-tint: #FAF6F1; --m-tint-line: #EFE5D8; --m-eyebrow: #7C2D12; --m-shape-a: #A16207; --m-shape-b: #E7D3B0; }
.demo-page:has(#industry-select option[value="fitness"]:checked) .mock-site { --m-accent: #18181B; --m-accent-hover: #000; --m-tint: #F6F8EE; --m-tint-line: #E6EBD3; --m-eyebrow: #3F6212; --m-shape-a: #84CC16; --m-shape-b: #18181B; }
.demo-page:has(#industry-select option[value="salon"]:checked) .mock-site { --m-accent: #9D174D; --m-accent-hover: #831843; --m-tint: #FCF2F6; --m-tint-line: #F6DDE8; --m-eyebrow: #9D174D; --m-shape-a: #EC4899; --m-shape-b: #FBCFE8; }
.mock-site h1, .mock-site h2, .mock-site h3 { font-family: inherit; text-wrap: balance; }
.mock-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.mock-header { border-bottom: 1px solid var(--m-line); background: rgba(255, 255, 255, .96); }
.mock-header .mock-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.mock-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--m-ink); text-decoration: none; cursor: default; min-width: 0; }
.mock-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-monogram { width: 36px; height: 36px; border-radius: 10px; display: grid; place-content: center; background: var(--m-accent); color: #fff; font-weight: 700; font-size: 1rem; flex: none; }
.mock-nav { display: flex; align-items: center; gap: 26px; font-size: .9375rem; color: var(--m-muted); flex: none; }
.mock-nav span { cursor: default; }
.mock-nav .mock-cta { background: var(--m-accent); color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; }
@media (max-width: 760px) { .mock-nav span:not(.mock-cta) { display: none; } }

.mock-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); background: radial-gradient(70% 90% at 100% 0%, var(--m-tint), transparent 70%), #fff; }
.mock-hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.mock-eyebrow { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; letter-spacing: .02em; color: var(--m-eyebrow); font-weight: 600; }
.mock-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-shape-a); }
.mock-hero h1 { font-weight: 750; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); letter-spacing: -.035em; line-height: 1.04; margin: 0 0 18px; overflow-wrap: anywhere; }
.mock-sub { margin: 0 0 28px; font-size: 1.0625rem; line-height: 1.6; color: var(--m-muted); max-width: 44ch; }
.mock-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mock-button { font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; background: var(--m-accent); color: #fff; border: 0; min-height: 48px; padding: 0 24px; border-radius: 999px; box-shadow: 0 10px 24px -12px var(--m-accent); }
.mock-button:hover { background: var(--m-accent-hover); }
.mock-button:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; box-shadow: none; }
.mock-link { color: var(--m-ink); font-size: 1rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--m-line); cursor: default; }
.mock-hero-panel { position: relative; display: grid; align-items: center; }
/* the business's own details on a plain panel in the trade's colour (round
   3: the soft shapes read as placeholder art) */
.mock-panel { display: grid; gap: 0; border-radius: 20px; padding: 6px 22px; background: var(--m-accent); color: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 24px 48px -24px rgba(24, 24, 27, .35); }
.mock-panel-row { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; }
.mock-panel-row + .mock-panel-row { border-top: 1px solid rgba(255, 255, 255, .22); }
.mock-panel .mock-card-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; opacity: .92; font-weight: 650; }
.mock-panel strong { font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.mock-panel span:not(.mock-card-label) { font-size: .9688rem; color: #fff; line-height: 1.45; }
.mock-card-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--m-eyebrow); font-weight: 650; }
@media (max-width: 860px) { .mock-hero-inner { grid-template-columns: minmax(0, 1fr); } }

.mock-services { padding: clamp(40px, 6vw, 72px) 0; background: #fff; }
.mock-services h2 { font-weight: 750; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: -.03em; margin: 0 0 22px; }
.mock-service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: msvc; }
.mock-service-list li { position: relative; background: var(--m-tint); border: 1px solid var(--m-tint-line); border-radius: 18px; padding: 20px 20px 22px; font-size: .9688rem; color: var(--m-muted); display: grid; gap: 4px; }
.mock-service-list li::before { counter-increment: msvc; content: "0" counter(msvc); display: grid; place-content: center; width: 36px; height: 36px; border-radius: 12px; background: #fff; color: var(--m-accent); font-weight: 700; font-size: .875rem; margin-bottom: 10px; box-shadow: 0 0 0 1px var(--m-tint-line); }
.mock-service-list li strong { display: block; color: var(--m-ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.mock-detail { border-top: 1px solid var(--m-line); padding: clamp(32px, 5vw, 56px) 0; background: #FAFAFA; }
.mock-detail-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.mock-detail h3 { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--m-eyebrow); font-weight: 650; margin: 0 0 10px; }
.mock-detail p { margin: 0; font-size: .9688rem; line-height: 1.6; color: var(--m-muted); max-width: 34ch; }
.mock-hours { list-style: none; margin: 0; padding: 0; font-size: .9688rem; color: var(--m-muted); }
.mock-hours li { display: flex; justify-content: space-between; gap: 16px; max-width: 260px; padding: 4px 0; border-bottom: 1px dashed var(--m-line); }
.mock-hours span:last-child { color: var(--m-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock-footer { background: #18181B; color: #E4E4E7; }
.mock-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-height: 64px; padding-block: 12px; font-size: .875rem; }
.mock-footer-inner > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.mock-footer-meta { color: #D4D4D8; }

/* --------------------------------------------------- the explanation --- */
.demo-explain .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.demo-points { display: grid; gap: 18px; }
@media (min-width: 860px) { .demo-points { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.demo-point { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.demo-point .icon { width: 22px; height: 22px; color: var(--lagoon); }
.demo-point h3 { font-size: 1.125rem; }
.demo-point p { color: var(--ink-muted); font-size: 1rem; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 32px; }
.demo-footnote { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); display: grid; gap: 8px; }
.demo-footnote p { margin: 0; max-width: 72ch; }
.demo-footnote a { color: var(--accent); }
.noscript-note { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 16px var(--gutter); font-size: 1rem; }

@media (pointer: coarse) {
  .demo-footnote a, .demo-steps li { position: relative; }
  .demo-footnote a::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22.5px)); }
}

/* ------------------------------------------------------------ widget --- */
/* The real widget's base look (public/widget/widget.js, 21 Oct 2026: the
 * widget follows DESIGN.md for every client): Instrument Sans, a white panel
 * rounded 22px on an ink-tinted shadow, a quiet white header with a hairline
 * and "AI website assistant" as a chip, the conversation on shell #FBF8F2 in
 * white bubbles on #E4DCCD hairlines, ink #14201F text, muted #56635F, a gold
 * dot and avatar, chips for the questions, and Send carrying the smoke.
 *
 * The accent is the trade's, as a client's own colour would be on their site
 * (data-accent): the bubble, the visitor's messages, Send, the focus ring and
 * the result card's link, in the same colour as the mock site's buttons
 * (the trade rules below; test/widget-base-design.test.js keeps them equal).
 * Its own variables, so nothing from the page around it leaks in. */
.dw-bubble, .dw-panel {
  --dw-accent: #1E40AF;
  --dw-ink: #14201F; --dw-muted: #56635F; --dw-line: #E4DCCD; --dw-shell: #FBF8F2; --dw-gold: #B8893A; --dw-tint: rgba(120,128,124,.12);
  --dw-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dw-display: var(--dw-sans);
  font-family: var(--dw-sans); letter-spacing: normal;
}
.demo-page:has(#industry-select option[value="pool"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #0369A1; }
.demo-page:has(#industry-select option[value="auto_repair"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #B91C1C; }
.demo-page:has(#industry-select option[value="vet_clinic"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #15803D; }
.demo-page:has(#industry-select option[value="dental"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #4338CA; }
.demo-page:has(#industry-select option[value="real_estate"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #7C2D12; }
.demo-page:has(#industry-select option[value="fitness"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #18181B; }
.demo-page:has(#industry-select option[value="salon"]:checked) :is(.dw-bubble, .dw-panel) { --dw-accent: #9D174D; }

.dw-bubble {
  position: fixed; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); right: calc(22px + env(safe-area-inset-right, 0px)); width: 58px; height: 58px;
  border-radius: 50%; background: var(--dw-accent); border: 0; cursor: pointer;
  color: #fff; box-shadow: 0 10px 28px rgba(20,32,31,.22), 0 2px 6px rgba(20,32,31,.12);
  display: flex; align-items: center; justify-content: center;
  z-index: 60; transition: transform .15s ease;
}
.dw-bubble:hover { transform: scale(1.05); }
.dw-bubble:focus-visible { outline: 2px solid var(--dw-accent); outline-offset: 3px; box-shadow: 0 10px 28px rgba(20,32,31,.22); border-radius: 50%; }
.dw-bubble-icon { width: 24px; height: 24px; }
.dw-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--dw-gold); border: 2px solid var(--dw-accent); }
.dw-dot[hidden] { display: none; }

.dw-panel {
  position: fixed; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: calc(22px + env(safe-area-inset-right, 0px)); width: 370px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid var(--dw-line); border-radius: 22px; color: var(--dw-ink); font-size: 16px; line-height: 1.5;
  box-shadow: 0 24px 64px rgba(20,32,31,.18), 0 4px 14px rgba(20,32,31,.08);
  display: flex; flex-direction: column; overflow: hidden; z-index: 60;
  animation: dw-in .22s cubic-bezier(.16, 1, .3, 1) both; transform-origin: bottom right;
}
@supports (height: 100dvh) { .dw-panel { max-height: calc(100dvh - 130px); } }
.dw-panel[hidden] { display: none; }
@keyframes dw-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.dw-panel :focus-visible { box-shadow: none; }

/* the quiet header */
.dw-head { background: #fff; color: var(--dw-ink); padding: 11px 8px 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--dw-line); }
.dw-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dw-who > div { min-width: 0; }
.dw-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dw-gold); color: var(--dw-ink); display: grid; place-content: center; font-family: var(--dw-display); font-weight: 600; font-size: 19px; line-height: 1; flex: none; }
/* the sans, at normal tracking, stated explicitly: never the display face in
 * small UI chrome, and the real widget uses Instrument Sans 600 here. */
.dw-head h2 {
  margin: 0; font-family: var(--dw-sans); font-size: 15px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.25; color: var(--dw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-status { display: inline-flex; align-items: center; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: var(--dw-tint); color: var(--dw-muted); font-size: 11.5px; font-weight: 500; line-height: 1.5; }
.dw-head-actions { display: flex; align-items: center; gap: 0; flex: none; }
.dw-head-actions button { background: none; border: 0; color: var(--dw-muted); cursor: pointer; width: 44px; height: 44px; border-radius: 999px; display: grid; place-content: center; transition: background-color .2s ease, color .2s ease; }
.dw-head-actions button:hover:not(:disabled) { color: var(--dw-ink); background: var(--dw-tint); }
.dw-head-actions button:focus-visible { outline: 2px solid var(--dw-accent); outline-offset: -2px; }
.dw-head-actions button:disabled { opacity: .4; cursor: default; }
/* 18px and stroke-width 2: 1.5 CSS pixels, which lands cleanly at 1x and 2x */
.dw-head-actions .icon { width: 18px; height: 18px; stroke-width: 2; }

.dw-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--dw-shell); scrollbar-width: thin; scrollbar-color: var(--dw-line) transparent; }
.dw-msg { max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.dw-msg.assistant { background: #fff; border: 1px solid var(--dw-line); align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(20,32,31,.04); }
.dw-msg.user { background: var(--dw-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
/* a message that did not get through: outlined instead of faded, so its text
 * keeps AA on every trade's accent (faded to 55% it was under 3:1) */
.dw-msg.user.failed { background: #fff; color: var(--dw-ink); border: 1px dashed var(--dw-accent); }
.dw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--dw-line); border-radius: 18px; border-bottom-left-radius: 6px; }
.dw-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dw-muted); animation: dw-blink 1.1s infinite; }
.dw-typing i:nth-child(2) { animation-delay: .18s; } .dw-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dw-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* The result card. It sits in the transcript because that is where a real
 * customer sees a confirmation, and every line of it comes from server
 * evidence via demo-result.js rather than from the model's prose. */
.dw-result { align-self: stretch; background: #fff; border: 1px solid var(--dw-line); border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(20,32,31,.04); }
.dw-result-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.dw-result-mark { width: 24px; height: 24px; border-radius: 50%; background: #E3F0E7; color: #1F6B44; display: grid; place-content: center; flex: none; }
.dw-result-mark .icon { width: 13px; height: 13px; }
.dw-result-mark.simulated { background: #F6EFE2; color: #765720; }
.dw-result-top h3 { margin: 0; font-family: var(--dw-sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em; color: var(--dw-ink); }
.dw-result > p { margin: 0 0 11px; font-size: 13px; line-height: 1.5; color: var(--dw-muted); }
.dw-result dl { margin: 0; display: grid; gap: 7px; }
.dw-result dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: baseline; }
.dw-result dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dw-muted); font-weight: 600; }
.dw-result dd { margin: 0; font-size: 13.5px; color: var(--dw-ink); overflow-wrap: anywhere; }
.dw-result-persistence { margin: 11px 0 0; font-size: 12.5px; color: var(--dw-muted); border-top: 1px dashed var(--dw-line); padding-top: 9px; }
.dw-result-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--dw-accent); text-decoration: none; }
.dw-result-cta .icon { width: 13px; height: 13px; }

.dw-foot { border-top: 1px solid var(--dw-line); background: #fff; padding: 10px 10px 10px 12px; }
/* chips: the questions a visitor can tap */
.dw-prompts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.dw-prompts:empty { display: none; }
.dw-prompts button {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--dw-ink); min-height: 36px;
  background: #fff; border: 1px solid var(--dw-line); border-radius: 999px; padding: 6px 13px;
  transition: background-color .2s ease, border-color .2s ease;
}
.dw-prompts button:hover { background: var(--dw-shell); border-color: #D6CBB6; }
.dw-error { font-size: 12.5px; font-weight: 500; color: #9A4733; background: #F7E4DE; border: 1px solid #EECDC2; border-radius: 14px; padding: 8px 12px; margin-bottom: 9px; }
.dw-error[hidden] { display: none; }
.dw-compose { display: flex; gap: 8px; align-items: flex-end; }
/* 16px, as in the real widget: under 16 iOS zooms the whole page */
.dw-compose textarea {
  flex: 1; font: inherit; font-size: 16px; line-height: 1.4; resize: none; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--dw-line); border-radius: 22px; padding: 10px 16px; max-height: 110px; color: var(--dw-ink); background: var(--dw-shell);
  transition: border-color .2s ease, background-color .2s ease;
}
.dw-compose textarea::placeholder { color: var(--dw-muted); opacity: 1; }
.dw-compose textarea:focus-visible { outline: none; border-color: var(--dw-accent); background: #fff; box-shadow: 0 0 0 1px var(--dw-accent); }
.dw-prompts button:focus-visible { outline: 2px solid var(--dw-accent); outline-offset: 1px; }
/* locked after a booking: room for its two-line hint ("Start a new
 * conversation to try again" does not fit one line at the panel's width) */
.dw-compose textarea:disabled { color: var(--dw-muted); min-height: 66px; border-radius: 18px; }
.dw-compose button {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dw-accent); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: grid; place-content: center; flex: none; transition: transform .15s ease;
}
/* the smoke, as on the real widget's Send: white mist screen-blended on the accent */
.dw-compose button::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 26% at 34% 40%, rgba(255,255,255,.6), rgba(255,255,255,0)),
    radial-gradient(34% 28% at 66% 62%, rgba(255,255,255,.45), rgba(255,255,255,0)),
    radial-gradient(24% 22% at 56% 26%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(3px); mix-blend-mode: screen; opacity: 0;
  transition: opacity .3s ease;
  animation: dw-smoke 3.2s linear infinite; animation-play-state: paused;
}
@keyframes dw-smoke { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (any-hover: hover) { .dw-compose button:hover:not(:disabled)::before { opacity: .32; animation-play-state: running; } }
.dw-compose button:focus-visible { outline: 2px solid var(--dw-accent); outline-offset: 2px; }
.dw-compose button:focus-visible::before { opacity: .28; animation-play-state: running; }
.dw-compose button:active:not(:disabled)::before { opacity: .36; animation-play-state: running; transition-duration: .1s; }
.dw-compose button:active:not(:disabled) { transform: scale(.97); }
.dw-compose button:disabled { opacity: .5; cursor: default; }
.dw-compose .icon { width: 16px; height: 16px; }
.dw-note { margin: 8px 0 0; font-size: 12px; color: var(--dw-muted); text-align: center; }

@media (max-width: 560px) {
  .dw-panel { right: 10px; left: 10px; width: auto; max-width: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 110px); }
  .dw-bubble { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .dw-result dl > div { grid-template-columns: 1fr; gap: 1px; }
}
@media (pointer: coarse) { .dw-prompts button { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .dw-panel { animation: none; }
  .dw-bubble, .dw-bubble:hover { transition: none; transform: none; }
  .dw-typing i { animation: none; opacity: .55; }
  .dw-compose button::before { display: none; animation: none; }
  .dw-compose button, .dw-compose button:active:not(:disabled) { transition: none; transform: none; }
  .dw-head-actions button, .dw-prompts button, .dw-compose textarea { transition: none; }
}