@charset "UTF-8";
/*
 * The chat launcher's typed nudge, and the header room it needed.
 *
 * SOURCE, NOT OUTPUT. This file is compiled to `assets/css/chat-launcher.css`
 * and that CSS is what the theme enqueues — the same relationship
 * `style.scss` has with `style.css` and `assets/scss/modules/*.scss` with
 * their own `.css` files:
 *
 *   sass --style=expanded assets/scss/chat-launcher.scss assets/css/chat-launcher.css
 *
 * Enqueued by `inc/functions/chat-mode.php` together with
 * `assets/js/chat-launcher-typing.js`, which is what writes the text.
 *
 * WHY THIS IS ITS OWN STYLESHEET rather than a few rules in
 * `assets/css/theme-system.css` or `layout/headerMob/_quick-access.scss`:
 * theme-system.css is a shipped, hand-written file with no SCSS source, so
 * anything added there exists in one place only and in the wrong language;
 * and the header partial is compiled into every route stylesheet in
 * `lib/`, so a one-rule change there would have to be recompiled across
 * dozens of committed bundles. This file is one source, one output, and
 * loads after both.
 */
/* ---------------------------------------------------------------------------
 * The header's inline-start group: the search button and the light/dark
 * switch, which used to sit apart with the launcher between them.
 *
 * Declared here because this is the change that moved them: the launcher's
 * message needs the room the switch was occupying, so the switch joins the
 * other control that acts on the page you are already on.
 * ------------------------------------------------------------------------- */
.header-start-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * The launcher and the bubble beside it.
 *
 * THE PILL GROWS WITH ITS TEXT — the same behaviour as the desktop tooltip.
 * `inline-size: auto` makes the box exactly as wide as the sentence, so the
 * visitor watches it fill in instead of watching letters appear inside a box
 * that was already full size.
 *
 * It grows to the right, away from the launcher, because the box is anchored
 * by its inline-end edge (`inset-inline-end`): the room on the other side of a
 * 28px button is 36px.
 *
 * The ceiling is the header's own arithmetic, and it is MEASURED on the live
 * mobile header rather than derived from a harness: the container's inline
 * padding is 12px, the launcher is 28px and the gap 8px, so the pill's near
 * edge sits 48px from the viewport edge — and the centred logo's near edge is
 * half the viewport minus its 15px half-width. What is left between them, less
 * the 4px of air the pill keeps off the brand mark, is `50vw - 67px`. A pill
 * that ran under the logo reads as broken; a shortened line on a 320px phone
 * merely reads as short. `11rem` is the ceiling on a tablet, where there is
 * room for any of the lines whole.
 *
 * `ellipsis` is the safety net for exactly that narrow case, not the plan:
 * every line in the list fits whole from 360px up.
 * ------------------------------------------------------------------------- */
.ts-chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Revealed by the typing runtime after 2s — the same beat, and the same
     class, the desktop tooltip reveals on. */
}
.ts-chat-launcher.show-tooltip .ts-chat-bubble {
  opacity: 1;
  visibility: visible;
}

.ts-chat-bubble {
  position: absolute;
  inset-block-start: 50%;
  /* `inline-end` is the LEFT edge in this RTL interface, so this lands the
     bubble on the launcher's right — the side the message reads from, and
     the room the light/dark switch used to occupy. */
  inset-inline-end: calc(100% + 8px);
  box-sizing: border-box;
  inline-size: auto;
  max-inline-size: min(11rem, 50vw - 67px);
  padding: 3px 9px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: linear-gradient(135deg, #002864, #12c4e3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 11px;
  font-variation-settings: "wght" 600;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/*# sourceMappingURL=chat-launcher.css.map */