/* ============================================================
   REKINDLED LIVE DEMO
   Ported from the Insiteful database-reactivation page, but restyled
   from scratch: none of Insiteful's palette, type or spacing carries
   over. This file reuses the tokens and the phone/bubble vocabulary
   already established in main.css.
   ============================================================ */

/* The demo shows and hides panels with the `hidden` attribute, but `hidden` only
   supplies `display: none` at user-agent weight — any explicit `display` in this file
   silently beats it. Several panels below set `display: grid`/`flex`, so without this
   rule they never hide: the reply box shows before the demo starts, and the setup form
   and "fill in your details" placeholder both survive the first message. One rule fixes
   all of them. Keep it above the panels it guards. */
.dbr [hidden] {
  display: none !important;
}

.dbr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* The demo reads as its own page: clicking "Live demo" should land on a screen that
   is the demo, whole and centred, rather than the top edge of a section that runs off
   the bottom. min-height fills the viewport; the top padding clears the 79px fixed
   header so centred content never hides behind it.

   `safe center` matters — on a short window the content is taller than the viewport,
   and plain `center` would push its top edge above the screen where it can't be
   scrolled back to. `safe` falls back to top-aligned exactly in that case. */
#demo {
  display: grid;
  align-content: safe center;
  min-height: 100vh;
  padding-top: 5.5rem;
  padding-bottom: 2rem;
  scroll-margin-top: 0;
}

/* ---------- Left column: setup form ---------- */

/* Tighter than the rest of the page on purpose: this section is sized to fit one
   screen, and the form is where the spare vertical space had to come from. */
.dbr-setup {
  display: grid;
  gap: .9rem;
  margin-top: 1.5rem;
  max-width: 30rem;
}

.dbr-field {
  display: grid;
  gap: .45rem;
}

.dbr-field label {
  color: var(--ink-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.dbr-optional {
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
  opacity: .8;
}

.dbr-field input {
  width: 100%;
  border: 1px solid rgba(244, 241, 236, .16);
  border-radius: 4px;
  background: rgba(19, 17, 19, .6);
  padding: 13px 15px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  transition: border-color .2s ease, background .2s ease;
}

.dbr-field input::placeholder { color: var(--ink-faint); }

.dbr-field input:hover { border-color: rgba(244, 241, 236, .28); }

.dbr-field input:focus {
  outline: none;
  border-color: var(--ember);
  background: rgba(19, 17, 19, .9);
}

.dbr-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  border: 1px solid var(--ember);
  border-radius: 4px;
  background: var(--ember);
  padding: 14px 34px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.dbr-start:hover:not(:disabled) {
  border-color: #EE7A32;
  background: #EE7A32;
  box-shadow: 0 0 32px var(--ember-soft);
}

.dbr-start:disabled { opacity: .6; cursor: default; }

.dbr-error,
.dbr-capture-error {
  margin: 0;
  color: #F0A07A;
  font-size: .88rem;
}

.dbr-note {
  margin-top: .5rem;
  color: var(--ink-faint);
  font-size: .8rem;
}

/* ---------- Curveball chips ---------- */

.dbr-tryit { margin-top: 2rem; }

.dbr-tryit-label {
  margin: 0 0 .8rem;
  color: var(--ember);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.dbr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.dbr-chip {
  border: 1px solid rgba(244, 241, 236, .18);
  border-radius: 999px;
  background: transparent;
  padding: .5rem .9rem;
  color: var(--ink-sub);
  font-family: var(--sans);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.dbr-chip:hover:not(:disabled) {
  border-color: var(--ember);
  background: var(--ember-soft);
  color: var(--ink);
}

.dbr-chip:disabled { opacity: .4; cursor: default; }

.dbr-tryit-foot {
  margin: .9rem 0 0;
  color: var(--ink-faint);
  font-size: .78rem;
}

/* ---------- Right column: the phone ---------- */

/* Drops the phone so its reply box sits level with the "Your first name" field
   opposite (measured: 153px at 1512px wide). A fixed offset rather than
   align-self:center on purpose — the left column loses the setup form once the demo
   starts, so a centred phone would jump down mid-conversation. */
.dbr-col-phone {
  display: grid;
  gap: 1.4rem;
  justify-self: center;
  width: 100%;
  margin-top: 8.5rem;
}

.dbr-phone {
  width: min(100%, 380px);
  justify-self: center;
  border: 1px solid rgba(244, 241, 236, .14);
  border-radius: 34px;
  background: linear-gradient(180deg, #171417, #0D0D0E);
  padding: 16px 14px 14px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}

.dbr-phone-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-bottom: 1px solid rgba(244, 241, 236, .09);
  padding: 0 .3rem .9rem;
}

.dbr-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-ember);
  color: #1A0B04;
  font-family: var(--serif);
  font-size: 1rem;
}

.dbr-phone-meta {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.dbr-phone-meta strong {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
}

.dbr-phone-meta span {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dbr-live {
  flex: 0 0 auto;
  border: 1px solid rgba(228, 113, 58, .5);
  border-radius: 999px;
  padding: .2rem .55rem;
  color: var(--ember);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.dbr-thread {
  display: grid;
  align-content: start;
  gap: .7rem;
  height: 400px;
  overflow-y: auto;
  padding: 1rem .3rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 241, 236, .2) transparent;
}

.dbr-thread::-webkit-scrollbar { width: 4px; }
.dbr-thread::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(244, 241, 236, .2);
}

.dbr-idle {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .9rem;
  height: 100%;
  padding: 0 1.6rem;
  text-align: center;
}

.dbr-idle-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(244, 241, 236, .12);
  border-radius: 50%;
  color: var(--ink-faint);
}

.dbr-idle-icon svg { width: 22px; height: 22px; }

.dbr-idle p {
  margin: 0;
  color: var(--ink-faint);
  font-size: .84rem;
  line-height: 1.5;
}

.dbr-row {
  display: grid;
  gap: .25rem;
  justify-items: start;
}

.dbr-row--visitor { justify-items: end; }

.dbr-bubble {
  display: grid;
  max-width: 86%;
  border-radius: 16px;
  padding: .78rem .9rem;
  font-size: .9rem;
  line-height: 1.42;
}

.dbr-bubble--agent {
  border-bottom-left-radius: 5px;
  background: rgba(244, 241, 236, .09);
  color: var(--ink-sub);
}

.dbr-bubble--visitor {
  border-bottom-right-radius: 5px;
  background: rgba(228, 113, 58, .24);
  color: var(--ink);
}

.dbr-gap { height: .55rem; }

.dbr-time {
  padding: 0 .35rem;
  color: var(--ink-faint);
  font-size: .62rem;
  letter-spacing: .06em;
}

.dbr-typing {
  display: flex;
  width: max-content;
  gap: .32rem;
  border-radius: 999px;
  padding: .62rem .75rem;
}

.dbr-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: pulse 1.2s infinite ease-in-out;
}

.dbr-typing i:nth-child(2) { animation-delay: .16s; }
.dbr-typing i:nth-child(3) { animation-delay: .32s; }

.dbr-compose {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid rgba(244, 241, 236, .09);
  padding: .9rem .3rem 0;
}

.dbr-compose input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(244, 241, 236, .16);
  border-radius: 999px;
  background: rgba(19, 17, 19, .6);
  padding: 11px 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .88rem;
}

