/* =============================================================================
   ESTIMATE CHAT — styles for assets/js/chat.js.
   Every colour and face comes from tokens.css, so the panel follows the brand
   with nothing to edit here. Desktop: a floating panel bottom-right, beside
   the page. Phones: a full-screen sheet.
   ========================================================================== */

.echat {
  --ec-ink: var(--c-cool-dark-blue, #171513);
  --ec-text: var(--c-cool-gray-blue, #56524c);
  --ec-ground: var(--c-warm-light-beige, #f6f3ee);
  --ec-card: var(--c-warm-white, #fff);
  --ec-line: var(--c-warm-light-brown, #e2dacb);
  --ec-accent: var(--c-warm-brown, #86671f);
  --ec-bright: var(--c-gold, #c9a227);
  --ec-ease: var(--ease, cubic-bezier(.25, .74, .22, .99));
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  font-family: var(--font-ui); color: var(--ec-text);
}
.echat[hidden] { display: none; }

.echat__panel {
  position: absolute; right: 24px; bottom: 24px;
  width: min(410px, calc(100vw - 48px)); height: min(700px, calc(100svh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ec-ground); border-radius: 22px;
  box-shadow: 0 30px 80px -20px rgba(23, 21, 19, .45), 0 0 0 1px rgba(23, 21, 19, .06);
  pointer-events: auto;
  opacity: 0; transform: translateY(18px) scale(.97); transform-origin: 100% 100%;
  transition: opacity .32s var(--ec-ease), transform .45s var(--ec-ease);
}
.echat.is-open .echat__panel { opacity: 1; transform: none; }

/* the floating estimate button steps aside while the panel is up */
.echat-open .buy-dock { opacity: 0 !important; pointer-events: none !important; }

/* ---- header ---------------------------------------------------------------- */
.echat__head {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 18px 14px 20px 18px; background: var(--ec-ink); color: #fff;
}
.echat__who { flex: 1; min-width: 0; }
.echat__title {
  font-family: var(--font-mark, var(--font-display)); font-weight: 600; letter-spacing: .06em;
  font-size: 1.7rem; line-height: 1.2; color: #fff; text-transform: uppercase;
}
.echat__status { display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font-size: 1.3rem; color: rgba(255, 255, 255, .7); }
.echat__live { width: 7px; height: 7px; border-radius: 50%; background: #5bd17a;
  box-shadow: 0 0 0 3px rgba(91, 209, 122, .22); flex: none; }
.echat__icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: rgba(255, 255, 255, .8); background: transparent;
  border: 0; cursor: pointer; transition: background .2s, color .2s;
}
.echat__icon-btn:hover, .echat__icon-btn:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }
.echat__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .1); }
.echat__progress span { display: block; height: 100%; width: 0; background: var(--ec-bright);
  transition: width .6s var(--ec-ease); }

.echat__avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ec-ink); color: var(--ec-bright);
}
.echat__avatar svg { width: 64%; height: auto; overflow: visible; }
.echat__avatar--lg { width: 42px; height: 42px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .45); }

/* ---- conversation ---------------------------------------------------------- */
.echat__log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 18px 10px; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: var(--ec-line) transparent;
}
.echat__row { display: flex; align-items: flex-end; gap: 9px; max-width: 100%; }
.echat__row--bot { align-self: flex-start; padding-right: 34px; }
.echat__row--user { align-self: flex-end; flex-direction: column; align-items: flex-end; margin: 6px 0 8px; }
/* one avatar per run of bot lines, on the last of them */
.echat__row--bot:has(+ .echat__row--bot) .echat__avatar { visibility: hidden; }
.echat__row--bot + .echat__row--user, .echat__row--user + .echat__row--bot { margin-top: 4px; }

