/* Visitor widget — neutral, modern, the customer's (docs/BRAND.md, "The
   widget"). It sits on other people's websites, so it uses the visitor's
   system font and carries the customer's accent (avatar, visitor bubbles,
   send button, next step), never Hazelchat's look. Brass appears only on the
   evidence keyline: the one thing Hazel is claiming. */
:root {
  --brand: #35624a;
  --on-brand: #fff;
  --surface: #fff;
  --surface-muted: #f3f4f1;
  --ink: #1d1f1c;
  --ink-muted: #565953;
  --ink-faint: #6b6e68;
  --ink-disabled: #9a9d96;
  --line: #eceee9;
  --edge: #dcdfd9;
  --brass: #c0a678;
  --quote-ink: #33362f;
  --action: #1d1f1c;
  --radius: 12px;
  --control: 10px;
  --tint: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
body[data-theme='dark'] {
  --surface: #1b1d1b;
  --surface-muted: #262926;
  --ink: #f1f1ec;
  --ink-muted: #bdbfb8;
  --ink-faint: #a3a59e;
  --ink-disabled: #80827c;
  --line: #2f322e;
  --edge: #3d403b;
  --quote-ink: #e6e6df;
  --action: #f1f1ec;
  --tint: color-mix(in srgb, var(--brand) 18%, var(--surface));
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--surface);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
p {
  margin: 0;
  color: var(--ink);
}
button {
  font: inherit;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
[hidden] {
  display: none !important;
}
.unavailable-page #log {
  display: grid;
  place-items: center;
  padding: 28px;
}
.unavailable-message {
  max-width: 280px;
  text-align: center;
}
.unavailable-message h2 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
}
.unavailable-message p {
  color: var(--ink-muted);
}
.unavailable-message button {
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

/* Header: who is answering, and on what basis. */
header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.who {
  flex: 1;
  min-width: 0;
}
h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.01em;
}
/* L1b: the owner's own logo as the avatar, shown whole (never cropped) on
   white inside the same circle, with a hairline so a white logo keeps its
   edge on a light header. The inset keeps square corners clear of the
   circle. */
#mark.logo {
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
#mark.logo img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}
/* Mode disclosure: which rules produced the answers a visitor is about to
   read. Quiet, but never hidden; source-only mode stands out. */
#mode {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-muted);
}
/* The dot sits on the first line when the disclosure wraps. */
#mode[data-mode='ai']::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: #3f9d5a;
}
#mode[data-mode='source-only'],
#mode[data-mode='unavailable'] {
  align-self: flex-start;
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brass) 22%, var(--surface));
  color: var(--quote-ink);
}
header button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1;
}
header button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--line);
}
#new-chat {
  font-size: 16px;
}

