/* The help assistant (JB-2839, JB-2857, JB-2875).
 *
 * Split out of help-center.css so it can be loaded on every page without
 * dragging the help centre's own layout — cards, sidebar, breadcrumb, article
 * body — onto routes that have no help centre on them. That file keeps what
 * only /help uses; this one is the assistant, wherever it appears.
 */

/* Help assistant (JB-2839).
   Sits under the search box in the navy hero. Deliberately quieter than the
   search input: search is the fast, free path and should keep the visual lead;
   this is the second affordance, for the question that is not a keyword. */

.hc-ask {
  margin-top: 12px;
  text-align: left;
}

.hc-ask-form {
  display: flex;
  gap: 8px;
}

.hc-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid #46587a;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 15px;
}

.hc-ask-input::placeholder {
  color: #a9bcd4;
}

.hc-ask-input:focus {
  outline: none;
  border-color: #0091ae;
  background: rgba(255, 255, 255, .12);
}

.hc-ask-btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  border: 0;
  border-radius: 6px;
  background: #0091ae;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.hc-ask-btn:hover {
  background: #007a92;
}

.hc-ask-btn[disabled] {
  opacity: .6;
  cursor: default;
}

/* The answer leaves the navy band and lands on a white card: it is content to
   read, not part of the hero. */

.hc-ask-status .hc-ask-contact,
.hc-ask-sources a {
  color: #0091ae;
  font-weight: 500;
}

.hc-ask-note {
  margin: 10px 0 0;
  color: #7c98b6;
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .hc-ask-form {
    flex-direction: column;
  }

  .hc-ask-btn {
    width: 100%;
  }
}

/* Handing the question to a person (JB-2839). Quiet by design: it appears under
   an answer the reader may already be happy with, and should not compete with it. */

.hc-ask-escalate {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eaf0f6;
}

.hc-ask-link {
  padding: 0;
  border: 0;
  background: none;
  color: #0091ae;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.hc-ask-link:hover {
  text-decoration: underline;
}

.hc-ask-escalate-form label {
  display: block;
  margin-bottom: 6px;
  color: #516f90;
  font-size: 14px;
}

.hc-ask-escalate-row {
  display: flex;
  gap: 8px;
}

.hc-ask-email {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #cbd6e2;
  border-radius: 6px;
  color: #33475b;
  font-size: 15px;
}

.hc-ask-email:focus {
  outline: none;
  border-color: #0091ae;
}

@media (max-width: 767px) {
  .hc-ask-escalate-row {
    flex-direction: column;
  }
}

/* The assistant as a conversation (JB-2857).
   Two mountings, one set of rules: a thread in the help hero, and the same thread
   inside a floating panel on the homepage. */

.hc-ask-body {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 8px;
  background: #fff;
  color: #33475b;
  text-align: left;
}

.hc-ask-thread {
  max-height: 46vh;
  overflow-y: auto;
}

.hc-ask-thread:empty {
  display: none;
}

.hc-msg {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
}

.hc-msg-p {
  margin: 0 0 8px;
}

.hc-msg-p:last-child {
  margin-bottom: 0;
}

.hc-msg-who {
  display: block;
  margin-bottom: 2px;
  color: #7c98b6;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hc-msg-you .hc-msg-p {
  color: #516f90;
}

.hc-msg-bot {
  padding-left: 12px;
  border-left: 2px solid #eaf0f6;
}

/* The wait is 3–5 seconds, so it needs to look like work rather than a stall. */
.hc-dots {
  color: #7c98b6;
  font-size: 14px;
}

/* Three dots that breathe, beside the word (JB-2877). The old version typed an
   ellipsis one character at a time, which reads as a machine printing rather
   than as something thinking — and it moved the text every 300ms. These sit
   still and pulse. */
.hc-msg-pending .hc-dots::after,
.hc-answer-body .hc-dots::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: hc-think 1.1s ease-in-out infinite;
  box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor;
  /* Room for the two dots the shadows draw, so nothing after them jumps. */
  margin-right: 20px;
  vertical-align: middle;
}

