/* Cut That Bot — front-end widget.

   Everything is scoped under #cutthat-root. That is not cosmetic: Elementor and
   the theme style bare <button>, <input> and <a> elements, and that bleed was
   reaching the widget — uppercase labels, letter-spacing and the theme's own
   yellow, which broke the exit-intent box and the suggestion chips. An ID
   selector outranks the theme's class selectors for almost everything.

   Two properties still need !important: themes routinely set text-transform and
   letter-spacing with !important themselves, and nothing but !important beats
   !important, whatever the specificity. Those two are marked below and nowhere
   else.

   Colours follow the Cutthat identity: gold on near-black. */

#cutthat-root {
  --ct-gold:      #E9B824;
  /* Link gold, darkened for legibility. The brighter #C79400 sat at 2.74:1 on
     white — well under the 4.5:1 needed for body text. This clears it on both
     the white ground (5.38) and the customer's pill (4.89), and the links are
     the product page, the valve and the email, so they have to be readable. */
  --ct-gold-deep: #8A6400;
  --ct-ink:       #17181B;
  --ct-ink-soft:  #2A2B30;
  --ct-paper:     #FFFFFF;
  --ct-wash:      #F5F4F1;
  --ct-line:      #E2DFD8;
  --ct-muted:     #6E6A61;
  --ct-radius:    10px;
  --ct-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ct-shadow:    0 4px 12px rgba(0,0,0,.10), 0 24px 48px -20px rgba(0,0,0,.32);
}

/* ------------------------------------------------------- theme hardening */

#cutthat-root,
#cutthat-root *,
#cutthat-root *::before,
#cutthat-root *::after {
  box-sizing: border-box;
}

#cutthat-root button,
#cutthat-root textarea,
#cutthat-root input,
#cutthat-root a,
#cutthat-root p,
#cutthat-root ul,
#cutthat-root li,
#cutthat-root div,
#cutthat-root span,
#cutthat-root strong {
  font-family: var(--ct-font);
  /* Two of the only four !important declarations in this file — these two
     properties, repeated once more on the inline trigger button at the bottom.
     Themes set both with !important themselves, and specificity cannot beat
     that. Nothing else here needs the escape hatch. */
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none;
  background-image: none;
  float: none;
  min-width: 0;
  min-height: 0;
  max-width: none;
  text-indent: 0;
}

#cutthat-root button,
#cutthat-root textarea,
#cutthat-root input {
  margin: 0;
  width: auto;
  height: auto;
  /* Cleared here and reinstated by the components that actually want one. The
     launcher rule below has equal specificity and comes later, so it wins. */
  box-shadow: none;
  text-decoration: none;
  outline-offset: 2px;
  -webkit-appearance: none;
  appearance: none;
}

#cutthat-root p,
#cutthat-root ul,
#cutthat-root li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}

/* ---------------------------------------------------------- launcher */

#cutthat-root .cutthat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999998;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  /* A hairline edge keeps the button readable where the footer is also black —
     without it the pill disappears into that band. */
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: var(--ct-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 10px 30px -12px rgba(0,0,0,.55);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
#cutthat-root .cutthat-launcher:hover {
  transform: translateY(-2px);
  background: var(--ct-ink-soft);
  border-color: rgba(255, 255, 255, .6);
}
#cutthat-root .cutthat-launcher:focus-visible { outline: 3px solid var(--ct-gold); outline-offset: 3px; }
#cutthat-root .cutthat-launcher[hidden] { display: none; }

/* The logo is a wide wordmark on a transparent ground. Masking it into a small
   white circle rendered it as an illegible smudge, so it sits free on the dark
   background at its own aspect ratio. */
#cutthat-root .cutthat-launcher img {
  height: 20px;
  width: auto;
  max-width: 76px;
  object-fit: contain;
  display: block;
}

/* ------------------------------------------------------------- panel */

#cutthat-root .cutthat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  /* Own stacking and blend context. Without this, a theme setting mix-blend-mode,
     filter or opacity on an ancestor bleeds the page through the panel. */
  isolation: isolate;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--ct-paper);
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow);
  overflow: hidden;
  font-family: var(--ct-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ct-ink);
}
#cutthat-root .cutthat-panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  #cutthat-root .cutthat-panel { animation: cutthat-rise .2s ease-out; }
  @keyframes cutthat-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

#cutthat-root .cutthat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ct-ink);
  flex: 0 0 auto;
}
#cutthat-root .cutthat-head img {
  height: 34px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
}
#cutthat-root .cutthat-head .cutthat-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  flex: 1 1 auto;
  color: var(--ct-gold);
}
#cutthat-root .cutthat-head button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  opacity: .8;
  flex: 0 0 auto;
}
#cutthat-root .cutthat-head button:hover { opacity: 1; }
#cutthat-root .cutthat-head button:focus-visible { outline: 2px solid var(--ct-gold); }

/* ---------------------------------------------------------- messages */

/* Scroll container only — no flex, no gap. Its scrollHeight is then exactly the
   inner wrapper's height, which nothing outside the widget can inflate. */
#cutthat-root .cutthat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px;
  background: var(--ct-paper);
  display: block;
}

/* The conversation itself. */
#cutthat-root .cutthat-log-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Plain black on white. The answers carry specifications, hose sizes and RPM
   figures — bubbles and a tinted ground were decoration competing with that. The
   customer's own messages stay in a light pill so the thread is still readable
   as a conversation. */
#cutthat-root .cutthat-msg {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ct-ink);
}
#cutthat-root .cutthat-msg.bot {
  background: transparent;
  border: none;
  padding: 0;
  align-self: stretch;
}
#cutthat-root .cutthat-msg.user {
  max-width: 86%;
  align-self: flex-end;
  background: var(--ct-wash);
  border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius);
  padding: 8px 12px;
  color: var(--ct-ink);
}

