/* The demo page: an example business website with the real assistant on it.
 *
 * Two visual worlds live here on purpose and must not blend:
 *
 *   .demo-bar   AI Growth Kit's tooling. Dark, compact, unmistakably ours.
 *   .mock-site  a pretend customer's website. Light, ordinary, generic on
 *               purpose — it is scenery, and anything eye-catching here
 *               competes with the thing being demonstrated.
 *   .dw-*       the assistant, drawn to match public/widget/widget.js 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.
 */

/* ---------------------------------------------------------------- bar --- */
.demo-page { background: var(--paper); color: var(--ink); }
.demo-bar { background: var(--dark); color: var(--white); border-bottom: 1px solid var(--line); }
.demo-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
}
.demo-bar-brand { display: flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; font-weight: 600; font-size: 14px; padding-bottom: 4px; }
.demo-bar-tag {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 650;
  color: var(--gold-text); border: 1px solid rgba(211,173,109,.4); border-radius: 99px; padding: 2px 7px;
}
.demo-bar-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.demo-field { display: flex; flex-direction: column; gap: 4px; }
.demo-field label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.demo-field select, .demo-field input {
  font: inherit; font-size: 13.5px; color: var(--white);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; min-width: 160px;
}
.demo-field select:focus-visible, .demo-field input:focus-visible,
.apply-setup:focus-visible, .demo-bar-exit:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.demo-field input::placeholder { color: var(--muted); }
.apply-setup {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #1b1205;
  background: var(--brass); border: 0; border-radius: 8px; padding: 8px 13px;
}
.apply-setup:hover { background: #96702f; }
.apply-setup:disabled { opacity: .5; cursor: default; }
.apply-setup .icon { width: 14px; height: 14px; }
.demo-bar-exit { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; font-size: 13px; padding-bottom: 8px; }
.demo-bar-exit:hover { color: var(--white); }
.demo-bar-exit .icon { width: 13px; height: 13px; }
.demo-bar-note {
  max-width: 1180px; margin: 0 auto; padding: 0 20px 10px;
  font-size: 12.5px; color: var(--muted);
}

/* --------------------------------------------------------- mock site --- */
.mock-site { background: #fbfbf8; color: #22282a; }
.mock-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.mock-header { border-bottom: 1px solid #e6e8e2; background: #fff; }
.mock-header .mock-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.mock-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; color: #22282a; text-decoration: none; cursor: default; }
.mock-monogram {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-content: center;
  background: #22282a; color: #fff; font-weight: 600; font-size: 14px;
}
.mock-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; color: #5c6560; }
.mock-nav span { cursor: default; }
.mock-nav .mock-cta { background: #22282a; color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 600; }
@media (max-width: 720px) { .mock-nav span:not(.mock-cta) { display: none; } }

.mock-hero { padding: 56px 0 48px; }
.mock-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.mock-eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #7d8a82; font-weight: 650; }
.mock-hero h1 {
  font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.4vw, 46px);
  /* website.css sets -2.8px for a 76px hero. At 30-46px that closes the
     letters up until they read as one shape. */
  letter-spacing: -.8px; line-height: 1.12; margin: 0 0 14px; text-wrap: balance;
}
.mock-sub { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: #4d5853; max-width: 46ch; }
.mock-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mock-button {
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  background: #22282a; color: #fff; border: 0; padding: 11px 18px; border-radius: 9px;
}
.mock-button:hover { background: #333b3d; }
.mock-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.mock-link { color: #4d5853; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; cursor: default; }
.mock-hero-panel { display: flex; justify-content: flex-end; }
.mock-hero-card {
  background: #fff; border: 1px solid #e6e8e2; border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(34,40,42,.05), 0 12px 32px rgba(34,40,42,.07);
  display: flex; flex-direction: column; gap: 6px; min-width: 240px;
}
.mock-card-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7d8a82; font-weight: 650; }
.mock-hero-card strong { font-family: var(--display); font-weight: 500; font-size: 22px; }
.mock-hero-card span:last-child { font-size: 13.5px; color: #5c6560; }
@media (max-width: 860px) { .mock-hero-inner { grid-template-columns: 1fr; } .mock-hero-panel { justify-content: flex-start; } }

.mock-services { padding: 0 0 60px; }
.mock-services h2 { font-family: var(--display); font-weight: 500; font-size: 24px; letter-spacing: -.3px; margin: 0 0 18px; }
.mock-service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.mock-service-list li {
  background: #fff; border: 1px solid #e6e8e2; border-radius: 12px; padding: 15px 17px;
  font-size: 14.5px; color: #4d5853;
}
.mock-service-list li strong { display: block; color: #22282a; font-size: 15px; margin-bottom: 3px; font-weight: 650; }
/* A hero and three cards read as a stub, not a business. This band gives the
 * example site the shape a real trade site has, and stops a tall screen from
 * ending in a stranded empty half-page. */
.mock-detail { border-top: 1px solid #e6e8e2; padding: 40px 0 48px; }
.mock-detail-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.mock-detail h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7d8a82; font-weight: 650; margin: 0 0 9px; }
.mock-detail p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #4d5853; max-width: 34ch; }
.mock-hours { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: #4d5853; }
.mock-hours li { display: flex; justify-content: space-between; gap: 16px; max-width: 240px; padding: 3px 0; }
.mock-hours span:last-child { color: #22282a; font-variant-numeric: tabular-nums; }

.mock-footer { border-top: 1px solid #e6e8e2; background: #fff; }
.mock-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 58px; font-size: 13px; color: #5c6560; }
.mock-footer-meta { color: #8b948f; }

/* ------------------------------------------------------------ widget --- */
/* Geometry, colours and motion copied from public/widget/widget.js so the
 * demo shows the real thing rather than an idealised version of it. */
.dw-bubble {
  position: fixed; bottom: 22px; right: 22px; width: 58px; height: 58px;
  border-radius: 50%; background: var(--teal); border: 0; cursor: pointer;
  color: #fff; box-shadow: 0 8px 24px rgba(27,42,36,.28);
  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: 3px solid var(--brass); outline-offset: 3px; }
.dw-bubble-icon { width: 24px; height: 24px; }
.dw-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--brass); border: 2px solid var(--teal); }
.dw-dot[hidden] { display: none; }

.dw-panel {
  position: fixed; bottom: 92px; right: 22px; width: 370px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid #e2e5df; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(27,42,36,.25);
  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;
}
.dw-panel[hidden] { display: none; }
@keyframes dw-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.dw-head { background: var(--ink); color: #eaede7; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dw-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dw-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brass); color: #eaede7; display: grid; place-content: center; font-family: var(--display); font-size: 14px; flex: none; }
/* Inter and normal tracking, stated explicitly.
 *
 * website.css sets `h1,h2 { font-family: var(--display) }` and
 * `h2 { letter-spacing: -1.8px }`, which are right for a 56px headline and
 * wrong for a 14px panel header: Fraunces squeezed to -1.8px at that size
 * renders as a grey smudge from any distance. Reported from a tablet.
 *
 * The design system says it outright — never put Fraunces into small UI
 * chrome — and the real widget uses Inter 600 here. This matches it. */
.dw-head h2 {
  margin: 0; font-family: var(--body); font-size: 14px; font-weight: 600;
  letter-spacing: normal; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-status { display: block; font-size: 11px; color: #9fb0a5; margin-top: 1px; }
.dw-head-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.dw-head-actions button { background: none; border: 0; color: #9fb0a5; cursor: pointer; padding: 5px; border-radius: 6px; display: grid; place-content: center; }
.dw-head-actions button:hover:not(:disabled) { color: #eaede7; }
.dw-head-actions button:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.dw-head-actions button:disabled { opacity: .4; cursor: default; }

/* 18px and stroke-width 2, not 15px and the inherited 1.7.
 *
 * .icon sets stroke-width on a 24-unit viewBox, so the stroke scales with the
 * box: at 15px it rendered 1.7 x 15/24 = 1.06 CSS pixels. A sub-pixel stroke
 * has nowhere to land on the pixel grid and antialiases into a grey smear,
 * which is what "low quality" looked like. 2 x 18/24 = 1.5px, which resolves
 * cleanly at 1x and crisply at 2x.
 *
 * The close button was worse: a text glyph, not an icon, so it took whatever
 * font happened to load and matched nothing around it. It is a real stroked
 * icon now, so both buttons are drawn the same way at the same weight. */
.dw-head-actions .icon { width: 18px; height: 18px; stroke-width: 2; }

.dw-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fafaf6; }
.dw-msg { max-width: 84%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.dw-msg.assistant { background: #fff; border: 1px solid #e2e5df; align-self: flex-start; border-bottom-left-radius: 4px; }
.dw-msg.user { background: var(--teal); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.dw-msg.failed { opacity: .55; }
.dw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: #fff; border: 1px solid #e2e5df; border-radius: 13px; border-bottom-left-radius: 4px; }
.dw-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa89f; 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 #e2e5df; border-radius: 13px; padding: 14px; }
.dw-result-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.dw-result-mark { width: 24px; height: 24px; border-radius: 50%; background: #eef3ee; color: #3e7d5a; display: grid; place-content: center; flex: none; }
.dw-result-mark .icon { width: 13px; height: 13px; }
.dw-result-mark.simulated { background: #f3efe4; color: #8a6d2f; }
.dw-result-top h3 { margin: 0; font-family: var(--body); font-weight: 650; font-size: 15px; letter-spacing: normal; color: var(--ink); }
.dw-result > p { margin: 0 0 11px; font-size: 12.5px; line-height: 1.5; color: #5b685f; }
.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: .05em; text-transform: uppercase; color: #7d8a82; font-weight: 650; }
.dw-result dd { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.dw-result-persistence { margin: 11px 0 0; font-size: 12px; color: #5b685f; border-top: 1px dashed #e2e5df; padding-top: 9px; }
.dw-result-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; }
.dw-result-cta .icon { width: 13px; height: 13px; }

.dw-foot { border-top: 1px solid #e2e5df; background: #fff; padding: 9px 10px 10px; }
.dw-prompts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dw-prompts:empty { display: none; }
.dw-prompts button {
  font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink);
  background: #f4f6f1; border: 1px solid #e2e5df; border-radius: 99px; padding: 6px 11px;
}
.dw-prompts button:hover { background: #eaeee6; }
.dw-error { font-size: 12.5px; color: #8c3a26; background: #f6e3de; border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; }
.dw-error[hidden] { display: none; }
.dw-compose { display: flex; gap: 8px; align-items: flex-end; }
.dw-compose textarea {
  flex: 1; font: inherit; font-size: 13.5px; line-height: 1.45; resize: none;
  border: 1px solid #e2e5df; border-radius: 9px; padding: 9px 11px; max-height: 110px; color: var(--ink);
}
.dw-compose textarea:focus-visible, .dw-prompts button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.dw-compose textarea:disabled { background: #f4f6f1; color: #7d8a82; }
.dw-compose button {
  background: var(--teal); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 9px;
  cursor: pointer; display: grid; place-content: center; flex: none;
}
.dw-compose button:disabled { opacity: .5; cursor: default; }
.dw-compose .icon { width: 15px; height: 15px; }
.dw-note { margin: 8px 0 0; font-size: 11.5px; color: #7d8a82; text-align: center; }

.demo-footnote { max-width: 1180px; margin: 0 auto; padding: 22px 20px 120px; font-size: 12.5px; color: #5b685f; display: grid; gap: 6px; }
.demo-footnote p { margin: 0; max-width: 70ch; }
.demo-footnote a { color: var(--teal); }
.noscript-note { max-width: 1180px; margin: 0 auto; padding: 16px 20px; font-size: 14px; }

@media (max-width: 560px) {
  .dw-panel { right: 10px; left: 10px; width: auto; bottom: 84px; max-height: calc(100vh - 110px); }
  .dw-bubble { right: 16px; bottom: 16px; }
  .demo-bar-controls { margin-left: 0; width: 100%; }
  .demo-field select, .demo-field input { min-width: 0; width: 100%; }
  .demo-field { flex: 1 1 140px; }
  .dw-result dl > div { grid-template-columns: 1fr; gap: 1px; }
}

@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; }
}