@keyframes hc-think {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

/* The three do not blink together: the offsets are what makes it read as a
   thought moving rather than a light switching. */
.hc-msg-pending .hc-dots,
.hc-answer-body .hc-dots {
  animation: hc-think-word 1.1s ease-in-out infinite;
}

@keyframes hc-think-word {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.hc-msg-sources {
  margin-top: 8px;
  font-size: 13.5px;
}

.hc-msg-sources-label {
  color: #7c98b6;
  margin-right: 6px;
}

.hc-msg-sources a,
/* "Contact us" is the way out when the articles do not cover the question, so
   it is a button and not a line of blue text among other lines of text. Black,
   like every other primary control on the site. */
.hc-msg-contact {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 24px;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.hc-msg-contact:hover,
.hc-msg-contact:focus {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.hc-msg-escalate {
  margin-top: 12px;
}

/* Homepage: launcher plus panel, bottom right, above the fold's own stacking
   but below the cookie banner, which writes its z-index inline with !important
   and cannot be outranked (JB-2768). */
/* Above the Chatbase bubble, not beside it: that one is injected by GTM at the
   bottom right and is not ours to move, and on a phone there is no room for two
   things side by side. Stacked, both stay reachable while the two assistants
   coexist — which is a temporary state worth ending. */
.hc-ask-floating {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 900;
  width: auto;
  margin: 0;
  /* The launcher is first in the markup so it is first in the tab order, and
     column-reverse puts it under the panel where a chat launcher belongs — the
     panel opens upward from it. */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}

.hc-ask-launcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #1b2a4a;
  box-shadow: 0 6px 20px rgba(27, 42, 74, .28);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.hc-ask-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0091ae;
  font-size: 14px;
  font-weight: 700;
}

.hc-ask-floating .hc-ask-body {
  width: 380px;
  max-width: calc(100vw - 40px);
  margin: 0 0 10px;
  box-shadow: 0 12px 40px rgba(27, 42, 74, .22);
}

.hc-ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px 0 12px;
  font-weight: 600;
}

.hc-ask-close {
  padding: 0 4px;
  border: 0;
  background: none;
  color: #7c98b6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 767px) {
  .hc-ask-floating {
    right: 12px;
    bottom: 88px;
  }

  .hc-ask-floating .hc-ask-body {
    width: calc(100vw - 24px);
  }

  .hc-ask-thread {
    max-height: 50vh;
  }

  /* On a phone the launcher is a circle, not a labelled pill (JB-2875): the
     label needs ~150 pt of a 390 pt screen and puts a permanent bar across
     whatever is underneath. The icon carries it; the label survives as the
     accessible name, which is what a screen reader announces anyway. */
  .hc-ask-launcher {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }

  .hc-ask-launcher-icon {
    font-size: 24px;
    margin: 0;
  }

  /* And it only survives where Andrea asked for it. Everywhere else the bubble
     would sit over the thing the reader came to do — a booking form on a small
     screen has no room to spare. */
  .hc-ask-anywhere:not(.hc-ask-on-phone) {
    display: none;
  }
}

/* Lists inside an answer (JB-2857). Procedures are most of what the help
   articles describe, so steps that look like steps carry real meaning. */

.hc-msg-list {
  margin: 0 0 8px;
  padding-left: 20px;
}

.hc-msg-list li {
  margin-bottom: 5px;
}

.hc-msg-list li:last-child {
  margin-bottom: 0;
}

.hc-msg strong {
  font-weight: 600;
}

/* One composer shape in both mountings (JB-2857). The send control is a circle
   with an arrow everywhere; only the surface under it changes — dark inside the
   floating panel, light inside the help hero, which sits on a white page. */

.hc-ask-body .hc-ask-form {
  align-items: center;
  gap: 0;
  padding: 5px 5px 5px 14px;
  border: 1px solid #cbd6e2;
  border-radius: 24px;
  background: #f5f8fa;
}

.hc-ask-body .hc-ask-form:focus-within {
  border-color: #0091ae;
  background: #fff;
}

.hc-ask-body .hc-ask-input {
  padding: 8px 0;
  border: 0;
  background: none;
}

.hc-ask-body .hc-ask-input:focus {
  background: none;
}

.hc-ask-body .hc-ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

.hc-ask-body .hc-ask-form:not(.hc-has-text) .hc-ask-btn {
  background: #dfe5ee;
  color: #93a5bd;
  cursor: default;
}

/* The escalation row keeps its labelled button: an arrow means "send this
   question", and that one sends an address to a person. */
.hc-ask-escalate-row .hc-ask-btn {
  width: auto;
  height: auto;
  padding: 10px 18px;
  border-radius: 6px;
  background: #0091ae;
  color: #fff;
}

/* ── The floating panel on the homepage (JB-2857) ────────────────────────────
   Intercom's arrangement, our palette, and light: a conversation is something
   you read, and white is what the rest of the site reads on. Only the header
   keeps the navy of the help hero, so the panel has a brand edge without the
   body competing with the page behind it.

   Everything is scoped to .hc-ask-floating — the thread inside the help hero is
   already in production and is not touched. */

.hc-ask-floating .hc-ask-body {
  display: flex;
  flex-direction: column;
  height: 560px;
  max-height: calc(100vh - 140px);
  padding: 0;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background: #fff;
  color: #33475b;
  overflow: hidden;
}

.hc-ask-floating .hc-ask-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  background: #1b2a4a;
  color: #fff;
}

.hc-ask-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0091ae;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.hc-ask-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.hc-ask-title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.hc-ask-subtitle {
  color: #a9bcd4;
  font-size: 12.5px;
}

.hc-ask-floating .hc-ask-close {
  margin-left: auto;
  color: #a9bcd4;
}

.hc-ask-floating .hc-ask-close:hover {
  color: #fff;
}

/* The thread holds the space even with nothing in it, so the composer sits at
   the bottom of the window from the first moment. Without this it collapses —
   .hc-ask-thread:empty hides it — and the panel opens with the field stuck
   under the header and a void beneath. */
.hc-ask-floating .hc-ask-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px;
}

.hc-ask-floating .hc-ask-thread:empty {
  display: block;
}

/* Messages as bubbles, meta under them: "who said that" is a question you have
   after reading, not before. */
.hc-ask-floating .hc-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 14px;
}

.hc-ask-floating .hc-msg-who {
  order: 2;
  margin: 4px 2px 0;
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
}

.hc-ask-floating .hc-msg-bot {
  padding: 0;
  border-left: 0;
}

.hc-ask-floating .hc-msg-bot > .hc-msg-p,
.hc-ask-floating .hc-msg-bot > .hc-msg-list,
.hc-ask-floating .hc-msg-bot > .hc-dots {
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #f1f5f9;
  color: #33475b;
}

.hc-ask-floating .hc-msg-bot > .hc-msg-list {
  padding-left: 32px;
}

.hc-ask-floating .hc-msg-bot > .hc-msg-p + .hc-msg-p,
.hc-ask-floating .hc-msg-bot > .hc-msg-list {
  margin-top: 4px;
}

.hc-ask-floating .hc-msg-you {
  align-items: flex-end;
}

.hc-ask-floating .hc-msg-you .hc-msg-p {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px 14px 4px;
  background: #0091ae;
  color: #fff;
}

.hc-ask-floating .hc-msg-sources,
.hc-ask-floating .hc-msg-escalate {
  padding: 0 2px;
}

.hc-ask-floating .hc-ask-form {
  margin: 0 12px 4px;
}

.hc-ask-floating .hc-ask-note {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 11.5px;
  text-align: center;
}