/* Conversation */
#log {
  flex: 1;
  overflow: auto;
  padding: 16px 16px 8px;
  min-height: 100px;
  overscroll-behavior: contain;
}
.welcome {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.greeting {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--tint);
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suggestion,
.person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.suggestion::after {
  content: '›';
  flex-shrink: 0;
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
}
.suggestion:hover:not(:disabled),
.person:hover {
  border-color: var(--brand);
  background: var(--tint);
}
.person {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 4px;
  background: var(--surface-muted);
  border-color: transparent;
}
.person strong {
  font-size: 14.5px;
  font-weight: 650;
}
.person span {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-muted);
}
.turn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}
.turn:first-child {
  padding-top: 0;
}
.turn > * {
  animation: arrive 0.28s ease-out both;
}
.visitor {
  align-self: flex-end;
  max-width: 82%;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  padding: 10px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.answer {
  align-self: flex-start;
  max-width: 94%;
  padding: 12px 14px;
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  background: var(--surface-muted);
}
.answer > p {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.evidence {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--brass);
  border-radius: 4px 10px 10px 4px;
  background: var(--surface);
}
/* A prose answer keeps its sources one click away, never hidden: the
   summary is always visible and the excerpts open in place. */
.sources {
  margin: 0 0 10px;
}
.sources > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  list-style: none;
}
.sources > summary::-webkit-details-marker {
  display: none;
}
.sources > summary::after {
  content: '›';
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.sources[open] > summary::after {
  transform: rotate(90deg);
}
.sources > summary:hover {
  color: var(--ink);
  border-color: var(--ink-disabled);
}
.sources > .evidence {
  margin-top: 8px;
}
blockquote {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--quote-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.citation {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
a,
.citation {
  color: var(--ink-faint);
  text-decoration: none;
}
/* Only a linked citation underlines; the plain-text source title (citation
   links off) must not look like a link. */
a:hover,
a.citation:hover {
  text-decoration: underline;
}
/* Product cards (server/catalog.ts): the shop's product, its price and
   stock as last confirmed by the shop, and when. A quiet list, not an ad:
   the title links to the product page, the facts sit in one line. */
.products {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.product {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--surface);
}
a.product-title {
  color: var(--ink);
  font-weight: 650;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}
.product-variant,
.product-checked {
  font-size: 12.5px;
  color: var(--ink-faint);
}
/* SC1: why the product fits (model-written, checked by the server). */
.product-reason {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.4;
}
/* SC2: the heading above a card the shop linked to the product. */
.goes-with {
  margin: 12px 0 6px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-muted);
}
/* SC1: a choosing question's choices: the shop's own values as text
   buttons that wrap; corners follow the owner's control setting. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.choice {
  min-height: 36px;
  max-width: 100%;
  padding: 7px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.choice:hover {
  border-color: var(--brand);
  background: var(--tint);
}
.product-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 14px;
}
.product-price {
  font-weight: 650;
  color: var(--ink);
}
.product-price.muted {
  font-weight: 500;
  color: var(--ink-muted);
}
.product-was {
  color: var(--ink-faint);
}
.product-stock {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.product-stock.sold-out {
  color: var(--ink-faint);
}
/* R3: the card's button under the facts. Add to cart (or Buy now) in the
   owner's accent, Choose options outlined; compact, never full width. */
.product-action {
  justify-self: start;
  margin-top: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--brand);
  border-radius: var(--control);
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
}
a.product-action {
  display: inline-block;
}
a.product-action:hover {
  text-decoration: none;
}
.product-action:hover:not(:disabled) {
  filter: brightness(1.08);
}
.product-action.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge);
}
.product-action.secondary:hover {
  filter: none;
  border-color: var(--ink-faint);
}
.product-action:disabled {
  cursor: default;
  opacity: 0.75;
}
/* Add to cart and, once something was added, View cart side by side. */
.product-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.product-buttons .product-action {
  margin-top: 0;
}
.product-action[hidden] {
  display: none;
}
.product-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}
/* The next step is the reason the widget exists: the owner's booking,
   purchase, trial or enquiry route, in their colour. */
.next-step {
  display: flex;
  width: fit-content;
  align-items: center;
  margin: 4px 0 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--brand);
  border-radius: var(--control);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.25;
}
a.next-step:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
button.next-step {
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
}
.next-step.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge);
}
/* Pending answer: a quiet bubble of three dots in the answer's place. The
   text is for the live region only; under reduced motion the dots stand
   still as an ellipsis. */
.typing {
  align-self: flex-start;
  padding: 14px 16px;
  background: var(--surface-muted);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  line-height: 0;
}
.dots {
  display: inline-flex;
  gap: 5px;
}
.dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: typing 1.2s infinite ease-in-out;
}
.dots i:nth-child(2) {
  animation-delay: 0.2s;
}
.dots i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dots {
    display: none;
  }
  .typing::after {
    content: '…';
    font-size: 16px;
    line-height: 8px;
    color: var(--ink-faint);
  }
  .turn > * {
    animation: none;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.utility {
  margin: 10px 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 12.5px;
}
.utility:hover:not(:disabled) {
  color: var(--ink);
  text-decoration: underline;
}

/* Composer: one field with the send button inside it. */
#composer {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  overflow: auto;
  max-height: 65dvh;
}
form#chat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border: 1.5px solid var(--edge);
  border-radius: var(--control);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form#chat:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