.echat__bubble {
  padding: 11px 15px; border-radius: 18px; font-size: 1.55rem; line-height: 1.5;
  overflow-wrap: anywhere;
}
.echat__row--bot .echat__bubble {
  background: var(--ec-card); color: var(--ec-ink); border-bottom-left-radius: 6px;
  box-shadow: 0 1px 0 rgba(23, 21, 19, .05);
}
.echat__row--bot .echat__bubble strong { font-weight: 600; }
.echat__row--user .echat__bubble {
  background: var(--ec-ink); color: #fff; border-bottom-right-radius: 6px;
}
.echat__row.is-new { animation: ecIn .42s var(--ec-ease) both; }
.echat__row--user.is-new { animation-name: ecInR; }
@keyframes ecIn  { from { opacity: 0; transform: translate(-6px, 8px); } }
@keyframes ecInR { from { opacity: 0; transform: translate(6px, 8px); } }

.echat__edit {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 6px;
  font: inherit; font-size: 1.2rem; color: var(--ec-text); background: none; border: 0;
  cursor: pointer; opacity: .75; min-height: 28px;
}
.echat__edit:hover, .echat__edit:focus-visible { opacity: 1; color: var(--ec-accent); }

.echat__dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.echat__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ec-text); opacity: .35;
  animation: ecDot 1.1s infinite ease-in-out; }
.echat__dots i:nth-child(2) { animation-delay: .15s; }
.echat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ecDot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: .9; } }