@media (max-width: 767px) {
  .hc-ask-floating .hc-ask-body {
    height: calc(100vh - 150px);
  }
}

/* Corrections from a real look at the panel (JB-2857).

   #333 is the homepage's own dark — the "Browse stays on the map" button — so
   the launcher and the header belong to the page rather than introducing a
   second navy that nothing else on the homepage uses. */

.hc-ask-launcher,
.hc-ask-floating .hc-ask-head {
  background: #333;
}

/* The mark on its coral circle, from public/images/jw_circular_logo.png reduced
   to 72px: the original is 1081px and 88 kB, which is a lot to download for a
   34px avatar on the page whose weight we spent a day on. */
.hc-ask-avatar {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
}

/* No rim. The body's border was drawing a white line between the header and the
   page, which read as a seam rather than as an edge — the shadow already says
   the panel is above the page. */
.hc-ask-floating .hc-ask-body {
  border: 0;
}

/* The field inherited white text from the hero, where it sits on navy. Since the
   composer moved onto a light surface that made everything typed invisible — in
   the help thread as much as in the panel, so the fix belongs on both. */
.hc-ask-body .hc-ask-input {
  color: #333;
}

.hc-ask-body .hc-ask-input::placeholder {
  color: #8b98a8;
}

/* Light text on a dark surface renders soft on macOS: subpixel antialiasing
   thickens the strokes and the title reads as blurred. The face is right —
   hellix declares real 400/500/600 files, so nothing here is a synthetic bold —
   what is wrong is the rendering hint. Greyscale antialiasing is what every
   chat widget with a dark header uses. */
.hc-ask-launcher,
.hc-ask-floating .hc-ask-head {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hc-ask-title {
  letter-spacing: -.01em;
}

/* Three questions worth asking (JB-2857).

   Pills on a wide screen, rows on a phone — the same shape Airbnb uses, and for
   the same reason: side by side they truncate below about 700px, and a truncated
   question is worse than no suggestion at all. */

.hc-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hc-ask-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  background: #fff;
  color: #33475b;
  font-size: 14.5px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(27, 42, 74, .07);
}

.hc-ask-chip:hover {
  border-color: #0091ae;
  color: #0091ae;
}

.hc-ask-chip-icon {
  font-size: 17px;
  line-height: 1;
}

/* In the help hero the pills sit on navy, so they carry no border of their own
   and let the white do the separating. */
.hc-hero .hc-ask-chips {
  justify-content: center;
}

/* Inside the floating panel there is never room for a row of pills. */
.hc-ask-floating .hc-ask-chips {
  flex-direction: column;
  margin: 0 12px 8px;
}

.hc-ask-floating .hc-ask-chip {
  width: 100%;
  border-radius: 12px;
}

@media (max-width: 767px) {
  /* Rows, not pills: icon left, question right, one per line — a question that
     has to be truncated to fit is a question nobody clicks. */
  .hc-ask-chips {
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
  }

  .hc-ask-chip {
    width: 100%;
    padding: 11px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    font-size: 15.5px;
  }

  .hc-hero .hc-ask-chip {
    color: #fff;
  }

  .hc-hero .hc-ask-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }

  .hc-ask-chip-icon {
    flex: 0 0 auto;
    width: 26px;
    font-size: 19px;
    text-align: center;
  }

  .hc-ask-chip-text {
    flex: 1 1 auto;
  }
}

/* With the search box gone from the hero (JB-2857) the assistant is the only
   thing in the band, so it takes the room the two of them used to share: a
   taller field, a larger send control, and no card of its own — the navy is the
   surface now. */

.hc-hero .hc-ask-body {
  margin-top: 0;
  padding: 0;
  background: none;
}

/* The field is the whole point of the band, so it is sized like one: a wide
   pill with a lifted shadow, the way a search bar is on a travel site. Anything
   smaller reads as a footnote under the heading. */
.hc-hero .hc-ask-form {
  padding: 10px 10px 10px 30px;
  border-color: transparent;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.hc-hero .hc-ask-input {
  padding: 18px 0;
  font-size: 19px;
}

.hc-hero .hc-ask-btn {
  width: 54px;
  height: 54px;
}

.hc-hero .hc-ask-btn svg {
  width: 21px;
  height: 21px;
}

/* The thread appears under the field once there is one, on its own white card so
   the answer is read on white rather than on navy. */
.hc-hero .hc-ask-thread:not(:empty) {
  margin-bottom: 12px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  max-height: 52vh;
}

.hc-hero .hc-ask-note {
  color: #a9bcd4;
  text-align: center;
}

@media (max-width: 767px) {
  .hc-hero .hc-ask-form {
    padding: 8px 8px 8px 20px;
  }

  /* Never below 16px: iOS zooms the page when a field smaller than that takes
     focus, and it does not zoom back out. */
  .hc-hero .hc-ask-input {
    padding: 13px 0;
    font-size: 16px;
  }

  .hc-hero .hc-ask-btn {
    width: 44px;
    height: 44px;
  }
}

/* ── The answer as a page, on the help centre (JB-2857) ──────────────────────
   A question deserves a screen, not a paragraph pushed above the field. The
   composer moves to the top when an answer is open — "ask another question"
   belongs where you look first — and the answer opens below it on white. */

/* On /help/ask the question is the headline, so the band carries no h1 of its
   own and is only as tall as the composer needs. */
.hc-hero-answer {
  padding: 26px 0 44px;
}

.hc-answer {
  margin-top: 14px;
  padding: 26px 30px 30px;
  border-radius: 14px;
  background: #fff;
  text-align: left;
}

.hc-has-answer .hc-ask-body {
  display: flex;
  flex-direction: column;
}

.hc-has-answer .hc-ask-form {
  order: -1;
}

.hc-has-answer .hc-ask-note {
  order: 1;
}

.hc-answer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #516f90;
  font-size: 14.5px;
  cursor: pointer;
  /* It is a link on the answer page and a button inside the hero: the two have
     to look the same. */
  text-decoration: none;
}

