/* ---------------------------------------------------------------------------
   The chat in the corner.

   A launcher bottom right and a panel above it holding one view: the conversation.
   Answers are plain text on white with a small mark beside them, the visitor's own
   messages are soft grey bubbles on the right, and the box you type in is a single
   rounded composer with the send button inside it. Refusals and errors keep their
   own colour so they still read as what they are, rather than as the assistant
   having an opinion.

   Ported from the orphaned stylesheet on handlingplan.com, which was written for the
   same design language and left behind when that site's chat was cut back to a ticket
   form. Two things changed: the colours come from this theme's own tokens, and the two
   layers of that file (a bubble design and the later override that replaced it) are
   flattened into the one design that actually rendered.

   Everything is scoped under .tbc. It is the only fixed element on the site, so it
   yields: it hides behind the mobile menu, it never prints, and it is reachable and
   dismissable from the keyboard alone.
   ------------------------------------------------------------------------- */

.tbc{
  /* Taken from story.css, including the darker leaf that file sets later, because
     #3f8a6d does not carry text at this size. */
  --tbc-forest:#0d3d35;
  --tbc-leaf:#2c6b52;
  --tbc-soft:#eef5f1;
  --tbc-line:#e6ece9;
  --tbc-text:#17302a;
  --tbc-muted:#5c716a;
  position:fixed;right:20px;bottom:20px;z-index:9000;
  font-family:var(--tb-font,"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif);
  display:flex;flex-direction:column;align-items:flex-end;gap:12px
}
.tbc *{box-sizing:border-box}
.tbc__vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tbc :focus-visible{outline:2px solid var(--tbc-leaf);outline-offset:2px;border-radius:8px}

/* ---- the launcher ---------------------------------------------------------- */
.tbc__launch{
  appearance:none;border:0;cursor:pointer;position:relative;
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,#17604f,var(--tbc-forest));
  color:#fff;display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 26px -10px rgba(9,42,34,.6);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease
}
.tbc__launch:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 34px -12px rgba(9,42,34,.68)}
.tbc__ico{
  position:absolute;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease,transform .2s ease
}
.tbc__ico--chat{fill:currentColor;stroke:none}
.tbc__ico--x{opacity:0;transform:rotate(-45deg) scale(.7)}
.tbc.is-open .tbc__ico--chat{opacity:0;transform:rotate(45deg) scale(.7)}
.tbc.is-open .tbc__ico--x{opacity:1;transform:none}

/* One quiet pulse, three times, for a first-time visitor only. */
.tbc__launch::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.tbc.is-new .tbc__launch::after{animation:tbcPulse 2.6s ease-out 3}
@keyframes tbcPulse{
  0%{box-shadow:0 0 0 0 rgba(44,107,82,.45)}
  70%{box-shadow:0 0 0 16px rgba(44,107,82,0)}
  100%{box-shadow:0 0 0 0 rgba(44,107,82,0)}
}

/* ---- the panel ------------------------------------------------------------- */
/* The hidden attribute only closes an element because the browser's own stylesheet
   says display:none, and ANY author rule setting display beats it. .tbc__panel sets
   display:flex, so without this the panel would be open on every page load: the
   attribute says closed, the computed style says flex. It has to come after the
   display rule and be at least as specific. */
.tbc__panel[hidden],
.tbc [hidden]{display:none!important}

.tbc__panel{
  width:min(420px,calc(100vw - 32px));
  /* dvh, not vh: on iOS the toolbar makes vh taller than the visible page, which
     pushes the composer off the bottom of the screen. */
  height:min(640px,calc(100dvh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--tbc-line);border-radius:22px;
  box-shadow:0 40px 90px -40px rgba(7,36,28,.45),0 2px 8px -4px rgba(7,36,28,.12);
  transform-origin:100% 100%;animation:tbcIn .24s cubic-bezier(.2,.8,.3,1)
}
@keyframes tbcIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.tbc__head{display:flex;align-items:center;gap:11px;padding:12px 10px 12px 16px;flex:0 0 auto;background:#fff}
.tbc__av{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--tbc-forest);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.01em
}
.tbc__who{min-width:0;flex:1 1 auto}
.tbc__who b{display:block;font-size:15px;font-weight:650;line-height:1.2;color:var(--tbc-text)}
.tbc__who small{display:block;margin-top:1px;font-size:11.5px;line-height:1.35;color:#7a8c85}
.tbc__icobtn{
  appearance:none;border:0;background:none;color:var(--tbc-muted);cursor:pointer;flex:0 0 auto;
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center
}
.tbc__icobtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tbc__icobtn:hover{background:var(--tbc-soft);color:var(--tbc-forest)}

.tbc__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* ---- the conversation ------------------------------------------------------ */
.tbc__log{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 18px 12px;display:flex;flex-direction:column;gap:18px;background:#fff;scrollbar-width:thin
}
.tbc__empty{margin:auto;display:grid;justify-items:center;gap:14px;text-align:center;padding:24px 12px}
.tbc__emptyMark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--tbc-forest);color:#fff;font-weight:700;font-size:18px}
.tbc__empty b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--tbc-text)}
.tbc__empty p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tbc-muted);max-width:30ch}

