/* =====================================================================
   CHAT WIDGET — "ask the host"
   Same hairline-editorial language as the rest of the site: rules not
   boxes, mono for labels, jade and marigold as the only accents.
   Self-contained: the site's tokens are used where they exist, with
   literal fallbacks so this works on the homepage and the landing
   pages alike.
   ===================================================================== */

#hgChat, #hgChatBtn { --c-night:#0E1726; --c-bone:#F4F6F2; --c-paper:#FBFCFA;
  --c-line:#D8DDD5; --c-ink:#141A24; --c-ink2:#3A4250; --c-muted:#5C6470;
  --c-jade:#0E9E92; --c-jade-ink:#0A6E66; --c-marigold:#F4A813;
  --c-nightink:#EDE7DA;
  --ff-d:"Cabinet Grotesk","Switzer",system-ui,sans-serif;
  --ff-r:"Switzer",system-ui,sans-serif;
  --ff-m:"DM Mono",ui-monospace,monospace;
  --ez:cubic-bezier(.16,1,.3,1);
}

/* ---------- the floating pair ----------------------------------------
   Two separate pills of different widths read as an accident. These share
   one width, one height, one radius and one right edge so they read as a
   deliberate stack: the dark one asks, the green one is the human.
   `body` prefixes beat the site's own .wa-float rules without !important.
   -------------------------------------------------------------------- */
:root{ --hg-fab-w:196px; --hg-fab-h:44px; --hg-fab-gap:10px; }

#hgChatBtn,
body .wa-float{
  box-sizing:border-box;
  width:var(--hg-fab-w); min-height:var(--hg-fab-h);
  padding:0 1.1em;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-r); font-weight:600; font-size:.9rem; line-height:1.2;
  border-radius:999px;
  box-shadow:0 14px 30px -12px rgba(8,12,22,.5);
}

body .wa-float{ right:16px; bottom:16px; left:auto }

#hgChatBtn{
  position:fixed; right:16px; z-index:150; border:0; cursor:pointer;
  bottom:calc(16px + var(--hg-fab-h) + var(--hg-fab-gap));
  background:var(--c-night); color:var(--c-nightink);
  transition:transform .3s var(--ez), background .3s, box-shadow .3s;
  /* arrives just after the page settles, so it is noticed without shouting */
  animation:hgRise .5s var(--ez) .9s backwards;
}
#hgChatBtn:hover{ transform:translateY(-2px); background:#16213A;
  box-shadow:0 18px 34px -12px rgba(8,12,22,.6) }
#hgChatBtn:active{ transform:translateY(0) }
#hgChatBtn[hidden]{ display:none }

@keyframes hgRise{ from{ opacity:0; transform:translateY(10px) } }

#hgChatBtn .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--c-marigold);
  box-shadow:0 0 0 0 rgba(244,168,19,.55); animation:hgPulse 2.6s infinite }
@keyframes hgPulse{ 70%{ box-shadow:0 0 0 7px rgba(244,168,19,0) } 100%{ box-shadow:0 0 0 0 rgba(244,168,19,0) } }

/* ---------- panel ---------- */
#hgChat{
  position:fixed; right:16px; bottom:16px; z-index:600;
  width:min(392px, calc(100vw - 32px)); height:min(620px, calc(100svh - 32px));
  display:none; flex-direction:column; overflow:hidden;
  background:var(--c-paper); color:var(--c-ink); font-family:var(--ff-r);
  border:1px solid var(--c-line); border-radius:10px;
  box-shadow:0 30px 70px -20px rgba(8,12,22,.55);
}
#hgChat[open]{ display:flex; animation:hgIn .34s var(--ez) }
@keyframes hgIn{ from{ opacity:0; transform:translateY(14px) } }

#hgChat header{
  background:var(--c-night); color:var(--c-nightink);
  padding:13px 14px 13px 16px; display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
#hgChat header img{ width:30px; height:30px; border-radius:7px; flex:0 0 auto }
#hgChat header .t{ font-family:var(--ff-d); font-weight:800; font-size:.98rem; line-height:1.15 }
#hgChat header .s{ font-family:var(--ff-m); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-marigold); margin-top:2px }
#hgChat header button{
  margin-left:auto; width:32px; height:32px; flex:0 0 auto; cursor:pointer;
  border:1px solid rgba(237,231,218,.28); border-radius:50%;
  background:none; color:var(--c-nightink); font-size:1rem; line-height:1;
}
#hgChat header button:hover{ background:rgba(237,231,218,.12) }

/* ---------- log ---------- */
#hgLog{ flex:1 1 auto; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:14px;
  background:var(--c-bone); scroll-behavior:smooth; overscroll-behavior:contain }
.hg-m{ max-width:88%; font-size:.95rem; line-height:1.6; white-space:pre-wrap; word-wrap:break-word }
.hg-m.bot{ align-self:flex-start; color:var(--c-ink2) }
.hg-m.bot b{ color:var(--c-ink) }
.hg-m.me{ align-self:flex-end; background:var(--c-night); color:#fff;
  padding:.6em .9em; border-radius:14px 14px 3px 14px }