.hc-answer-back:hover,
.hc-answer-back:focus {
  text-decoration: none;
}

.hc-answer-back::before {
  content: '\2190';
  font-size: 17px;
}

.hc-answer-back:hover {
  color: #0091ae;
}

/* Two classes deep on purpose: on /help/ask the question is an h1 sitting
   inside the navy band, and `.hc-hero h1` would otherwise paint it white on a
   white card. */
.hc-answer .hc-answer-q {
  margin: 0 0 14px;
  color: #222;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
}

.hc-answer-body {
  color: #33475b;
  font-size: 16px;
  line-height: 1.65;
}

.hc-answer-body .hc-msg-p {
  margin: 0 0 12px;
}

.hc-answer-body .hc-msg-list {
  margin: 0 0 12px;
  padding-left: 22px;
}

/* Something upstream resets ul to list-style: none, so a bulleted answer came
   out as indented lines with nothing marking them — three separate points read
   as one broken paragraph. Numbered steps were unaffected; both are stated here
   so neither depends on that. */
ul.hc-msg-list {
  list-style: disc;
}

ol.hc-msg-list {
  list-style: decimal;
}

.hc-answer-body .hc-msg-list li {
  margin-bottom: 7px;
}

.hc-answer-escalate:not(:empty) {
  margin-top: 6px;
  padding-bottom: 4px;
}

/* The articles, as rows worth clicking rather than a row of bare links, under a
   heading that says what they are — otherwise they read as footnotes. */
.hc-answer-sources {
  margin-top: 20px;
  border-top: 1px solid #eaf0f6;
}

.hc-answer .hc-answer-sources-title {
  margin: 22px 0 2px;
  color: #222;
  font-size: 19px;
  font-weight: 700;
}

.hc-answer-source {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid #eaf0f6;
  color: #222;
  text-decoration: none;
}

.hc-answer-source:hover {
  color: #222;
  text-decoration: none;
  background: #f8fafc;
}

.hc-answer-source-text {
  flex: 1 1 auto;
  min-width: 0;
}

.hc-answer-source-title {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.hc-answer-source-excerpt {
  display: block;
  color: #6b7f96;
  font-size: 14.5px;
  line-height: 1.5;
}

.hc-answer-source-chevron {
  flex: 0 0 auto;
  color: #99acc2;
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 767px) {
  .hc-answer {
    padding: 20px 18px 22px;
  }

  .hc-answer .hc-answer-q {
    font-size: 22px;
  }

  .hc-answer-source {
    padding: 16px 2px;
  }
}

/* The site title-cases buttons somewhere upstream, which turned a question into
   "Cosa Succede Se Annullo?" — a sentence pretending to be a headline. These are
   questions and read as written. */
.hc-ask-chip,
.hc-ask-chip-text {
  text-transform: none;
}

/* What to ask next (JB-2876).
   Under the answer, not under the composer: they belong to the thing just said,
   and a reader who has stopped reading has already scrolled past them. Quieter
   than the opening suggestions — those are an invitation to start, these are an
   offer to carry on. */
.hc-msg-followups {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
}

.hc-followup {
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid #dfe3eb;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.hc-followup:hover {
  border-color: #b9c2cf;
  background: #f7f8fa;
}

/* ---------------------------------------------------------------------------
   The panel as the apps' Support chat (JB-3646).

   One look in three places — iOS, Android, here: a spark that turns while the
   answer is worked out, listings as cards with their photo, the help centre as
   one block, a person behind a face, and the two short forms (who is writing,
   what to tell the team) as cards of the same family.
   ------------------------------------------------------------------------ */

.hc-thinking {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #7c98b6;
  font-size: 14px;
}

.hc-ask-floating .hc-msg-bot > .hc-thinking {
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #f1f5f9;
}

/* Six arms in the logo's coral. The whole turns a third of a circle every 1.6s,
   steadily; the arms breathe from 60% to full length twice in that time — the
   two motions together are what the apps draw. */
.hc-spark {
  flex: 0 0 auto;
  overflow: visible;
  animation: hc-spark-turn 1.6s linear infinite;
}

.hc-spark-arms {
  animation: hc-spark-breathe .8s ease-in-out infinite;
  transform-origin: 0 0;
}

.hc-spark line {
  stroke: #ff5a5f;
  stroke-width: 2.4;
  stroke-linecap: round;
}

@keyframes hc-spark-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(120deg); }
}

@keyframes hc-spark-breathe {
  0%, 100% { transform: scale(.6); }
  50% { transform: scale(1); }
}

.hc-thinking-words {
  animation: hc-think-word 1.6s ease-in-out infinite;
}

/* Someone who asked for less motion still sees that work is going on: the
   spark stays, still, and the words keep changing. */
@media (prefers-reduced-motion: reduce) {
  .hc-spark,
  .hc-spark-arms,
  .hc-thinking-words {
    animation: none;
  }
}

/* Cards: what the answer came from, and the ways onward.

   Every rule on .hc-card itself is scoped to .hc-ask, the assistant's own
   root. The help centre has cards of its own under the same class name, and
   on the day this stylesheet first loaded on /help in production it laid them
   on their side: photo left, title squeezed beside it (JB-3655). */
.hc-msg-cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.hc-ask .hc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e4e9ef;
  border-radius: 14px;
  background: #fff;
  color: #222;
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}

.hc-ask a.hc-card:hover,
.hc-ask a.hc-card:focus,
.hc-ask button.hc-card:hover,
.hc-ask button.hc-card:focus {
  border-color: #c9d3de;
  background: #fafbfc;
  color: #222;
  text-decoration: none;
}

.hc-ask button.hc-card {
  cursor: pointer;
}

.hc-card-photo {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  overflow: hidden;
  border-radius: 9px;
  background: #eef1f5;
}

