/* Demo chat agent widget. Sits above the sticky mobile CTA and below the
   consent banner so nothing ever covers a decision the visitor must make.

   Finish: bronze and silver plating. The metal lives in the frames, rims and
   the header nameplate; every surface that carries text stays dark graphite,
   so the plating is decoration and never costs legibility. The worst contrast
   pair in here is 4.55:1 (header subtitle on the lightest bronze band).

   How the plating is built, in case it needs extending:
     rim     two backgrounds, the face on padding-box and the metal on
             border-box, behind a transparent border. Keeps border-radius,
             which border-image would not.
     bevel   inset box-shadow, light on the top edge and dark on the bottom
             for a raised plate, reversed for a machined recess.
     brush   a 3px repeating-linear-gradient at very low alpha.
     gloss   an off-centre specular band, not a smooth fade. Real metal has
             hard highlights. */

.cw-root {
  position: fixed; inset: auto 0 0 auto; z-index: 78;

  /* bronze, dark to polished */
  --cw-bz-1: #2a1a0e;
  --cw-bz-2: #3a2512;
  --cw-bz-3: #5c3b1c;
  --cw-bz-4: #8a5c2e;
  --cw-bz-5: #a9752f;
  --cw-bz-6: #c89551;
  --cw-bz-7: #e0b579;
  --cw-bz-8: #f6e0b8;

  /* silver, dark to polished */
  --cw-ag-1: #171c25;
  --cw-ag-2: #2a3140;
  --cw-ag-3: #5c6675;
  --cw-ag-4: #96a0ae;
  --cw-ag-5: #c9d2de;
  --cw-ag-6: #f2f5f9;

  /* faces and ink */
  --cw-face: #141821;
  --cw-face-deep: #0d1117;
  --cw-ink: #f7e9d2;      /* warm white, for metal-adjacent text */
  --cw-ink-cool: #dfe5ee; /* cool white, for the log */
  --cw-ink-dark: #1d0f04; /* engraved ink on bright bronze */
  --cw-patina: #35c89a;

  /* the two metals, as reusable plate gradients */
  --cw-plate-bronze: linear-gradient(145deg,
    var(--cw-bz-8) 0%, var(--cw-bz-6) 13%, var(--cw-bz-4) 30%, var(--cw-bz-5) 45%,
    var(--cw-bz-8) 51%, var(--cw-bz-5) 58%, var(--cw-bz-3) 78%, var(--cw-bz-6) 93%, var(--cw-bz-7) 100%);
  /* Silver, held back on purpose. Bubbles and chips repeat many times over a
     conversation, so at full polish a wall of rims out-shouts the bronze
     header. These bands keep it legible as plating without leading the eye.
     The full-polish silver lives inside --cw-plate-duo, used once each on the
     panel, the launcher and the form card, which is where it should lead. */
  --cw-plate-silver: linear-gradient(145deg,
    #7f8a99 0%, #59636f 16%, #39414d 36%, #5e6875 48%,
    #aeb8c6 52%, #576170 62%, #333a45 80%, #68727f 95%, #96a0ae 100%);
  /* the signature: bronze and silver in one run of plating */
  --cw-plate-duo: linear-gradient(150deg,
    var(--cw-bz-8) 0%, var(--cw-bz-5) 15%, var(--cw-bz-3) 27%, var(--cw-ag-4) 41%,
    var(--cw-ag-6) 49%, var(--cw-ag-3) 57%, var(--cw-bz-3) 71%, var(--cw-bz-6) 88%, var(--cw-bz-8) 100%);

  --cw-brush: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.06) 1px 3px);
}