/* A system note is not a message and should not look like one. Mono and
   letter-spaced, it read as debug output; this is a quiet aside with a rule
   down the side, in the reading font. */
.hg-m.sys{ align-self:stretch; max-width:100%; font-size:.86rem; line-height:1.5;
  color:var(--c-muted); padding:.1rem 0 .1rem .8rem;
  border-left:2px solid var(--c-line-2,#C4CABF) }
.hg-m.sys a{ color:var(--c-jade-ink) }

/* the host's name, shown once above the first reply */
.hg-who{ font-family:var(--ff-m); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-muted); align-self:flex-start; margin-bottom:-8px }

/* typing indicator */
.hg-dots{ align-self:flex-start; display:inline-flex; gap:4px; padding:4px 0 }
.hg-dots i{ width:6px; height:6px; border-radius:50%; background:var(--c-line-2,#C4CABF);
  animation:hgBlink 1.3s infinite }
.hg-dots i:nth-child(2){ animation-delay:.18s } .hg-dots i:nth-child(3){ animation-delay:.36s }
@keyframes hgBlink{ 0%,60%,100%{ opacity:.28 } 30%{ opacity:1 } }

/* quick starter chips */
#hgChips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; background:var(--c-bone); flex:0 0 auto }
#hgChips button{ font-family:var(--ff-r); font-size:.82rem; cursor:pointer;
  padding:.45em .8em; border-radius:999px; border:1px solid var(--c-line);
  background:var(--c-paper); color:var(--c-ink2); transition:border-color .2s, color .2s }
#hgChips button:hover{ border-color:var(--c-jade); color:var(--c-jade-ink) }
#hgChips[hidden]{ display:none }

/* the WhatsApp escape hatch, shown after a lead or an error */
#hgWa{ padding:0 16px 12px; background:var(--c-bone); flex:0 0 auto }
#hgWa[hidden]{ display:none }
#hgWa a{ display:flex; align-items:center; justify-content:center; gap:.5em;
  background:#1fae54; color:#fff; font-weight:600; font-size:.9rem;
  padding:.72em 1em; border-radius:999px; text-decoration:none }
#hgWa a:hover{ background:#178a43 }
#hgWa svg{ width:18px; height:18px; fill:currentColor }

/* ---------- composer ---------- */
#hgForm{ display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--c-line);
  background:var(--c-paper); flex:0 0 auto }
#hgIn{ flex:1 1 auto; resize:none; font-family:var(--ff-r); font-size:.95rem; line-height:1.45;
  padding:.62em .8em; max-height:104px; color:var(--c-ink);
  border:1px solid var(--c-line); border-radius:9px; background:var(--c-bone) }
#hgIn:focus{ outline:2px solid var(--c-jade); outline-offset:1px; border-color:transparent }
#hgSend{ flex:0 0 auto; width:40px; height:40px; align-self:flex-end; cursor:pointer;
  border:0; border-radius:50%; background:var(--c-jade); color:#fff; font-size:1.05rem }
#hgSend:hover:not(:disabled){ background:var(--c-jade-ink) }
#hgSend:disabled{ opacity:.4; cursor:default }
/* the composer is now the last row, so it carries the bottom padding that
   the removed fine-print line used to provide */
#hgForm{ padding-bottom:13px }

/* ---------- phones ----------------------------------------------------
   The pair stays a pair: both stretch to the same gutters instead of one
   going full width while the other stays a small pill on the right.
   -------------------------------------------------------------------- */
@media (max-width:880px){
  /* Side by side rather than stacked: two full-width bars ate roughly a
     hundred pixels of a phone screen, and the page is what people came for. */
  #hgChatBtn, body .wa-float{ width:auto; bottom:14px; padding:0 .8em; gap:.45em }
  #hgChatBtn{ left:14px; right:calc(50% + 5px) }
  body .wa-float{ left:calc(50% + 5px); right:14px }
}
@media (max-width:359px){
  /* Very narrow phones: two labels no longer fit, so stack again. */
  #hgChatBtn, body .wa-float{ left:14px; right:14px }
  #hgChatBtn{ bottom:calc(14px + var(--hg-fab-h) + 8px) }
}
@media (max-width:560px){
  /* left+right rather than width:100vw. 100vw counts the scrollbar while
     right:0 anchors to the content box without it, so the panel ended up
     wider than the screen and shifted left, clipping the close button and
     the right edge of every message. */
  #hgChat{ left:0; right:0; top:0; bottom:0; width:auto; height:auto;
    border-radius:0; border:0 }
  /* keep the composer clear of the iOS home indicator */
  #hgForm{ padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px)) }
}
@media (prefers-reduced-motion:reduce){
  #hgChat[open]{ animation:none }
  #hgChatBtn .dot, .hg-dots i{ animation:none }
  #hgChatBtn:hover{ transform:none }
  #hgLog{ scroll-behavior:auto }
}