.hc-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hc-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.hc-card-chevron {
  flex: 0 0 auto;
  color: #9aa7b6;
  font-size: 22px;
  line-height: 1;
}

.hc-ask .hc-card-help {
  align-items: flex-start;
}

.hc-card-tile {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e5f3f3;
  color: #008489;
}

.hc-card-help-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hc-card-link {
  color: #008489;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}

.hc-card-link:hover,
.hc-card-link:focus {
  color: #006c70;
  text-decoration: underline;
}

.hc-msg-cards > .hc-card-link {
  padding: 0 2px;
}

.hc-msg-escalate {
  width: 100%;
  box-sizing: border-box;
}

.hc-card-face {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* The two short forms. */
.hc-ask .hc-identify,
.hc-ask .hc-person-form {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
}

.hc-identify-names {
  display: flex;
  gap: 10px;
}

.hc-identify-names .hc-field {
  flex: 1 1 0;
  min-width: 0;
}

.hc-field {
  display: block;
  margin: 0;
  font-weight: 400;
}

.hc-field-label {
  display: block;
  margin-bottom: 4px;
  color: #516f90;
  font-size: 12.5px;
}

.hc-field-input,
.hc-person-note {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cbd6e2;
  border-radius: 10px;
  background: #fff;
  color: #222;
  font-family: inherit;
  /* 16px, or iOS Safari zooms the page when the field takes focus. */
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  box-sizing: border-box;
}

.hc-field-input {
  height: 44px;
}

.hc-person-note {
  min-height: 96px;
  resize: vertical;
}

.hc-field-input:focus,
.hc-person-note:focus {
  border-color: #222;
  outline: 0;
}

.hc-person-prompt {
  margin: 0;
  color: #222;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}

.hc-person-send {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: #222;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.hc-person-send:hover,
.hc-person-send:focus {
  background: #000;
}

.hc-person-send[disabled] {
  opacity: .55;
  cursor: default;
}

.hc-person-promise {
  margin: 0;
  color: #7c98b6;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}

/* Marked as iOS marks it: red, and a little heavier than the text around it. */
.hc-form-error {
  margin: 0;
  color: #c13515;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.hc-form-error[hidden] {
  display: none;
}

@media (max-width: 380px) {
  .hc-identify-names {
    flex-direction: column;
  }
}

/* The panel's height (JB-3647).

   It opens at the height of the Chatbase window Andrea pointed to - about 72%
   of the viewport - even with nothing in it, and grows with the conversation
   until its top reaches the site header, never over it. --hc-panel-max is
   measured by help-assistant.js; the calc() is what holds until it has run
   (bottom offset 16, launcher 58 and its margin, header 76, a gap).

   Desktop only: on a phone the panel already takes the screen. */
@media (min-width: 768px) {
  .hc-ask-floating .hc-ask-body {
    height: auto;
    min-height: min(72vh, var(--hc-panel-max, calc(100vh - 172px)));
    max-height: var(--hc-panel-max, calc(100vh - 172px));
  }
}

/* An answer being written (JB-3647): a caret after the last word, and what
   comes under the answer arrives softly instead of popping in. */
.hc-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  opacity: .55;
  animation: hc-caret-blink 1s steps(2, start) infinite;
}

@keyframes hc-caret-blink {
  to { visibility: hidden; }
}

.hc-ask-floating .hc-msg-cards,
.hc-ask-floating .hc-msg-escalate,
.hc-ask-floating .hc-msg-followups {
  animation: hc-rise .35s ease both;
}

@keyframes hc-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-caret,
  .hc-ask-floating .hc-msg-cards,
  .hc-ask-floating .hc-msg-escalate,
  .hc-ask-floating .hc-msg-followups {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   The panel in the Intercom messenger's style (JB-3647, Andrea 02.10.2026).

   He tried the dark Chatbase look first and did not like it, so: white, with a
   white header under a hairline; the reader's words in a black bubble on the
   right, the answer as one light grey bubble; the composer a white box with a
   black send button; the launcher a black ball. Scoped to the floating panel:
   the thread in the help hero and the answer page are not touched.
   ------------------------------------------------------------------------ */

@media (min-width: 768px) {
  .hc-ask-floating .hc-ask-body {
    width: 448px;
  }
}

.hc-ask-floating .hc-ask-body {
  border-radius: 24px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
}

.hc-ask-floating .hc-ask-head {
  padding: 16px 20px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  color: #1a1a1a;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.hc-ask-floating .hc-ask-title {
  color: #1a1a1a;
  font-size: 16px;
}

.hc-ask-floating .hc-ask-subtitle {
  color: #737376;
  font-size: 13.5px;
}

.hc-ask-floating .hc-ask-close,
.hc-ask-floating .hc-ask-close:hover {
  color: #5f5f63;
  font-size: 28px;
}

.hc-ask-floating .hc-ask-close:hover {
  color: #1a1a1a;
}

.hc-ask-floating .hc-ask-thread {
  padding: 20px 20px 12px;
  scrollbar-width: thin;
  scrollbar-color: #cfcfd3 transparent;
}

.hc-ask-floating .hc-ask-thread::-webkit-scrollbar {
  width: 8px;
}

.hc-ask-floating .hc-ask-thread::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #cfcfd3;
}

.hc-ask-floating .hc-msg {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.5;
}

/* The bubble on the right already says who is speaking. */
.hc-ask-floating .hc-msg-you .hc-msg-who {
  display: none;
}

.hc-ask-floating .hc-msg-you .hc-msg-p {
  margin: 0;
  padding: 11px 20px;
  border-radius: 22px;
  background: #000;
  color: #fff;
}

/* One bubble for the whole answer. Each paragraph and list is still its own
   element, so each carries the bubble's colour and the next one slides 20px
   under the rounded foot of the one before: joined, they read as one surface,
   with no wrapper for the script to keep track of. */
.hc-ask-floating .hc-msg-bot > .hc-msg-p,
.hc-ask-floating .hc-msg-bot > .hc-msg-list,
.hc-ask-floating .hc-msg-bot > .hc-thinking {
  align-self: flex-start;
  width: calc(100% - 44px);
  margin: 0;
  padding: 16px 20px 20px;
  border-radius: 20px;
  background: #f3f3f3;
  color: #1a1a1a;
  box-sizing: border-box;
}

.hc-ask-floating .hc-msg-bot > .hc-msg-list {
  padding-left: 40px;
}

.hc-ask-floating .hc-msg-bot > .hc-msg-p + .hc-msg-p,
.hc-ask-floating .hc-msg-bot > .hc-msg-p + .hc-msg-list,
.hc-ask-floating .hc-msg-bot > .hc-msg-list + .hc-msg-p,
.hc-ask-floating .hc-msg-bot > .hc-msg-list + .hc-msg-list {
  margin-top: -20px;
  padding-top: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.hc-ask-floating .hc-msg-bot > .hc-thinking {
  width: auto;
  padding: 12px 18px;
  color: #737376;
}

.hc-ask-floating .hc-msg-bot a:not(.hc-card) {
  color: #1a1a1a;
  text-decoration: underline;
}

/* Cards, follow-ups and the two short forms, on white. */
.hc-ask-floating .hc-card {
  border-color: #e6e6e6;
  background: #fff;
  color: #1a1a1a;
}

.hc-ask-floating a.hc-card:hover,
.hc-ask-floating a.hc-card:focus,
.hc-ask-floating button.hc-card:hover,
.hc-ask-floating button.hc-card:focus {
  border-color: #cfcfd3;
  background: #f7f7f7;
  color: #1a1a1a;
}

.hc-ask-floating .hc-card-photo,
.hc-ask-floating .hc-card-tile {
  background: #f3f3f3;
  color: #1a1a1a;
}

.hc-ask-floating .hc-followup {
  border-color: #e0e0e0;
  background: #fff;
  color: #1a1a1a;
}

.hc-ask-floating .hc-followup:hover {
  border-color: #1a1a1a;
  background: #fff;
}

.hc-ask-floating .hc-field-label,
.hc-ask-floating .hc-person-promise {
  color: #737376;
}

.hc-ask-floating .hc-field-input,
.hc-ask-floating .hc-person-note {
  border-color: #d9d9dc;
}

.hc-ask-floating .hc-person-send {
  background: #000;
}

/* The three opening questions (Andrea, 02.10.2026): small, above the field,
   lined up on the right - where the reader's own words will appear. They sit
   after the form in the markup; `order` puts them before it. */
.hc-ask-floating .hc-ask-chips {
  order: 1;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 0 20px 10px;
}

.hc-ask-floating .hc-ask-form {
  order: 2;
}

.hc-ask-floating .hc-ask-note {
  order: 3;
}

.hc-ask-floating .hc-ask-chip {
  width: auto;
  max-width: 100%;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-size: 12.5px;
  box-shadow: none;
}

.hc-ask-floating .hc-ask-chip:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
}

.hc-ask-floating .hc-ask-chip-icon {
  font-size: 13px;
}

/* `hidden` has to win over the display the chips are given above: without
   this they stayed on screen under a conversation already in progress. */
.hc-ask-chips[hidden] {
  display: none;
}

/* The composer: a white box with a hairline that turns black when written in,
   and a round send button that turns black when there is something to send. */
.hc-ask-floating .hc-ask-form,
.hc-ask-floating .hc-ask-form:focus-within {
  margin: 0 20px 6px;
  padding: 8px 8px 8px 18px;
  border: 1px solid #e3e3e3;
  border-radius: 20px;
  background: #fff;
}

.hc-ask-floating .hc-ask-form:focus-within {
  border-color: #1a1a1a;
}

.hc-ask-floating .hc-ask-body .hc-ask-input,
.hc-ask-floating .hc-ask-input {
  color: #1a1a1a;
  font-size: 16px;
}

.hc-ask-floating .hc-ask-input::placeholder {
  color: #8a8a8e;
}

.hc-ask-floating .hc-ask-body .hc-ask-btn,
.hc-ask-floating .hc-ask-btn {
  width: 40px;
  height: 40px;
  background: #000;
  color: #fff;
}

.hc-ask-floating .hc-ask-form:not(.hc-has-text) .hc-ask-btn {
  background: #ececec;
  color: #b4b4b8;
}

.hc-ask-floating .hc-ask-note {
  padding: 8px 20px 16px;
  color: #8a8a8e;
}

.hc-ask-floating .hc-ask-note a {
  color: #5f5f63;
  text-decoration: underline;
}

/* One face in the whole panel: form controls do not inherit it by default. */
.hc-ask-floating .hc-ask-chip,
.hc-ask-floating .hc-ask-input,
.hc-ask-floating .hc-followup {
  font-family: inherit;
}

/* The launcher: a black ball (Andrea, 02.10.2026). Closed, it shows two
   speech bubbles with a question mark; open, a chevron pointing down. One
   turns into the other - the bubbles rotate away as the chevron rotates in -
   which is how Intercom's does it. Its label lives in aria-label. */
.hc-ask-floating .hc-ask-launcher {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  font-size: 0;
  transition: transform .15s ease;
}

.hc-ask-floating .hc-ask-launcher:hover {
  transform: scale(1.06);
}

.hc-launcher-chat,
.hc-launcher-chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}

.hc-launcher-chat {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}

.hc-launcher-chevron {
  margin: -12px 0 0 -12px;
  opacity: 0;
  transform: rotate(-90deg) scale(.4);
}

.hc-ask-launcher[aria-expanded="true"] .hc-launcher-chat {
  opacity: 0;
  transform: rotate(90deg) scale(.4);
}

.hc-ask-launcher[aria-expanded="true"] .hc-launcher-chevron {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hc-ask-floating .hc-ask-launcher,
  .hc-launcher-chat,
  .hc-launcher-chevron {
    transition: none;
  }
}

/* On a phone the composer stays one line - a pill with the field stacked over
   its button is not a pill - and the panel leaves room for the launcher above
   the screen's top edge, which it used to overrun by a few pixels. */
.hc-ask-floating .hc-ask-form {
  flex-direction: row;
}

.hc-ask-floating .hc-ask-input {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 767px) {
  .hc-ask-floating .hc-ask-body {
    height: calc(100vh - 102px);
  }
}

/* What lets a short exchange scroll its question to the top of the panel: its
   height is set by help-assistant.js, and it holds nothing. */
.hc-thread-spacer {
  flex: 0 0 auto;
  width: 100%;
  height: 0;
  pointer-events: none;
}

/* Opening, loading, closing (JB-3647).

   The panel grows out of the launcher's corner while it fades in. The first
   time, a skeleton of a conversation shimmers where the thread will be; when
   the thread is ready the skeleton fades and the rows fade in. */
.hc-ask-floating .hc-ask-body {
  position: relative;
  transform-origin: 100% 100%;
}

.hc-ask-floating .hc-ask-body.hc-opening {
  animation: hc-panel-open .32s cubic-bezier(.2, .8, .2, 1) both;
}

.hc-ask-floating .hc-ask-body.hc-closing {
  animation: hc-panel-close .17s ease-in both;
}

@keyframes hc-panel-open {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: none; }
}

@keyframes hc-panel-close {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(.7); }
}

.hc-ask-floating .hc-ask-thread > *,
.hc-ask-floating .hc-ask-chips {
  transition: opacity .35s ease;
}

/* Gone at once, back with a fade: the transition belongs to the way out of
   loading only, or the thread would be seen fading away under the skeleton. */
.hc-ask-floating .hc-loading .hc-ask-thread > *,
.hc-ask-floating .hc-loading .hc-ask-chips {
  opacity: 0;
  transition: none;
}

.hc-skeleton {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 18px;
  opacity: 1;
  pointer-events: none;
  transition: opacity .28s ease;
}

.hc-skeleton-out {
  opacity: 0;
}

.hc-skeleton span {
  height: 52px;
  border-radius: 20px;
  background: linear-gradient(90deg, #f3f3f3 20%, #e6e6e8 50%, #f3f3f3 80%);
  background-size: 220% 100%;
  animation: hc-shimmer 1.15s linear infinite;
}

.hc-skeleton .hc-skeleton-wide { width: 82%; height: 76px; }
.hc-skeleton .hc-skeleton-mid { width: 60%; }
.hc-skeleton .hc-skeleton-you { align-self: flex-end; width: 44%; height: 44px; border-radius: 22px; }

@keyframes hc-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-ask-floating .hc-ask-body.hc-opening,
  .hc-ask-floating .hc-ask-body.hc-closing,
  .hc-skeleton span {
    animation: none;
  }
}

/* The red dot on the launcher (JB-3647, Andrea 02.10.2026), as Intercom's has:
   there is something here to look at. It sits on the ball's edge at two
   o'clock, with a white ring so it reads on any page behind it, and it goes
   once the reader has opened the panel - for the rest of the tab, so it does
   not come back on every page. */
.hc-ask-floating .hc-ask-launcher::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #df2020;
  box-shadow: 0 0 0 2px #fff;
  transition: opacity .2s ease, transform .2s ease;
}