/* ---- answers --------------------------------------------------------------- */
.echat__dock { padding: 6px 16px 14px; }
.echat__dock:empty { padding: 0; }
.echat__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.echat__chips--swatch { justify-content: flex-start; }
.echat__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 17px;
  font: inherit; font-size: 1.5rem; line-height: 1.2; color: var(--ec-ink);
  background: var(--ec-card); border: 1px solid var(--ec-line); border-radius: 999px;
  cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s var(--ec-ease);
  animation: ecIn .4s var(--ec-ease) both;
}
.echat__chip:nth-child(2) { animation-delay: .04s; } .echat__chip:nth-child(3) { animation-delay: .08s; }
.echat__chip:nth-child(4) { animation-delay: .12s; } .echat__chip:nth-child(5) { animation-delay: .16s; }
.echat__chip:nth-child(6) { animation-delay: .2s; }  .echat__chip:nth-child(n+7) { animation-delay: .24s; }
.echat__chip:hover { border-color: var(--ec-accent); transform: translateY(-1px); }
.echat__chip:focus-visible { outline: 2px solid var(--ec-accent); outline-offset: 2px; }
.echat__chip:active { transform: scale(.98); }
.echat__chip--swatch { padding: 5px 15px 5px 5px; }
.echat__chip--swatch img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.echat__chip--ghost { background: transparent; border-style: dashed; font-size: 1.4rem; min-height: 40px; padding: 8px 14px; }
.echat__chip--toggle .echat__tick {
  width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center;
  background: var(--ec-accent); color: #fff; flex: none;
}
.echat__chip--toggle[aria-pressed="true"] { border-color: var(--ec-ink); background: var(--ec-ink); color: #fff; }
.echat__chip--toggle[aria-pressed="true"] .echat__tick { display: grid; }
.echat__chip--toggle.echat__chip--swatch[aria-pressed="true"] .echat__tick { margin-left: -2px; }

.echat__go-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.echat__hint { margin-right: auto; font-size: 1.3rem; }
.echat__go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px;
  padding: 12px 20px; font: inherit; font-size: 1.5rem; font-weight: 500; text-decoration: none;
  color: #fff; background: var(--ec-accent); border: 0; border-radius: 999px; cursor: pointer;
  transition: filter .2s, opacity .2s, transform .2s var(--ec-ease);
}
.echat__go:hover { filter: brightness(1.08); }
.echat__go:active { transform: scale(.98); }
.echat__go:focus-visible { outline: 2px solid var(--ec-ink); outline-offset: 2px; }
.echat__go:disabled { opacity: .4; cursor: default; filter: none; }
.echat__go--wide { width: 100%; margin-top: 14px; }
.echat__go--ghost { background: transparent; color: var(--ec-ink); box-shadow: inset 0 0 0 1px var(--ec-line); }
.echat__go.is-loading span { opacity: .6; }
.echat__go.is-loading svg { animation: ecNudge .8s infinite ease-in-out; }
@keyframes ecNudge { 50% { transform: translateX(4px); } }
.echat__skip {
  min-height: 44px; padding: 8px 6px; font: inherit; font-size: 1.4rem; color: var(--ec-text);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.echat__skip:hover { color: var(--ec-ink); }

/* composer */
.echat__composer .echat__chips--suggest { justify-content: flex-start; margin-bottom: 10px; }
.echat__field {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px;
  background: var(--ec-card); border: 1px solid var(--ec-line); border-radius: 26px;
  transition: border-color .2s, box-shadow .2s;
}
.echat__field:focus-within { border-color: var(--ec-accent); box-shadow: 0 0 0 4px rgba(134, 103, 31, .12); }
.echat__input {
  flex: 1; min-width: 0; min-height: 40px; padding: 9px 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 1.6rem; /* never under 16px: iOS zooms on focus */
  color: var(--ec-ink); resize: none; line-height: 1.4;
}
.echat__input::placeholder { color: var(--ec-text); opacity: .65; }
.echat__send {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--ec-accent); border: 0; cursor: pointer; transition: filter .2s, transform .2s;
}
.echat__send:hover { filter: brightness(1.08); }
.echat__send:active { transform: scale(.94); }
.echat__error { min-height: 0; margin: 0; padding: 0 16px; font-size: 1.3rem; color: var(--c-error, #b3261e); }
.echat__error:not(:empty) { padding-top: 8px; }
.echat__composer.is-bad .echat__field { border-color: var(--c-error, #b3261e); animation: ecShake .36s; }
@keyframes ecShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* summary */
.echat__summary {
  padding: 6px 18px 18px; background: var(--ec-card); border-radius: 18px;
  box-shadow: 0 0 0 1px var(--ec-line); animation: ecIn .45s var(--ec-ease) both;
}
.echat__sum-row { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 30px; gap: 10px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ec-line); }
.echat__sum-row:last-child { border-bottom: 0; }
.echat__sum-row dt { font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; }
.echat__sum-row dd { margin: 0; font-size: 1.45rem; color: var(--ec-ink); overflow-wrap: anywhere; }
.echat__sum-edit { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ec-text); background: none; border: 0; cursor: pointer; }
.echat__sum-edit:hover, .echat__sum-edit:focus-visible { color: var(--ec-accent); background: var(--ec-ground); }

/* done */
.echat__done {
  padding: 22px 20px 20px; text-align: center; background: var(--ec-card); border-radius: 18px;
  box-shadow: 0 0 0 1px var(--ec-line); animation: ecIn .45s var(--ec-ease) both;
}
.echat__check { display: inline-block; width: 54px; height: 54px; color: var(--ec-accent); }
.echat__check svg { width: 100%; height: 100%; }
.echat__check-ring { stroke-dasharray: 146; stroke-dashoffset: 146; animation: ecDraw .7s var(--ec-ease) forwards; }
.echat__check-tick { stroke-dasharray: 34; stroke-dashoffset: 34; animation: ecDraw .45s .45s var(--ec-ease) forwards; }
@keyframes ecDraw { to { stroke-dashoffset: 0; } }
.echat__done-title { margin-top: 10px; font-family: var(--font-display); font-size: 2.2rem; line-height: 1.2; color: var(--ec-ink); }
.echat__next { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: n; text-align: left; }
.echat__next li { position: relative; padding: 9px 0 9px 36px; font-size: 1.4rem; line-height: 1.45;
  border-top: 1px solid var(--ec-line); counter-increment: n; }
.echat__next li::before { content: counter(n); position: absolute; left: 0; top: 8px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; color: #fff; background: var(--ec-ink); }
.echat__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

.echat__legal { padding: 0 18px 12px; font-size: 1.2rem; line-height: 1.45; text-align: center; opacity: .8; }
.echat__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- phones: a full-screen sheet ------------------------------------------ */
@media (max-width: 767px) {
  .echat { pointer-events: auto; background: rgba(23, 21, 19, 0); transition: background .3s; }
  .echat.is-open { background: rgba(23, 21, 19, .45); }
  .echat__panel {
    left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; transform: translateY(40px); transform-origin: 50% 100%;
  }
  .echat__head { padding-top: max(14px, env(safe-area-inset-top)); }
  .echat__dock { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .echat__bubble { font-size: 1.6rem; }
  .echat-open .action-bar { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .echat__panel, .echat__row.is-new, .echat__chip, .echat__summary, .echat__done { animation: none !important; transition: none !important; }
  .echat__check-ring, .echat__check-tick { animation: none; stroke-dashoffset: 0; }
  .echat__progress span { transition: none; }
}

/* cards that live in the conversation: the summary and the success card */
.echat__row--card { align-self: stretch; display: block; margin: 8px 0 4px; }
.echat__row--card > * { width: 100%; }
.echat__row--card .echat__summary, .echat__row--card .echat__done { animation: none; }
/* the dock never takes more than half the panel, whatever it holds */
.echat__dock { max-height: 50%; overflow-y: auto; flex: none; }
.echat__dock > .echat__go--wide { margin-top: 4px; }

/* =============================================================================
   LAUNCHER — the round chat button, bottom-right on every screen size.
   ========================================================================== */
.has-echat .buy-dock { display: none !important; }   /* the launcher replaces the dot */

.echat-launch {
  --ec-ink: var(--c-cool-dark-blue, #171513);
  --ec-bright: var(--c-gold, #c9a227);
  --ec-ease: var(--ease, cubic-bezier(.25, .74, .22, .99));
  position: fixed; right: 24px; bottom: calc(24px + var(--echat-lift, 0px)); z-index: 91;
  display: flex; align-items: center; gap: 12px; flex-direction: row-reverse;
  pointer-events: none;
}
.echat-launch__btn {
  position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ec-bright);
  background: radial-gradient(120% 120% at 30% 20%, #2b2723 0%, var(--ec-ink) 60%);
  box-shadow: 0 14px 34px -10px rgba(23, 21, 19, .6), inset 0 0 0 1px rgba(201, 162, 39, .55);
  pointer-events: auto;
  opacity: 0; transform: scale(.4) translateY(20px);
  transition: opacity .35s var(--ec-ease), transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.echat-launch.is-on .echat-launch__btn { opacity: 1; transform: none; }
.echat-launch.is-away:not(.is-open) .echat-launch__btn { opacity: 0; transform: scale(.6); pointer-events: none; }
.echat-launch__btn:hover { transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 40px -10px rgba(23, 21, 19, .65), inset 0 0 0 1px rgba(201, 162, 39, .9); }
.echat-launch__btn:focus-visible { outline: 2px solid var(--ec-bright); outline-offset: 4px; }

.echat-launch__icon { position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity .25s, transform .4s var(--ec-ease); }
.echat-launch__icon--chat svg { width: 30px; height: 30px; animation: ecWiggle 7s 3s infinite var(--ec-ease); }
.echat-launch__dot { fill: var(--ec-ink); animation: ecDotPulse 1.4s infinite ease-in-out; }
.echat-launch__dot:nth-of-type(2) { animation-delay: .18s; }
.echat-launch__dot:nth-of-type(3) { animation-delay: .36s; }
.echat-launch__icon--close { color: #fff; opacity: 0; transform: rotate(-90deg) scale(.6); }
.echat-launch.is-open .echat-launch__icon--chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.echat-launch.is-open .echat-launch__icon--close { opacity: 1; transform: none; }

/* a soft gold ring that breathes out from the button */
.echat-launch__ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(201, 162, 39, .55); animation: ecRing 2.8s 1.8s infinite var(--ec-ease); }
.echat-launch.is-open .echat-launch__ring, .echat-launch.is-seen .echat-launch__ring { animation-duration: 5.6s; }
.echat-launch.is-open .echat-launch__ring { animation: none; }

.echat-launch__badge {
  position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 11px;
  font: 600 1.2rem/1 var(--font-ui); color: var(--ec-ink); background: var(--ec-bright);
  box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) .9s;
}
.echat-launch.is-on .echat-launch__badge { transform: scale(1); }
.echat-launch.is-seen .echat-launch__badge, .echat-launch.is-open .echat-launch__badge { transform: scale(0); transition-delay: 0s; }

/* the one-line teaser */
.echat-launch__teaser {
  position: relative; display: flex; align-items: flex-start; max-width: 270px;
  background: #fff; border-radius: 18px 18px 6px 18px; pointer-events: none;
  box-shadow: 0 18px 40px -14px rgba(23, 21, 19, .45), 0 0 0 1px rgba(23, 21, 19, .06);
  opacity: 0; transform: translateX(14px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .3s var(--ec-ease), transform .45s var(--ec-ease);
}
.echat-launch.has-teaser .echat-launch__teaser { opacity: 1; transform: none; pointer-events: auto; }
.echat-launch__teaser-body {
  display: flex; align-items: center; gap: 11px; padding: 13px 36px 13px 13px; text-align: left;
  font: 400 1.4rem/1.4 var(--font-ui); color: var(--c-cool-gray-blue, #56524c);
  background: none; border: 0; cursor: pointer; border-radius: inherit;
}
.echat-launch__teaser-body strong { display: block; font-weight: 600; color: var(--ec-ink); }
.echat-launch__teaser-x {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; border: 0; background: none; color: var(--c-cool-gray-blue, #56524c); cursor: pointer;
}
.echat-launch__teaser-x svg { width: 14px; }
.echat-launch__teaser-x:hover { background: var(--c-warm-light-beige, #f6f3ee); }

@keyframes ecRing {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, .55); }
  70%  { box-shadow: 0 0 0 18px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 18px rgba(201, 162, 39, 0); }
}
@keyframes ecWiggle {
  0%, 86%, 100% { transform: none; }
  89% { transform: rotate(-12deg) scale(1.08); }
  92% { transform: rotate(10deg) scale(1.08); }
  95% { transform: rotate(-5deg); }
}
@keyframes ecDotPulse { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .35; } }

/* the desktop panel sits above the launcher, which becomes its close button */
@media (min-width: 768px) {
  .echat__panel { bottom: 104px; height: min(680px, calc(100svh - 128px)); }
}
@media (max-width: 767px) {
  .echat-launch { right: 16px; bottom: calc(16px + var(--echat-lift, 0px)); }
  .echat-launch__btn { width: 58px; height: 58px; }
  .echat-launch__teaser { max-width: calc(100vw - 110px); }
  /* the sheet is full screen and carries its own close button */
  .echat-open .echat-launch { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .echat-launch__ring, .echat-launch__icon--chat svg, .echat-launch__dot { animation: none !important; }
  .echat-launch__btn, .echat-launch__teaser, .echat-launch__badge { transition: none; }
}

.echat-launch:not(.has-teaser) .echat-launch__teaser { position: absolute; right: 76px; }
.echat-launch { transition: bottom .45s var(--ec-ease); }
@media (prefers-reduced-motion: reduce) { .echat-launch { transition: none; } }

/* ---- the launcher as an extended button: chat icon + "Free estimate" -----
   One control, not a circle and a separate pill. It folds back to a circle
   when the panel is open (it is the close button then) and on phones once the
   action bar is up, which already carries the same words. */
.echat-launch__btn {
  width: auto; min-width: 64px; padding: 0 24px 0 18px;
  display: inline-flex; align-items: center; gap: 0; border-radius: 32px;
  transition: opacity .35s var(--ec-ease), transform .6s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .3s, padding .45s var(--ec-ease);
}
.echat-launch__btn .echat-launch__icon--chat { position: relative; inset: auto; width: 30px; height: 30px; flex: none; }
.echat-launch__text {
  display: inline-block; overflow: hidden; white-space: nowrap; max-width: 12em; margin-left: 11px;
  font: 500 1.55rem/1 var(--font-ui); letter-spacing: .02em; color: #fff;
  transition: max-width .45s var(--ec-ease), margin .45s var(--ec-ease), opacity .3s;
}
.echat-launch__ring { border-radius: inherit; }
.echat-launch.is-open .echat-launch__btn { padding: 0 17px; }
.echat-launch.is-open .echat-launch__text { max-width: 0; margin-left: 0; opacity: 0; }
@media (max-width: 767px) {
  .echat-launch__btn { min-width: 58px; padding: 0 20px 0 15px; border-radius: 29px; }
  .echat-launch__text { font-size: 1.45rem; }
  .echat-launch.is-lifted .echat-launch__btn { padding: 0 14px; }
  .echat-launch.is-lifted .echat-launch__text { max-width: 0; margin-left: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .echat-launch__text { transition: none; } }
/* phones centre the hero's scroll cue, which is where the launcher's label
   now reaches; park the cue on the left gutter instead */
@media (max-width: 767px) { .has-echat .hero__cue { left: var(--layout-padding); transform: none; } }

/* The ring, composited: a border that scales out and fades, instead of an
   animated box-shadow (which repaints every frame and showed in the frame
   budget). */
.echat-launch__ring { box-shadow: none; border: 2px solid rgba(201, 162, 39, .7); animation-name: ecRingT; }
@keyframes ecRingT {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.22, 1.45); opacity: 0; }
  100% { transform: scale(1.22, 1.45); opacity: 0; }
}
.echat-launch.is-lifted .echat-launch__ring { animation-name: ecRingC; }
@keyframes ecRingC { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
/* the teaser's dismiss button meets the 44px tap floor */
.echat-launch__teaser-x { width: 46px; height: 46px; top: -3px; right: -3px; }
/* Animating the dots inside the SVG repainted the icon every frame — static
   dots; the button's motion comes from the composited ring and wiggle. */
.echat-launch__dot { animation: none; }
/* its own compositor layer, so page scroll never repaints the button */
.echat-launch__btn, .echat-launch__ring { will-change: transform; }

/* photo step: a tap / drop area, previews with a remove button */
.echat__photos { display: grid; gap: 10px; }
.echat__drop {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1.5px dashed var(--ec-line); border-radius: 16px; background: var(--ec-card);
  color: var(--ec-ink); cursor: pointer; transition: border-color .2s, background .2s;
  animation: ecIn .4s var(--ec-ease) both;
}
.echat__drop:hover, .echat.is-dragging .echat__drop { border-color: var(--ec-accent); }
.echat.is-dragging .echat__drop { background: color-mix(in srgb, var(--ec-accent) 8%, var(--ec-card)); }
.echat__drop:focus-within { outline: 2px solid var(--ec-accent); outline-offset: 2px; }
.echat__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.echat__drop-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; color: var(--ec-accent); background: color-mix(in srgb, var(--ec-accent) 10%, transparent); }
.echat__drop-text { display: grid; gap: 2px; font-size: 1.5rem; line-height: 1.3; }
.echat__drop-text small { font-size: 1.3rem; color: var(--ec-text); }
.echat__photos.has-photos .echat__drop { padding: 10px 14px; }
.echat__photos.has-photos .echat__drop-ico { width: 36px; height: 36px; }
.echat__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.echat__thumbs:empty { display: none; }
.echat__thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--ec-card); border: 1px solid var(--ec-line); animation: ecIn .3s var(--ec-ease) both; }
.echat__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.echat__thumb.is-loading img { opacity: .45; }
.echat__thumb.is-loading::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--ec-accent); border-right-color: transparent; animation: ecSpin .8s linear infinite; }
.echat__thumb.is-loading .echat__thumb-x { display: none; }
@keyframes ecSpin { to { transform: rotate(360deg); } }
.echat__thumb-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(23 21 19 / .72); color: #fff; cursor: pointer; }
.echat__thumb-x svg { width: 12px; }
.echat__ph-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ec-text); }
.echat__photos .echat__error { padding: 0; }
/* the answer bubble: the first photos, then "3 photos" */
.echat__ph-row { display: flex; gap: 4px; margin-bottom: 6px; }
.echat__ph-row img, .echat__ph-row .echat__ph-blank { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .echat__thumb.is-loading::after { animation: none; } }

/* "protected by reCAPTCHA" line (the floating badge is hidden) */
.recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
p.recaptcha-note { margin-top: 8px; opacity: .8; }