.dbr-compose input::placeholder { color: var(--ink-faint); }

.dbr-compose input:focus {
  outline: none;
  border-color: var(--ember);
}

.dbr-compose input:disabled { opacity: .5; }

.dbr-compose button {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--ember);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease;
}

.dbr-compose button:hover:not(:disabled) { background: #EE7A32; }
.dbr-compose button:disabled { opacity: .45; cursor: default; }
.dbr-compose button svg { width: 17px; height: 17px; }

/* ---------- Outcome card + email capture ---------- */

.dbr-outcome {
  border: 1px solid rgba(244, 241, 236, .1);
  border-radius: 6px;
  background: rgba(19, 17, 19, .55);
  padding: 1.5rem;
}

.dbr-outcome h3 { font-size: 1.4rem; }

.dbr-outcome > p {
  margin: .7rem 0 0;
  font-size: .9rem;
}

.dbr-capture {
  display: grid;
  gap: .55rem;
  margin-top: 1.4rem;
  border-top: 1px solid rgba(244, 241, 236, .09);
  padding-top: 1.3rem;
}

.dbr-capture label {
  color: var(--ink-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.dbr-capture-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.dbr-capture-row input {
  flex: 1 1 12rem;
  min-width: 0;
  border: 1px solid rgba(244, 241, 236, .16);
  border-radius: 4px;
  background: rgba(11, 11, 12, .6);
  padding: 11px 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9rem;
}

.dbr-capture-row input::placeholder { color: var(--ink-faint); }
.dbr-capture-row input:focus { outline: none; border-color: var(--ember); }

.dbr-capture-note,
.dbr-capture-done {
  margin: 0;
  color: var(--ink-faint);
  font-size: .76rem;
}

.dbr-capture-done { color: var(--ember); }

.dbr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  border: 1px solid var(--ember);
  border-radius: 4px;
  background: var(--ember);
  padding: 11px 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.dbr-cta:hover { border-color: #EE7A32; background: #EE7A32; }

.dbr-cta--ghost {
  border-color: rgba(244, 241, 236, .35);
  background: transparent;
}

.dbr-cta--ghost:hover {
  border-color: var(--ember);
  background: transparent;
  color: var(--ember);
}

.dbr-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .dbr {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked layout — the phone sits under the form, so the desktop offset would
     just be dead space. */
  .dbr-col-phone { grid-row: 2; margin-top: 0; }

  .dbr-thread { height: 340px; }
}

/* ============================================================
   BOOKING POPUP
   Keeps visitors on rekindled.agency while they book — the calendar is served
   from Insiteful's GoHighLevel domain, so a plain link shows insiteful.agency
   in the address bar. Verified embeddable: the widget sends no X-Frame-Options
   and no CSP frame-ancestors.
   ============================================================ */

.book-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  /* Tight on purpose. Every pixel of padding is a pixel the 827px calendar doesn't
     get, and losing that race brings the scrollbar back. */
  padding: clamp(.5rem, 1.5vw, 1rem);
}

.book-modal[hidden] { display: none; }

.book-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 7, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}

/* The calendar's own page measures 827px. Give it every pixel available so its
   document doesn't scroll — that scrollbar sat on top of the widget's internal one
   for the time-slot column, which is the pair Chris was seeing. 96vh rather than a
   rounder number because the panel is all embed now: no header row to subtract. */
.book-panel {
  position: relative;
  display: grid;
  width: min(940px, 100%);
  height: min(900px, 96vh);
  overflow: hidden;
  border: 1px solid rgba(244, 241, 236, .12);
  border-radius: 8px;
  background: var(--ground-lift);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(12px) scale(.99);
  transition: opacity .3s ease, transform .3s ease;
}

.book-modal.is-open .book-backdrop { opacity: 1; }

.book-modal.is-open .book-panel {
  opacity: 1;
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Floats over the widget's top-right corner. Solid background, not transparent —
   it sits on the calendar's own content and has to stay legible against it. */
.book-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(244, 241, 236, .22);
  border-radius: 50%;
  background: rgba(11, 11, 12, .85);
  color: var(--ink-sub);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.book-close:hover {
  border-color: var(--ember);
  background: var(--ground);
  color: var(--ember);
}

/* The iframe fills the panel exactly and the widget scrolls its own content — it
   already has an internal scroll region for the time-slot column. Letting GHL's
   resizer grow the iframe to full content height instead produced a second,
   outer scrollbar on top of that one. Hence overflow:hidden and a 100% height.

   Background is the panel colour, not white: the widget renders dark, and any
   gap it doesn't paint (the strip above its content, the edge beside the slots)
   showed as a white band against the dark popup. */
.book-embed {
  overflow: hidden;
  background: var(--ground);
}

.book-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.book-loading {
  padding: 3rem 1.4rem;
  color: var(--ink-faint);
  font-size: .9rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .book-backdrop,
  .book-panel { transition: none; }
}


/* ============================================================
   SHARED DEMO TOKENS
   The chat and voice demos were ported from the Insiteful site,
   where they carried that brand's mint-and-gold palette. Those
   tokens are renamed to --demo-* here and re-pointed at the
   ember palette in main.css, so there is one place to change
   the look of every demo on this site.
   ============================================================ */
:root {
  --demo-noir: var(--ground);
  --demo-noir-deep: #050506;
  --demo-accent: var(--ember);
  --demo-accent-deep: var(--ember-deep);
  --demo-accent-soft: var(--ink-warm);
  --demo-accent-25: rgba(228, 113, 58, 0.28);
  --demo-ink: var(--ink);
  --demo-ink-75: rgba(244, 241, 236, 0.75);
  --demo-ink-60: var(--ink-sub);
  --demo-ink-35: var(--ink-faint);
  --demo-ink-12: var(--line);
}

/* ============================================================
   DEMO INDEX
   The numbered list that opens demos.html and the teaser in its
   place on the home page. It reuses .steps for layout; these
   rules only make the headings read as links, which .steps
   never had to do.
   ============================================================ */
.demo-index h3 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--ember), var(--ember));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .28s ease, color .28s ease;
}
.demo-index h3 a:hover,
.demo-index h3 a:focus-visible {
  color: var(--ink-warm);
  background-size: 100% 1px;
}

/* The whole row is a target on touch, where hover says nothing. */
@media (hover: none) {
  .demo-index h3 a { background-size: 100% 1px; }
}