.hc-seen .hc-ask-launcher::after,
.hc-ask-floating .hc-ask-launcher[aria-expanded="true"]::after {
  opacity: 0;
  transform: scale(0);
}

/* The welcome bubble over the launcher (JB-3647): white, soft shadow, three or
   four lines of text - the width is what sets the line count. */
.hc-ask-teaser {
  position: relative;
  max-width: 250px;
  margin: 0 0 12px;
  padding: 14px 34px 14px 16px;
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .18);
  animation: hc-teaser-in .4s cubic-bezier(.2, .8, .2, 1) both;
  transform-origin: 100% 100%;
}

.hc-ask-teaser[hidden] {
  display: none;
}

.hc-ask-teaser-text {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: #1a1a1a;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.hc-ask-teaser-close {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: #8a8a8e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.hc-ask-teaser-close:hover {
  color: #1a1a1a;
}

@keyframes hc-teaser-in {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-ask-teaser {
    animation: none;
  }
}

/* Where Chatbase's bubble is in production (JB-3647, Andrea 02.10.2026): 16px
   from the right and from the bottom, measured on jwguest.com. This panel is
   taking that bubble's place, so it takes its position too - on a phone as
   well.

   Two launchers cannot share a corner. Chatbase's is injected by GTM and is
   not ours to remove from the page, so it is hidden - only on pages where this
   launcher is actually shown: every page on a desktop, the homepage on a
   phone. Where this one is absent, Chatbase is left alone. */