form#chat input {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
form#chat input:focus-visible {
  outline: none;
}
input,
textarea {
  font: inherit;
  min-width: 0;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--edge);
  border-radius: var(--control);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
}
textarea {
  border-radius: min(var(--control), 12px);
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-disabled);
}
#send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--control);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
#save-enquiry {
  width: 100%;
  border: 0;
  border-radius: var(--control);
  background: var(--brand);
  color: var(--on-brand);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}
/* A disabled Send is unmistakably off (muted fill, not a faded colour), and
   while an answer is pending the cursor says so. */
#send:disabled {
  background: var(--ink-disabled);
  opacity: 0.6;
  cursor: not-allowed;
}
form#chat[aria-busy='true'] #send {
  cursor: progress;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: 12px;
  color: var(--ink-faint);
}
.footer button {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 2px;
  font-size: 12px;
}
.footer button:hover:not(:disabled) {
  color: var(--ink);
  text-decoration: underline;
}
.footer-links {
  display: inline-flex;
  gap: 12px;
}
/* Plan entitlement (Free and Starter): shown whatever the footer text says. */
.branding {
  margin: 6px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-faint);
}
.branding a {
  color: var(--ink-muted);
  font-weight: 700;
  letter-spacing: -0.03em;
}
#enquiry {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 6px;
}
label {
  display: block;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-muted);
  margin: 10px 0 5px;
}
.consent {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 400;
}
.consent input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--brand);
}
#enquiry p {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 8px 0;
}
/* No red unless the action is destructive: a failed request is brass ink and
   a plain retry, like a failed import row. */
#error {
  color: #7d6440;
  font-size: 13px;
  margin-bottom: 7px;
}
#lead-success {
  color: #3f6b4b;
  font-size: 13px;
  margin-top: 8px;
}
/* The notice opens under the footer from its "Privacy" link; the summary is
   present for the details element and screen readers only. */
#privacy { font-size: 12.5px; color: var(--ink-muted); margin: 6px 0 0; }
#privacy summary { list-style: none; }
#privacy summary::-webkit-details-marker { display: none; }
#privacy-notice { max-height: 140px; overflow: auto; padding: 8px 0; }
#privacy-notice p { margin: 4px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Centered over the page (`data-layout='center'`, widget frames only): the
   window is up to 720 px wide, so the header, the transcript and the
   composer keep a column of at most 640 px. In a frame narrower than that —
   the corner widget, the phone sheet — each keeps its usual padding. The
   hosted page sets its own column in page.css and never carries the
   attribute. */
body[data-layout='center'] {
  --column-gutter: calc((100vw - 640px) / 2);
}
body[data-layout='center'] header {
  padding-left: max(16px, var(--column-gutter));
  padding-right: max(14px, var(--column-gutter));
}
body[data-layout='center'] #log {
  padding-left: max(16px, var(--column-gutter));
  padding-right: max(16px, var(--column-gutter));
}
body[data-layout='center'] #composer {
  padding-left: max(14px, var(--column-gutter));
  padding-right: max(14px, var(--column-gutter));
}

/* Onboarding test questions use the shared rows without decorative arrows. */
body[data-onboarding] .suggestion::after { content: none; }

/* L2: the display-only preview in the setup. It looks like the first view a
   visitor gets; nothing in it can be pressed, and one line says so. */
body[data-display] button, body[data-display] input, body[data-display] a, body[data-display] summary { pointer-events: none; }
body[data-display] button:disabled:not(#send) { opacity: 1; cursor: default; }
#display-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-muted); }