.tbc__msg{
  max-width:100%;font-size:14.5px;line-height:1.62;
  white-space:pre-wrap;overflow-wrap:anywhere;animation:tbcMsg .22s ease both
}
@keyframes tbcMsg{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* The mark beside an answer is the brand initial, set on the bubble rather than in
   the markup so a streamed message needs no extra element. */
.tbc__msg--bot{align-self:stretch;position:relative;padding-left:34px;color:var(--tbc-text)}
.tbc__msg--bot::before{
  content:"T";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--tbc-forest);color:#fff;font-size:11px;font-weight:700;line-height:24px;text-align:center
}
.tbc__msg--me{align-self:flex-end;max-width:85%;padding:10px 15px;border-radius:20px;background:#f0f3f2;color:var(--tbc-text)}
/* A refusal is not an error and must not look like one: it is the assistant declining
   on purpose, so it keeps a quiet gold edge to mark that it was deliberate. */
.tbc__msg--refused{align-self:stretch;padding:10px 14px;border-radius:14px;background:#fdf8ee;color:#4a3a1a;box-shadow:inset 3px 0 0 var(--tb-gold,#d9a441)}
.tbc__msg--err{align-self:stretch;padding:10px 14px;border-radius:14px;background:#fdf3f1;color:#8a2d1e}
.tbc__msg a{color:var(--tbc-leaf);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.tbc__msg--me a{color:inherit}

.tbc__chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.tbc__chip{
  appearance:none;cursor:pointer;text-align:left;
  font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.3;
  padding:8px 12px;border-radius:999px;color:var(--tbc-forest);
  background:#fff;border:1px solid var(--tbc-line)
}
.tbc__chip:hover{background:var(--tbc-soft);border-color:#c6dcd2}

.tbc__typing{align-self:flex-start;display:flex;gap:4px;padding:6px 0 6px 34px;position:relative}
.tbc__typing::before{
  content:"T";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--tbc-forest);color:#fff;font-size:11px;font-weight:700;line-height:24px;text-align:center
}
.tbc__typing i{width:6px;height:6px;border-radius:50%;background:#8fa79c;align-self:center;animation:tbcBlink 1.3s infinite}
.tbc__typing i:nth-child(2){animation-delay:.18s}
.tbc__typing i:nth-child(3){animation-delay:.36s}
@keyframes tbcBlink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- the composer ---------------------------------------------------------- */
.tbc__form{
  display:flex;align-items:flex-end;gap:6px;flex:0 0 auto;
  margin:0 14px 4px;padding:6px 6px 6px 14px;
  border:1px solid #dfe6e3;border-radius:24px;background:#fff;
  box-shadow:0 8px 24px -16px rgba(7,36,28,.35);transition:border-color .2s,box-shadow .2s
}
.tbc__form:focus-within{border-color:#b9cfc6;box-shadow:0 10px 28px -16px rgba(7,36,28,.45)}
.tbc__form textarea{
  flex:1 1 auto;min-width:0;resize:none;max-height:120px;
  border:0;background:none;padding:8px 0;outline:none;color:var(--tbc-text);
  font-family:inherit;font-size:15px;font-weight:400;line-height:1.45
}
.tbc__form textarea:focus-visible{outline:none}
.tbc__send{
  appearance:none;border:0;cursor:pointer;flex:none;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--tbc-forest);color:#fff;transition:opacity .2s ease
}
.tbc__send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbc__send:disabled{opacity:.35;cursor:default}

.tbc__foot{margin:0;padding:8px 18px 14px;flex:0 0 auto;text-align:center;font-size:11.5px;line-height:1.45;color:#7a8c85}
.tbc__foot a{color:var(--tbc-leaf);text-decoration:underline;text-underline-offset:2px}

/* ---- widths ----------------------------------------------------------------
   On a phone the panel takes the screen, because a card floating over a page somebody
   is already reading is worse than a sheet that owns the space while it is open.
   ------------------------------------------------------------------------- */
@media (max-width:560px){
  .tbc{right:14px;bottom:14px;left:14px;align-items:flex-end}
  .tbc__panel{width:auto;position:fixed;inset:10px;height:auto;border-radius:18px;animation:tbcInFull .24s cubic-bezier(.2,.8,.3,1)}
  @keyframes tbcInFull{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .tbc.is-open .tbc__launch{opacity:0;pointer-events:none}
  .tbc__launch{width:52px;height:52px;transition:opacity .2s ease}
}

/* The site's own menu button sits in the same corner on a phone and locks the page
   while it is open, so the launcher goes rather than being stacked under it. */
html:has(.tb-menu-toggle[aria-expanded="true"]) .tbc{opacity:0;pointer-events:none;transition:opacity .2s ease}

@media print{.tbc{display:none!important}}

@media (prefers-reduced-motion:reduce){
  .tbc *,.tbc *::before,.tbc *::after{animation:none!important;transition:none!important}
}