.hc-ask-floating {
  right: 16px;
  bottom: 16px;
}

@media (max-width: 767px) {
  .hc-ask-floating {
    right: 16px;
    bottom: 16px;
  }

  body:has(.hc-ask-on-phone) #chatbase-bubble-button,
  body:has(.hc-ask-on-phone) #chatbase-bubble-window,
  body:has(.hc-ask-on-phone) #chatbase-message-bubbles {
    display: none !important;
  }
}

@media (min-width: 768px) {
  body:has(.hc-ask-anywhere) #chatbase-bubble-button,
  body:has(.hc-ask-anywhere) #chatbase-bubble-window,
  body:has(.hc-ask-anywhere) #chatbase-message-bubbles {
    display: none !important;
  }
}

/* The widget's dark is the homepage's own (JB-3647, Andrea 02.10.2026): the
   #333 of the "Browse stays on the map" button, black on hover as that button
   is - on the launcher ball, the reader's bubble and the two send buttons. */
.hc-ask-floating .hc-ask-launcher {
  background: #333;
}

.hc-ask-floating .hc-ask-launcher:hover {
  background: #000;
}

.hc-ask-floating .hc-msg-you .hc-msg-p,
.hc-ask-floating .hc-ask-form.hc-has-text .hc-ask-btn,
.hc-ask-floating .hc-person-send {
  background: #333;
}