#cutthat-root .cutthat-msg p  { margin: 0 0 .6em; }
#cutthat-root .cutthat-msg p:last-child { margin-bottom: 0; }
#cutthat-root .cutthat-msg ul { margin: .4em 0; padding-left: 1.15em; list-style: disc; }
#cutthat-root .cutthat-msg li { margin-bottom: .25em; list-style: disc; }
#cutthat-root .cutthat-msg a  { color: var(--ct-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
#cutthat-root .cutthat-msg strong { font-weight: 600; }
#cutthat-root .cutthat-msg img { max-width: 100%; height: auto; border-radius: 6px; margin-top: .5em; display: block; }

#cutthat-root .cutthat-typing { display: flex; gap: 4px; padding: 4px 0; }
#cutthat-root .cutthat-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ct-muted); opacity: .45; display: block;
}
@media (prefers-reduced-motion: no-preference) {
  #cutthat-root .cutthat-typing span { animation: cutthat-blink 1.2s infinite; }
  #cutthat-root .cutthat-typing span:nth-child(2) { animation-delay: .18s; }
  #cutthat-root .cutthat-typing span:nth-child(3) { animation-delay: .36s; }
  @keyframes cutthat-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: .9; } }
}

/* ------------------------------------------------------- suggestions */

#cutthat-root .cutthat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
  background: var(--ct-paper);
  flex: 0 0 auto;
}
#cutthat-root .cutthat-suggestions button {
  background: var(--ct-paper);
  border: 1px solid var(--ct-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ct-ink);
  cursor: pointer;
  white-space: normal;
  text-align: left;
}
#cutthat-root .cutthat-suggestions button:hover { border-color: var(--ct-gold-deep); }
#cutthat-root .cutthat-suggestions button:focus-visible { outline: 2px solid var(--ct-gold-deep); }
#cutthat-root .cutthat-suggestions[hidden] { display: none; }

/* ------------------------------------------------------------- input */

#cutthat-root .cutthat-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--ct-line);
  background: var(--ct-paper);
}
#cutthat-root .cutthat-form textarea {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--ct-line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 15px;
  line-height: 1.4;
  max-height: 110px;
  color: var(--ct-ink);
  background: var(--ct-paper);
}
#cutthat-root .cutthat-form textarea:focus { outline: 2px solid var(--ct-gold-deep); outline-offset: -1px; border-color: transparent; }
#cutthat-root .cutthat-form button {
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  background: var(--ct-gold);
  color: var(--ct-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
#cutthat-root .cutthat-form button:disabled { opacity: .5; cursor: default; }
#cutthat-root .cutthat-form button:focus-visible { outline: 3px solid var(--ct-ink); }

#cutthat-root .cutthat-foot {
  flex: 0 0 auto;
  padding: 0 12px 9px;
  background: var(--ct-paper);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ct-muted);
  text-align: center;
}
#cutthat-root .cutthat-foot a { color: var(--ct-gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------- exit intent */

#cutthat-root .cutthat-nudge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999998;
  width: min(330px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ct-ink);
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  border-radius: var(--ct-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 10px 30px -12px rgba(0,0,0,.55);
  padding: 16px;
  font-family: var(--ct-font);
  font-size: 14px;
  line-height: 1.45;
}
#cutthat-root .cutthat-nudge[hidden] { display: none; }
#cutthat-root .cutthat-nudge strong {
  display: block;
  color: var(--ct-gold);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 5px;
}
#cutthat-root .cutthat-nudge p { margin: 0 0 12px; color: #DCD9D2; font-size: 14px; }
#cutthat-root .cutthat-nudge-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#cutthat-root .cutthat-nudge button {
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: normal;
}
#cutthat-root .cutthat-nudge .yes { background: var(--ct-gold); color: var(--ct-ink); flex: 1 1 auto; }
#cutthat-root .cutthat-nudge .no  { background: transparent; color: #A9A59C; flex: 0 0 auto; }
#cutthat-root .cutthat-nudge .no:hover { color: #fff; }
#cutthat-root .cutthat-nudge button:focus-visible { outline: 2px solid var(--ct-gold); }

/* --------------------------------------------- inline trigger button */

/* Lives in page content, so it cannot be scoped to #cutthat-root. The element
   selector adds enough specificity to beat the theme's own button styling. */
button.cutthat-inline-btn {
  background: #E9B824;
  color: #17181B;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
}

/* Elementor's own mobile breakpoint, so this hides at the same width the theme
   switches at.

   767.98 rather than 767: viewport widths are fractional on any display with
   non-integer scaling (Windows at 125%, plenty of Android devices), so a
   viewport reporting 767 can measure 767.5 and slip straight through an integer
   max-width. Verified — at innerWidth 767, `max-width: 767px` matched false. */
@media (max-width: 767.98px) {
  #cutthat-root.cutthat-no-mobile-launcher .cutthat-launcher { display: none; }

  /* Exit intent is desktop-only. The JavaScript already refuses to arm at this
     width; this is the backstop, because at phone width the prompt covers most
     of the page and there is no version of that worth showing. */
  #cutthat-root .cutthat-nudge { display: none; }
}

@media (max-width: 480px) {
  #cutthat-root .cutthat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  #cutthat-root .cutthat-launcher { right: 14px; bottom: 14px; }
  /* iOS zooms the page in when a focused field is under 16px and never zooms
     back out. Most of these customers are on a phone. */
  #cutthat-root .cutthat-form textarea { font-size: 16px; }
}