/* -------------------------------------------------------------- panel */
.cw-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  box-sizing: border-box;
  width: min(23rem, calc(100vw - 2rem));
  /* vh first as the fallback, then dvh for anything that understands it.
     On a phone 100vh is the viewport with the toolbars hidden, so a panel
     sized in vh is taller than the room it actually has while they are up,
     and it resizes when they slide away. dvh tracks what is really visible. */
  height: min(32rem, calc(100vh - 2rem));
  height: min(32rem, calc(100dvh - 2rem));
  /* a hard ceiling, so no combination of the above can overflow the screen */
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
  display: flex;
  flex-direction: column;
  /* face on the inside, plating in the border */
  background:
    linear-gradient(170deg, #161b26, var(--cw-face-deep) 58%, #11151e) padding-box,
    var(--cw-plate-duo) border-box;
  border: 2px solid transparent;
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(246, 224, 184, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 28px 60px -18px rgba(0, 0, 0, 0.85),
    0 0 30px -14px rgba(201, 149, 81, 0.35);
}
/* Every phone-width screen gets the edge-to-edge panel, not just the ones
   reporting 480px or less. bottom clears the sticky CTA bar, and the height
   is whatever is left over, so the panel is pinned inside the visible area
   by arithmetic rather than by hoping 34rem happens to fit. */
@media (max-width: 768px) {
  .cw-panel {
    /* Right-anchored with a ceiling rather than stretched between both
       edges. At 0.5rem each side the panel was 374px of a 390px screen, 96%
       of the width, which reads as neither a card nor a full-screen view.
       22rem caps it so it stays a panel; on a phone narrower than that the
       calc takes over and it keeps its 0.5rem gutters. */
    left: auto;
    right: 0.5rem;
    width: calc(100vw - 1rem);
    max-width: 22rem;
    /* --cw-kb is however much of the viewport the soft keyboard is covering,
       measured in the script. Lifting by it keeps the text box and the send
       button on screen while they are being used, and the matching
       subtraction stops the panel growing taller than what is left. */
    bottom: calc(0.5rem + var(--cw-kb, 0px) + env(safe-area-inset-bottom, 0px));
    height: min(34rem, calc(100vh - 1rem - var(--cw-kb, 0px)));
    height: min(34rem, calc(100dvh - 1rem - var(--cw-kb, 0px)));
    max-height: calc(100vh - 1rem - var(--cw-kb, 0px));
    max-height: calc(100dvh - 1rem - var(--cw-kb, 0px));
  }
  /* the launcher goes up with it, rather than hiding behind the keyboard */
  .cw-launcher {
    bottom: calc(1rem + var(--cw-kb, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

/* the header is a brushed bronze nameplate, seamed to the body in silver */
.cw-head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.95rem 1rem;
  background:
    linear-gradient(104deg, transparent 30%, rgba(255, 246, 228, 0.16) 47%,
      rgba(255, 255, 255, 0.26) 50%, rgba(255, 246, 228, 0.16) 53%, transparent 70%),
    var(--cw-brush),
    linear-gradient(180deg, var(--cw-bz-4) 0%, var(--cw-bz-3) 44%,
      var(--cw-bz-2) 52%, var(--cw-bz-3) 100%);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(246, 224, 184, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(242, 245, 249, 0.5),   /* the silver seam */
    0 2px 3px rgba(0, 0, 0, 0.6);
}
.cw-title {
  margin: 0; font-size: 0.95rem; font-weight: 800; color: #fdf4e6;
  letter-spacing: 0.012em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
.cw-sub {
  margin: 0.2rem 0 0; font-size: 0.74rem; color: #e3cfae;
  display: flex; align-items: center; gap: 0.35rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.cw-dot {
  width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--cw-patina); flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 6px rgba(53, 200, 154, 0.9);
}
.cw-close {
  background: transparent; border: 0; color: #e3cfae;
  font-size: 1.45rem; line-height: 1; cursor: pointer; padding: 0; border-radius: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; min-height: 1.75rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.cw-close:hover { color: #fff8ec; background: rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------- log */
.cw-log {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--cw-bz-4) transparent;
}
.cw-log::-webkit-scrollbar { width: 9px; }
.cw-log::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
.cw-log::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cw-bz-6), var(--cw-bz-4) 50%, var(--cw-bz-3));
  border: 2px solid transparent; background-clip: padding-box;
}
.cw-msg { display: flex; }
.cw-msg--user { justify-content: flex-end; }
.cw-bubble {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
/* the agent speaks from a silver-rimmed plate */
.cw-msg--agent .cw-bubble {
  background:
    linear-gradient(165deg, #171d28, var(--cw-face-deep)) padding-box,
    var(--cw-plate-silver) border-box;
  border: 1px solid transparent;
  color: var(--cw-ink-cool);
  border-bottom-left-radius: 0.3rem;
  box-shadow: inset 0 1px 0 rgba(242, 245, 249, 0.07), 0 2px 8px -3px rgba(0, 0, 0, 0.7);
}
/* the visitor speaks from a bronze-rimmed plate */
.cw-msg--user .cw-bubble {
  background:
    linear-gradient(165deg, var(--cw-bz-1), #150f08) padding-box,
    var(--cw-plate-bronze) border-box;
  border: 1px solid transparent;
  color: #fbeeda;
  border-bottom-right-radius: 0.3rem;
  box-shadow: inset 0 1px 0 rgba(246, 224, 184, 0.18), 0 2px 8px -3px rgba(0, 0, 0, 0.7);
}
.cw-msg--error .cw-bubble {
  background:
    linear-gradient(165deg, #231317, #140b0d) padding-box,
    linear-gradient(145deg, #f2a5a0, #7f2c28 50%, #f2a5a0) border-box;
  color: #f2a5a0;
}
.cw-bubble a { color: var(--cw-bz-7); text-decoration: underline; text-underline-offset: 2px; }
.cw-bubble a:hover { color: var(--cw-bz-8); }
.cw-bubble strong { color: #fdf4e6; }

/* suggestion chips: little silver-plated tags */
.cw-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cw-chip {
  background:
    linear-gradient(180deg, var(--cw-ag-2), #10141c) padding-box,
    var(--cw-plate-silver) border-box;
  border: 1px solid transparent;
  color: var(--cw-ag-5);
  font: inherit; font-size: 0.78rem;
  padding: 0.38rem 0.7rem; border-radius: 999px; cursor: pointer; text-align: left;
  box-shadow: inset 0 1px 0 rgba(242, 245, 249, 0.14);
  transition: color .18s ease, box-shadow .18s ease;
}
.cw-chip:hover {
  background:
    linear-gradient(180deg, #2b2114, #15100a) padding-box,
    var(--cw-plate-bronze) border-box;
  color: #fff8ec;
  box-shadow: inset 0 1px 0 rgba(246, 224, 184, 0.3), 0 0 12px -4px rgba(201, 149, 81, 0.8);
}
.cw-chip:focus-visible { outline: 2px solid var(--cw-bz-7); outline-offset: 2px; }

/* ------------------------------------------------- opening-screen quote
   Heads the empty panel before the visitor says anything, with the opener
   pushed to the foot of the space below it by the rule that follows, so the
   eye lands on the quote and finishes on the question that starts the chat.
   The script removes it on their first message. Set in a serif italic so it
   reads as a quotation rather than another thing the agent said. */
.cw-quote {
  margin: 0.15rem 0 0.25rem;
  padding: 0.35rem 0.9rem 0;
  text-align: center;
  animation: cwquotein .55s ease both;
}
/* Only while the quote is up: drop the opener to the bottom of the panel,
   next to the box the visitor types in. Once they reply the quote goes and
   the log returns to filling from the top. */
.cw-log:has(.cw-quote) > .cw-msg:first-of-type { margin-top: auto; }
.cw-quote-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.7rem;
  line-height: 0.55;
  color: var(--cw-bz-5);
  opacity: .6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.cw-quote-text {
  margin: 0.5rem 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.12rem;   /* 17.9px: the old 0.87rem was 13.9px, asked up by 4 */
  line-height: 1.7;
  letter-spacing: 0.008em;
  color: #d8cdb8;
  text-wrap: balance;
}
/* a short engraved rule, bright in the middle and fading at both ends */
.cw-quote-rule {
  display: block;
  width: 3.6rem; height: 1px;
  margin: 0.85rem auto 0;
  background: linear-gradient(90deg, transparent, var(--cw-bz-6), transparent);
}
/* The closing line is the part meant to be noticed, so it comes back to the UI
   sans and brightens. It arrives a beat after the quote has landed, then a
   specular band sweeps across the letters on a loop, the same trick the
   launcher uses on hover. background-clip:text paints the sweep, so the
   fallback below keeps the text visible where that is unsupported. */
.cw-quote-ask {
  display: block;
  margin: 0.8rem 0 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.012em;
  color: var(--cw-bz-7);
  animation: cwaskin .5s .5s ease both;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cw-quote-ask {
    background: linear-gradient(100deg,
      var(--cw-bz-6) 0%, var(--cw-bz-6) 38%, #fff6e4 50%, var(--cw-bz-6) 62%, var(--cw-bz-6) 100%);
    background-size: 280% 100%;
    background-position: 110% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cwaskin .5s .5s ease both, cwasksheen 3.4s 1.1s linear infinite;
  }
}
@keyframes cwquotein {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cwaskin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Measured, not guessed: the highlight is only on the letters between about
   20% and 80%, so the sweep runs 90% -> 10% and rests outside. Both ends look
   identical, which is what hides the jump back to the start. */
@keyframes cwasksheen {
  0%   { background-position: 90% 0; }
  40%  { background-position: 10% 0; }
  100% { background-position: 10% 0; }
}

/* typing indicator */
.cw-dots { display: inline-flex; gap: 0.22rem; padding: 0.15rem 0; }
.cw-dots i {
  width: 0.38rem; height: 0.38rem; border-radius: 50%;
  background: linear-gradient(180deg, var(--cw-bz-7), var(--cw-bz-4)); display: block;
  animation: cwblink 1.3s infinite ease-in-out;
}
.cw-dots i:nth-child(2) { animation-delay: .18s; }
.cw-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cwblink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* --------------------------------------------------------------- form */
.cw-form {
  display: flex; align-items: flex-end; gap: 0.5rem;
  padding: 0.7rem;
  border: 0;
  background: var(--cw-brush), linear-gradient(180deg, var(--cw-ag-1), #0b0f16);
  box-shadow: inset 0 1px 0 rgba(242, 245, 249, 0.16), inset 0 2px 5px -3px rgba(0, 0, 0, 0.9);
}
/* the input is machined into the plate, so its bevel runs the other way */
.cw-input {
  flex: 1; resize: none; max-height: 110px;
  background: linear-gradient(180deg, #06080c, #0e131b);
  border: 1px solid #000;
  border-radius: 0.65rem;
  color: var(--cw-ag-6); font: inherit; font-size: 0.88rem; line-height: 1.5;
  padding: 0.55rem 0.7rem;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(242, 245, 249, 0.14);
}
.cw-input:focus {
  outline: 2px solid var(--cw-bz-7); outline-offset: 0;
  border-color: var(--cw-bz-5);
}
.cw-input::placeholder { color: #8d97a6; }
/* send is a polished bronze key with engraved ink */
.cw-send {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, var(--cw-bz-8) 0%, var(--cw-bz-7) 28%, var(--cw-bz-6) 52%,
      var(--cw-bz-5) 72%, var(--cw-bz-6) 100%) padding-box,
    var(--cw-plate-bronze) border-box;
  color: var(--cw-ink-dark);
  border: 1px solid transparent; border-radius: 0.65rem; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 244, 0.75),
    inset 0 -2px 2px rgba(90, 56, 20, 0.5),
    0 2px 0 var(--cw-bz-2),
    0 4px 10px -4px rgba(0, 0, 0, 0.8);
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.cw-send:hover:not(:disabled) { filter: brightness(1.07); }
/* pressing it actually seats the key */
.cw-send:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(90, 56, 20, 0.7), 0 0 0 var(--cw-bz-2);
}
.cw-send:focus-visible { outline: 2px solid var(--cw-ag-6); outline-offset: 2px; }
.cw-send:disabled { opacity: .45; cursor: not-allowed; }

.cw-foot {
  margin: 0; padding: 0.45rem 0.8rem 0.65rem;
  font-size: 0.68rem; color: var(--cw-ag-4); text-align: center;
  background: linear-gradient(180deg, #0b0f16, #060810);
  box-shadow: inset 0 1px 0 rgba(242, 245, 249, 0.09);
}
.cw-foot a {
  color: var(--cw-bz-7); font-weight: 700; text-decoration: none;
}
.cw-foot a:hover { color: var(--cw-bz-8); text-decoration: underline; text-underline-offset: 2px; }
.cw-foot a:focus-visible { outline: 2px solid var(--cw-bz-7); outline-offset: 2px; border-radius: 0.2rem; }

/* ------------------------------------------- header actions + tool status */
.cw-head-actions { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
/* The restart glyph is a thin outline while the close is a solid text
   glyph, so at the same 15px box the refresh read as the smaller of the two.
   It is now 20px with a heavier stroke, and both buttons share a 1.75rem
   square so they sit level and clear the 24px minimum touch target. */
.cw-restart {
  background: transparent; border: 0; color: #e3cfae;
  cursor: pointer; padding: 0.2rem; border-radius: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; min-height: 1.75rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
}
.cw-restart:hover { color: #fff8ec; background: rgba(255, 255, 255, 0.12); }
.cw-restart:focus-visible,
.cw-close:focus-visible { outline: 2px solid #fff8ec; outline-offset: 1px; }
.cw-status { color: #c2b49a; font-size: 0.82rem; margin-right: 0.4rem; }

/* The panel opens from a page button, so it is anchored bottom-right but
   never sits under the sticky mobile bar or the WhatsApp button. The offset
   itself now lives in the phone-width block above, together with the height
   that depends on it, so the two cannot drift apart. */

/* --------------------------------------------- inline contact form card */
.cw-form-card {
  background:
    linear-gradient(160deg, #1d2430, #11151e 70%) padding-box,
    var(--cw-plate-duo) border-box;
  border: 1px solid transparent;
  border-radius: 0.9rem;
  padding: 0.95rem 1rem 1rem;
  box-shadow: inset 0 1px 0 rgba(246, 224, 184, 0.18), 0 6px 18px -8px rgba(0, 0, 0, 0.8);
}
.cw-form-title { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 800; color: #fdf4e6; }
.cw-form-sub { margin: 0 0 0.75rem; font-size: 0.76rem; color: var(--cw-ag-5); line-height: 1.45; }
.cw-cf { display: flex; flex-direction: column; gap: 0.45rem; }
.cw-cf-in {
  width: 100%;
  background: linear-gradient(180deg, #05070b, #0d121a);
  border: 1px solid #000;
  border-radius: 0.5rem;
  color: var(--cw-ag-6);
  font: inherit;
  font-size: 0.84rem;
  padding: 0.5rem 0.6rem;
  resize: vertical;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(242, 245, 249, 0.12);
}
.cw-cf-in::placeholder { color: #8d97a6; }
.cw-cf-in:focus { outline: 2px solid var(--cw-bz-7); outline-offset: 0; border-color: var(--cw-bz-5); }
.cw-cf-send {
  margin-top: 0.15rem;
  background:
    linear-gradient(180deg, var(--cw-bz-8) 0%, var(--cw-bz-7) 30%, var(--cw-bz-6) 54%,
      var(--cw-bz-5) 74%, var(--cw-bz-6) 100%) padding-box,
    var(--cw-plate-bronze) border-box;
  color: var(--cw-ink-dark);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.012em;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 244, 0.75),
    inset 0 -2px 2px rgba(90, 56, 20, 0.5),
    0 2px 0 var(--cw-bz-2),
    0 4px 10px -4px rgba(0, 0, 0, 0.8);
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.cw-cf-send:hover:not(:disabled) { filter: brightness(1.07); }
.cw-cf-send:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(90, 56, 20, 0.7), 0 0 0 var(--cw-bz-2);
}
.cw-cf-send:focus-visible { outline: 2px solid var(--cw-ag-6); outline-offset: 2px; }
.cw-cf-send:disabled { opacity: .55; cursor: not-allowed; }
.cw-cf-note { margin: 0.35rem 0 0; font-size: 0.76rem; color: #f2a5a0; line-height: 1.45; }
.cw-cf-ok { margin: 0; font-size: 0.86rem; color: #5fd9b0; font-weight: 600; line-height: 1.5; }

/* ------------------------------------------------------ floating launcher
   Bottom right on every page. Stacks above the WhatsApp button (a human)
   and clears the sticky mobile CTA bar, so nothing covers anything.
   A dark face in a thick bronze-and-silver rim, so the label stays readable
   on metal rather than fighting it. */
.cw-launcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 78;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background:
    linear-gradient(165deg, #1b2130, var(--cw-face) 55%, #0b0f16) padding-box,
    var(--cw-plate-duo) border-box;
  color: var(--cw-ink);
  border: 2px solid transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(246, 224, 184, 0.3),
    inset 0 -2px 6px -2px rgba(0, 0, 0, 0.9),
    0 14px 32px -10px rgba(0, 0, 0, 0.85),
    0 0 22px -8px rgba(201, 149, 81, 0.55);
  /* transform is animation-driven now, so it must not also be transitioned:
     the two fight and the nudge comes out smaller than its keyframes say. */
  transition: box-shadow .2s ease;
}
.cw-launcher > * { position: relative; z-index: 1; }
.cw-launcher svg { color: var(--cw-bz-7); }
/* Hover brightens rather than lifts. The idle nudge below animates transform,
   and an animated transform always beats a static one from :hover, so a lift
   here would simply be ignored for most of the cycle. */
.cw-launcher:hover {
  box-shadow:
    inset 0 1px 0 rgba(246, 224, 184, 0.6),
    inset 0 -2px 6px -2px rgba(0, 0, 0, 0.9),
    0 18px 38px -10px rgba(0, 0, 0, 0.9),
    0 0 34px -4px rgba(201, 149, 81, 0.95);
}
.cw-launcher:focus-visible { outline: 3px solid var(--cw-bz-7); outline-offset: 3px; }
.cw-launcher[hidden] { display: none !important; }

/* a specular band that sweeps across the plating on hover */
.cw-launcher::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 36%, rgba(246, 224, 184, 0.16) 46%, rgba(255, 252, 244, 0.34) 50%,
    rgba(246, 224, 184, 0.16) 54%, transparent 64%);
  background-size: 260% 100%;
  background-position: 135% 0;
  transition: background-position .8s ease;
}
.cw-launcher:hover::before { background-position: -45% 0; }

/* A ring, every 3.4s, wider and brighter than before. */
.cw-launcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(224, 181, 121, 0.8);
  animation: cwpulse 3.4s ease-out infinite;
  pointer-events: none;
}
@keyframes cwpulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 181, 121, 0.75); }
  55%  { box-shadow: 0 0 0 1.35rem rgba(224, 181, 121, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 181, 121, 0); }
}

/* The ring alone is easy to miss on a phone held at arm's length, so the
   button also gives a double nudge once per cycle. Motion catches the eye
   where a glow does not, and it rests for most of the loop so it reads as a
   prompt rather than a flashing advert. */
.cw-launcher {
  animation: cwnudge 5s ease-in-out 1.5s infinite;
}
@keyframes cwnudge {
  0%, 70%, 100% { transform: translateY(0) scale(1); }
  76%           { transform: translateY(-7px) scale(1.05); }
  82%           { transform: translateY(0) scale(1); }
  88%           { transform: translateY(-4px) scale(1.03); }
  94%           { transform: translateY(0) scale(1); }
}

/* Touch screens have no hover, so the sheen has to run on its own there or it
   would never be seen at all. */
@media (hover: none) {
  .cw-launcher::before {
    animation: cwlaunchsheen 5s ease-in-out 1.5s infinite;
  }
  @keyframes cwlaunchsheen {
    0%, 60%, 100% { background-position: 135% 0; }
    85%           { background-position: -45% 0; }
  }
}

/* sit above the WhatsApp button when both are present */
body:has(.wa-float:not([hidden])) .cw-launcher { bottom: 5rem; }

@media (max-width: 768px) {
  /* The label stays on a phone now. It was hidden to save room next to the
     CTA bar; with the bar gone there is room, and a button that says what it
     does beats a bare icon. */
  .cw-launcher { right: 0.75rem; padding: 0.7rem 1rem; }
  body:has(.wa-float:not([hidden])) .cw-launcher {
    bottom: calc(5rem + var(--cw-kb, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw-launcher { transition: none; animation: none; transform: none; }
  .cw-launcher::after { animation: none; }
  .cw-launcher::before { transition: none; animation: none; }
  .cw-send, .cw-cf-send, .cw-chip { transition: none; }
  .cw-quote { animation: none; }
  /* no sweep and no arrival, but the question must still be readable, so the
     gradient fill is dropped rather than just frozen */
  .cw-quote-ask {
    animation: none;
    background: none;
    color: var(--cw-bz-7);
    -webkit-text-fill-color: var(--cw-bz-7);
  }
  .cw-send:active:not(:disabled),
  .cw-cf-send:active:not(:disabled) { transform: none; }
  .cw-dots i { animation: none; opacity: .6; }
}

/* The panel subtitle and the attribution are deliberate small print, but at
   11.8px and 10.9px they fell under the 12px legibility floor on a phone,
   where the panel is widest relative to the screen. Raised on mobile only,
   so the desktop panel keeps its proportions. */
@media (max-width: 768px) {
  .cw-sub, .cw-foot { font-size: 0.75rem; }
}