.hc-ask-floating .hc-ask-form.hc-has-text .hc-ask-btn:hover,
.hc-ask-floating .hc-person-send:hover,
.hc-ask-floating .hc-person-send:focus {
  background: #000;
}

/* Intercom's own launcher size (JB-3647, Andrea 02.10.2026): 48px, measured on
   his screenshots of intercom.com against the messenger's 400px width - ours
   was 60. Icons and the red dot shrink in proportion (8px dot, on the edge at
   two o'clock); the white ring around the dot stays. */
.hc-ask-floating .hc-ask-launcher {
  width: 48px;
  height: 48px;
}

.hc-launcher-chat {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

.hc-launcher-chevron {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}

.hc-ask-floating .hc-ask-launcher::after {
  top: 6px;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 1.5px #fff;
}

/* One hover for everything that can be picked in the panel (JB-3647, Andrea
   02.10.2026): the grey "Talk to a person" turns - on the suggested questions,
   the opening ones, and the Help Center block, which is a container of links
   rather than a link and so had no hover of its own. */
.hc-ask-floating .hc-followup:hover,
.hc-ask-floating .hc-followup:focus-visible,
.hc-ask-floating .hc-ask-chip:hover,
.hc-ask-floating .hc-ask-chip:focus-visible,
.hc-ask-floating .hc-card-help:hover {
  border-color: #cfcfd3;
  background: #f7f7f7;
  color: #1a1a1a;
}

.hc-ask-floating .hc-followup,
.hc-ask-floating .hc-ask-chip,
.hc-ask-floating .hc-card {
  transition: background-color .15s ease, border-color .15s ease;
}

/* The launcher 20% larger (JB-3647, Andrea 02.10.2026): 58px from Intercom's
   48, icons and red dot with it. */
.hc-ask-floating .hc-ask-launcher {
  width: 58px;
  height: 58px;
}

.hc-launcher-chat {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}

.hc-launcher-chevron {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
}

.hc-ask-floating .hc-ask-launcher::after {
  top: 7px;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px #fff;
}

/* On a phone the open panel is the whole screen, as Intercom's messenger is
   (JB-3647, Andrea 03.10.2026): edge to edge, no rounded corners, above the
   site header, with the launcher out of the way - the header's close button
   is how it shuts. `dvh` follows the browser's own bars as they slide in and
   out; `vh` is the fallback for a browser that does not know it. The page
   underneath is held still, or a finger scrolling the thread would move it. */
@media (max-width: 767px) {
  .hc-ask-floating.hc-open {
    /* Measured on jwguest.com at 390px: the header bar with the logo is at
       9999 and was drawn over the panel; the menus that slide in are at
       99999, the flash messages at 100000, the cookie banner at 99999998.
       Open, the panel goes above the first three and stays under the banner,
       which must remain reachable. */
    z-index: 9000000;
  }

  .hc-ask-floating.hc-open .hc-ask-body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hc-ask-floating.hc-open .hc-ask-launcher,
  .hc-ask-floating.hc-open .hc-ask-teaser {
    display: none;
  }

  .hc-ask-floating.hc-open .hc-ask-head {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .hc-ask-floating.hc-open .hc-ask-note {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* A close button big enough for a thumb. */
  .hc-ask-floating.hc-open .hc-ask-close {
    padding: 6px 10px;
    font-size: 32px;
  }

  html.hc-ask-lock,
  html.hc-ask-lock body {
    overflow: hidden;
  }

  /* With the keyboard up, help-assistant.js sets the panel's top and height
     from the visual viewport; the thread then keeps its own scrolling to
     itself, so reaching its end does not tug at the page behind. */
  .hc-ask-floating.hc-open .hc-ask-thread {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The opening animation scales the panel from its corner: on a full screen
     that reads as the page jumping. Here it only fades. */
  .hc-ask-floating.hc-open .hc-ask-body.hc-opening {
    animation: hc-panel-fade .2s ease both;
  }

  .hc-ask-floating.hc-open .hc-ask-body.hc-closing {
    animation: hc-panel-fade .15s ease reverse both;
  }
}

@keyframes hc-panel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The composer is a textarea (JB-3647): it grows with the question, up to
   about five lines, then scrolls. On a phone it starts at two lines, so the
   reader sees what they are writing rather than its last few words. */
.hc-ask-body textarea.hc-ask-input {
  display: block;
  /* border-box, or setting the height to scrollHeight (which counts the
     padding) adds the padding again on every keystroke. */
  box-sizing: border-box;
  min-height: 42px;
  max-height: 132px;
  padding: 9px 0;
  border: 0;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
  line-height: 1.4;
  box-shadow: none;
}

.hc-ask-floating .hc-ask-form {
  align-items: flex-end;
}

@media (max-width: 767px) {
  .hc-ask-floating.hc-open .hc-ask-body textarea.hc-ask-input {
    min-height: 62px;
    padding: 8px 0;
  }

  .hc-ask-floating.hc-open .hc-ask-form,
  .hc-ask-floating.hc-open .hc-ask-form:focus-within {
    padding: 10px 10px 10px 18px;
  }

  /* Pinned to the panel's bottom edge and opaque: nothing of the page can
     show between the field and the keyboard. */
  .hc-ask-floating.hc-open .hc-ask-body {
    background: #fff;
    overscroll-behavior: contain;
  }
}