/*
 * The public chat.
 *
 * Two layouts from one set of markup:
 *
 *  .asj-chat--full   the page IS the chat. Own template, no theme header or
 *                    footer, theme stylesheets dequeued. Conversation fills the
 *                    screen, the box to type in is pinned to the bottom, and
 *                    everything lines up on one 1380px column.
 *  .asj-chat         inside the theme, as a box. The fallback when full-page
 *                    mode is switched off in Settings.
 *
 * Everything is scoped to .asj-chat. Buttons and inputs are written at two
 * classes of specificity on purpose: Hello Elementor styles bare `button` and
 * `[type=button]` in #CC3366 magenta, including on :hover and :focus, and at one
 * class the theme won -- the suggestion chips and Send came out pink.
 */

.asj-chat {
  --asj-brand: #80C33D;
  --asj-brand-ink: #4E7D20;
  --asj-ink: #1D2530;
  --asj-muted: #5A6472;
  --asj-rule: #E4E9F0;
  --asj-field: #CDD5DF;
  --asj-soft: #F4F6F9;
  --asj-navy: #26364E;
  --asj-navy-deep: #1A2638;
  --asj-focus: #4E7D20;

  --asj-width: 1380px;
  --asj-gutter: clamp(1rem, 3vw, 2rem);
  /* Side padding that centres a 1380px column but never drops below the
     gutter. Resolved where it is used, so 100% is that element's full width
     and the scrollbar stays at the edge of the window, not of the column. */
  --asj-inline: max(var(--asj-gutter), calc((100% - var(--asj-width)) / 2));

  color: var(--asj-ink);
}

.asj-chat *,
.asj-chat *::before,
.asj-chat *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- the page --- */

body.asj-chat-body {
  margin: 0;
  background: #fff;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
 * Exactly one screen tall, minus the admin bar when it is there. WordPress
 * pushes the document down with a margin on <html> and publishes the height as
 * a custom property, so the maths uses that rather than guessing 32px -- it is
 * 46px on a phone.
 */
.asj-chat--full .asj-chat-app {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.asj-chat:not(.asj-chat--full) {
  max-width: var(--asj-width);
  margin: 0 auto;
}
.asj-chat:not(.asj-chat--full) .asj-chat-app {
  border: 1px solid var(--asj-rule);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* ------------------------------------------------------------------ top --- */

/* Wraps, so two buttons beside a long disclosure line drop underneath it on a
   narrower window instead of pushing the page sideways. */
.asj-chat-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  background: #fff;
}
.asj-chat-top-text {
  flex: 1 1 22rem;
  min-width: 0;
}
.asj-chat--full .asj-chat-top {
  flex: none;
  padding: 1rem var(--asj-inline);
  border-bottom: 1px solid var(--asj-rule);
}
.asj-chat:not(.asj-chat--full) .asj-chat-top {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--asj-rule);
}

.asj-chat-title {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--asj-navy);
  margin: 0 0 .25rem;
}

/* The AI disclosure. It is the sentence doing the compliance work on this
   page, so it stays at the top of the screen and at a readable size -- never
   fine print. */
.asj-chat-sub {
  margin: 0;
  color: var(--asj-muted);
  font-size: .95rem;
  line-height: 1.5;
}
.asj-chat-sub strong {
  color: var(--asj-ink);
  font-weight: 600;
}

.asj-chat .asj-chat-call {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.05rem;
  border: 1px solid var(--asj-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--asj-navy);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.asj-chat .asj-chat-call svg { color: var(--asj-brand-ink); flex: none; }
.asj-chat .asj-chat-call:hover {
  border-color: var(--asj-brand);
  background: var(--asj-soft);
  color: var(--asj-navy);
}
.asj-chat .asj-chat-call:focus-visible {
  outline: 2px solid var(--asj-focus);
  outline-offset: 2px;
}
.asj-chat-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Booking sits beside the phone number as an equal, quiet option. It used to be
   the one filled button on the screen -- and the loudest thing on a page whose
   whole point is not to push anybody toward a call. */

.asj-chat-call-num {
  color: var(--asj-muted);
  font-weight: 400;
}

/* ---------------------------------------------------------------- notes --- */

.asj-chat-note {
  font-size: .88rem;
  line-height: 1.5;
}
.asj-chat-note p { margin: 0; }

/* "Only you can see this" -- a strip, not a card, so it costs one line of the
   screen the conversation needs. Amber because it is a warning about state,
   not a message from the brand. */
.asj-chat-note {
  flex: none;
  background: #FFF8E5;
  color: #5C4700;
  border-bottom: 1px solid #F0E2B6;
  padding: .55rem 1.1rem;
}
.asj-chat--full .asj-chat-note { padding: .55rem var(--asj-inline); }

.asj-chat-closed {
  color: var(--asj-muted);
  line-height: 1.6;
  padding: 2rem 1.1rem;
}
.asj-chat-closed p { margin: 0; }
.asj-chat--full .asj-chat-closed {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem var(--asj-inline);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------------ log --- */

/*
 * Messages sit on the floor of the log and stack upward, the way every chat
 * anybody has used works. Pinned to the top, two messages leave an acre of
 * white under them and the conversation reads as a page with a gap below it.
 *
 * Done with an auto margin on the first child rather than justify-content:
 * flex-end, which looks the same until the log overflows and then puts the
 * oldest messages out of reach above the scroll.
 */
.asj-chat-log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: #fff;
}
.asj-chat-log > *:first-child { margin-top: auto; }
.asj-chat--full .asj-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.75rem var(--asj-inline) 1rem;
}
/* In the theme the log has a height of its own, so the box to type in does not
   walk off the bottom of a phone as the conversation grows. */
.asj-chat:not(.asj-chat--full) .asj-chat-log {
  height: clamp(18rem, 46vh, 26rem);
  padding: 1.1rem 1.1rem .4rem;
}
.asj-chat-log:focus-visible {
  outline: 2px solid var(--asj-focus);
  outline-offset: -2px;
}

/*
 * Bubbles shrink to what they say. At 1380px wide a bubble that fills its row
 * is a line of 180 characters nobody can read back, so they stop at a width a
 * person can -- the column is wide, the lines are not.
 */
.asj-chat-msg {
  width: fit-content;
  max-width: min(82%, 860px);
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.asj-chat-msg.is-me { margin-left: auto; align-self: flex-end; }

.asj-chat-msg p { margin: 0; }
.asj-chat-msg p + p { margin-top: .4rem; }

.asj-chat-msg.is-bot p {
  background: var(--asj-soft);
  color: var(--asj-ink);
  padding: .75rem 1rem;
  border-radius: 16px 16px 16px 4px;
}
.asj-chat-msg.is-me p {
  background: var(--asj-navy);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: 16px 16px 4px 16px;
}

/*
 * The legal line, as fine print rather than as something Mike said.
 *
 * In a bubble it has the same weight as the answer and the question, which is
 * three things shouting at once and the question losing. Fixed wording nobody
 * reads word by word belongs in the margin: no bubble, no background, small
 * and quiet, tucked under the message it qualifies.
 */
.asj-chat-msg.is-fine {
  max-width: min(92%, 860px);
  margin-top: -.6rem;
}
.asj-chat-msg.is-fine p {
  padding: 0 0 0 .25rem;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--asj-muted);
  background: none;
  border-radius: 0;
}

/* A link the assistant hands over is the point of the whole conversation, so
   it is the one place colour is spent. */
.asj-chat .asj-chat-msg a {
  color: var(--asj-brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.asj-chat .asj-chat-msg.is-me a { color: #CFE8AC; }

/* Three dots, because a blank pause reads as broken. */
.asj-chat-typing p {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.asj-chat-typing span:not(.asj-chat-label) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--asj-muted);
  opacity: .4;
  animation: asj-blink 1.2s infinite ease-in-out;
}
.asj-chat-typing span:nth-child(2) { animation-delay: .18s; }
.asj-chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes asj-blink {
  0%, 60%, 100% { opacity: .25; }
  30%           { opacity: .9; }
}

/* ----------------------------------------------------------------- dock --- */

.asj-chat-dock { background: #fff; }
.asj-chat--full .asj-chat-dock {
  flex: none;
  border-top: 1px solid var(--asj-rule);
  padding: .9rem var(--asj-inline) calc(.8rem + env(safe-area-inset-bottom, 0px));
}
.asj-chat:not(.asj-chat--full) .asj-chat-dock {
  border-top: 1px solid var(--asj-rule);
  padding: .9rem 1.1rem 1rem;
}

.asj-chat-starters { margin: 0 0 .75rem; }
.asj-chat-starters-label {
  display: block;
  font-size: .8rem;
  color: var(--asj-muted);
  margin-bottom: .45rem;
}
.asj-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.asj-chat .asj-chat-chip {
  font: inherit;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--asj-ink);
  background: #fff;
  border: 1px solid var(--asj-rule);
  border-radius: 999px;
  box-shadow: none;
  margin: 0;
  padding: .5rem .95rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.asj-chat .asj-chat-chip:hover,
.asj-chat .asj-chat-chip:focus {
  color: var(--asj-ink);
  background: var(--asj-soft);
  border-color: var(--asj-brand);
}
.asj-chat .asj-chat-chip:focus-visible {
  outline: 2px solid var(--asj-focus);
  outline-offset: 2px;
}

.asj-chat-form { margin: 0; }

/* Visually hidden, not display:none -- a screen reader still reads it, and an
   input with no label is the most common way a form locks somebody out. */
.asj-chat .asj-chat-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.asj-chat-row {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
}

.asj-chat .asj-chat-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  font: inherit;
  /* 16px minimum or iOS Safari zooms the whole page on focus. */
  font-size: max(1rem, 16px);
  line-height: 1.45;
  color: var(--asj-ink);
  background: #fff;
  border: 1px solid var(--asj-field);
  border-radius: 12px;
  box-shadow: none;
  padding: .75rem .95rem;
  resize: none;
  max-height: 8rem;
  overflow-y: auto;
}
.asj-chat .asj-chat-input:focus {
  border-color: var(--asj-focus);
  outline: none;
}
.asj-chat .asj-chat-input:focus-visible {
  outline: 2px solid var(--asj-focus);
  outline-offset: 1px;
}
.asj-chat .asj-chat-input::placeholder { color: #8A94A1; }

.asj-chat .asj-chat-send {
  flex: none;
  margin: 0;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  background: var(--asj-navy);
  border: 1px solid var(--asj-navy);
  border-radius: 12px;
  box-shadow: none;
  /* As tall as a one-line box, and a target a thumb can hit. */
  min-height: 48px;
  padding: .6rem 1.4rem;
  cursor: pointer;
  transition: background .15s ease;
}
.asj-chat .asj-chat-send:hover:not(:disabled),
.asj-chat .asj-chat-send:focus:not(:disabled) {
  color: #fff;
  background: var(--asj-navy-deep);
  border-color: var(--asj-navy-deep);
}
.asj-chat .asj-chat-send:focus-visible {
  outline: 2px solid var(--asj-focus);
  outline-offset: 2px;
}
.asj-chat .asj-chat-send:disabled {
  opacity: .45;
  cursor: default;
}

.asj-chat-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1.5rem;
  margin-top: .6rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--asj-muted);
}
.asj-chat-meta p { margin: 0; }
.asj-chat .asj-chat-fine a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asj-chat .asj-chat-fine a:hover { color: var(--asj-brand-ink); }

.asj-chat-status {
  margin: .4rem 0 0;
  font-size: .85rem;
  color: var(--asj-muted);
}
.asj-chat-status:empty { margin: 0; }

/* ----------------------------------------------------------- disclosure --- */

/*
 * Required, not decorative -- Equal Housing, both NMLS numbers, the licensed
 * states and Fairway's advertising verbiage. Full page, it sits directly under
 * the screen-tall chat, and the line under the box to type in keeps the lender,
 * both NMLS numbers and Equal Housing on screen the whole time with a link down
 * to this. It is small because it is long, never because it is optional. Do not
 * trim it to fit a layout.
 */
.asj-chat-legal { scroll-margin-top: var(--wp-admin--admin-bar--height, 0px); }
.asj-chat--full .asj-chat-legal {
  background: var(--asj-soft);
  border-top: 1px solid var(--asj-rule);
  padding: 2rem var(--asj-inline) 2.5rem;
}
.asj-chat--full .asj-chat-legal .asj-qa-rule { display: none; }

.asj-chat .asj-qa-rule {
  border: 0;
  border-top: 1px solid var(--asj-rule);
  margin: 2rem 0 1.2rem;
}
.asj-chat .asj-qa-disclosure {
  max-width: 60rem;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--asj-muted);
}
.asj-chat .asj-qa-disclosure p { margin: 0 0 .7em; }
.asj-chat .asj-qa-disclosure p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
  .asj-chat-log { scroll-behavior: auto; }
  .asj-chat-typing span:not(.asj-chat-label) { animation: none; opacity: .5; }
}

/* --------------------------------------------------------------- phones --- */

@media (max-width: 640px) {
  .asj-chat--full .asj-chat-top {
    padding-top: .7rem;
    padding-bottom: .7rem;
    gap: .75rem;
  }
  .asj-chat-sub { font-size: .82rem; }
  .asj-chat-call-num { display: none; }
  .asj-chat-call-label-long { display: none; }
  .asj-chat .asj-chat-call { padding: .45rem .85rem; }

  .asj-chat--full .asj-chat-log { padding-top: 1rem; }
  .asj-chat-msg { max-width: 90%; }

  /* One swipeable row of suggestions instead of four stacked lines, so the
     conversation keeps the screen. */
  .asj-chat--full .asj-chat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--asj-gutter) * -1);
    padding-inline: var(--asj-gutter);
  }
  .asj-chat--full .asj-chat-chips::-webkit-scrollbar { display: none; }
  .asj-chat--full .asj-chat-chip { flex: none; white-space: nowrap; }

  .asj-chat-meta { flex-direction: column; }
}

/* ------------------------------------------------------------ test mode --- */

/*
 * Only people with the journal ever see these: rating a reply and writing a
 * better one. Small and quiet, so a test conversation still reads like the
 * real thing. Every control resets what a theme's button styles might add,
 * because on the live site something always does.
 */
/*
 * The rating row, under the box to type in. Hidden for everyone but the
 * officer, which is to say hidden, because the slot is empty until the JS
 * has a reply to rate and a session allowed to rate it.
 */
.asj-chat-rate-slot:empty { display: none; }
.asj-chat-rate-slot { margin: .5rem 0 0; }

.asj-chat .asj-chat-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.2;
  color: var(--asj-muted);
}
.asj-chat .asj-chat-rate-label {
  margin: 0 .25rem 0 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A6A10;
}

.asj-chat .asj-chat-rate button,
.asj-chat .asj-chat-rate-form button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* The label is still in the button, it is just not on it. */
.asj-chat .asj-chat-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.asj-chat .asj-chat-rate button.is-icon {
  gap: 0;
  padding: .3125rem;
  width: 1.75rem;
  height: 1.75rem;
}

.asj-chat .asj-chat-rate-icon {
  display: inline-flex;
  flex: none;
  width: 14px;
  height: 14px;
}
.asj-chat .asj-chat-rate-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  max-width: none;
}

.asj-chat .asj-chat-rate-btn {
  padding: .3125rem .75rem .3125rem .625rem;
  color: var(--asj-ink);
  background: #fff;
  border: 1px solid var(--asj-rule);
}
.asj-chat .asj-chat-rate-btn:hover {
  color: var(--asj-ink);
  background: var(--asj-soft);
  border-color: var(--asj-field);
}
.asj-chat .asj-chat-rate-btn.is-up[aria-pressed="true"] {
  color: #2F5A12;
  background: #EEF6E6;
  border-color: #9BCB6B;
}
.asj-chat .asj-chat-rate-btn.is-down[aria-pressed="true"] {
  color: #8A2E0E;
  background: #FDF0E8;
  border-color: #EDB08F;
}
.asj-chat .asj-chat-rate-link {
  padding: .3125rem .625rem;
  color: var(--asj-muted);
  background: transparent;
  border: 1px solid transparent;
}
.asj-chat .asj-chat-rate-link:hover,
.asj-chat .asj-chat-rate-link[aria-expanded="true"] {
  color: var(--asj-ink);
  background: var(--asj-soft);
}
.asj-chat .asj-chat-rate-status {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .25rem;
  font-size: .75rem;
  color: var(--asj-brand-ink);
}
.asj-chat .asj-chat-rate-status:empty { display: none; }
.asj-chat .asj-chat-rate-status.is-error { color: #A12C1B; }
.asj-chat .asj-chat-rate-status .asj-chat-rate-icon,
.asj-chat .asj-chat-rate-status .asj-chat-rate-icon svg { width: 12px; height: 12px; }

/* The better-response form */
.asj-chat .asj-chat-rate-form {
  box-sizing: border-box;
  max-width: 40rem;
  margin: .5rem 0 0;
  padding: .875rem 1rem 1rem;
  background: #fff;
  border: 1px solid var(--asj-rule);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(29, 37, 48, .05);
}
.asj-chat .asj-chat-rate-form label {
  display: block;
  margin: 0 0 .375rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--asj-ink);
}
.asj-chat .asj-chat-rate-form label.is-quiet {
  margin-top: .75rem;
  font-weight: 500;
  color: var(--asj-muted);
}
.asj-chat .asj-chat-rate-form textarea,
.asj-chat .asj-chat-rate-form input[type="text"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: .625rem .75rem;
  font: inherit;
  font-size: max(.9375rem, 16px);
  line-height: 1.45;
  color: var(--asj-ink);
  background: #fff;
  border: 1px solid var(--asj-field);
  border-radius: 8px;
  box-shadow: none;
}
.asj-chat .asj-chat-rate-form textarea { min-height: 6rem; resize: vertical; }
.asj-chat .asj-chat-rate-form textarea:focus,
.asj-chat .asj-chat-rate-form input[type="text"]:focus {
  outline: none;
  border-color: var(--asj-focus);
  box-shadow: 0 0 0 3px rgba(78, 125, 32, .18);
}
.asj-chat .asj-chat-rate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .875rem 0 0;
}
.asj-chat .asj-chat-rate-save {
  padding: .5rem 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--asj-navy);
  border: 1px solid var(--asj-navy);
}
.asj-chat .asj-chat-rate-save:hover { color: #fff; background: var(--asj-navy-deep); border-color: var(--asj-navy-deep); }
.asj-chat .asj-chat-rate-save:disabled { opacity: .6; cursor: default; }
.asj-chat .asj-chat-rate-mic {
  padding: .5rem .875rem;
  color: var(--asj-ink);
  background: #fff;
  border: 1px solid var(--asj-rule);
}
.asj-chat .asj-chat-rate-mic:hover { color: var(--asj-ink); background: var(--asj-soft); border-color: var(--asj-field); }
.asj-chat .asj-chat-rate-mic[aria-pressed="true"] { color: #A12C1B; background: #FDF0E8; border-color: #EDB08F; }
.asj-chat .asj-chat-rate-cancel {
  padding: .5rem .625rem;
  color: var(--asj-muted);
  background: transparent;
  border: 1px solid transparent;
}
.asj-chat .asj-chat-rate-cancel:hover { color: var(--asj-ink); background: var(--asj-soft); }
.asj-chat .asj-chat-rate-hint {
  margin: .625rem 0 0;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--asj-muted);
}

.asj-chat .asj-chat-rate button:focus-visible,
.asj-chat .asj-chat-rate-form button:focus-visible {
  outline: 2px solid var(--asj-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .asj-chat .asj-chat-rate button,
  .asj-chat .asj-chat-rate-form button { transition: none; }
}

/* Test mode: why a reply failed, shown only to people with the journal.
   Selectors carry .is-bot p so the speech-bubble style above does not win. */
.asj-chat .asj-chat-msg.is-bot p.asj-chat-debug {
  margin: .5rem 0 0;
  padding: .5rem .75rem;
  font-size: .78rem;
  line-height: 1.4;
  color: #7A2E0E;
  background: #FEF3E7;
  border-left: 3px solid #D97706;
  border-radius: 0 8px 8px 0;
}

/* ==========================================================================
 * Ask triggers, planted in article content
 *
 * The only rules in this file that are NOT scoped to .asj-chat, because these
 * live out in the post body wherever the writer put them. `.asj-ask` is
 * namespaced, so nothing else can collide with it.
 *
 * Styled as an obvious, tappable question rather than a link. It is competing
 * with the article around it for a press, and a blue underline loses.
 * ======================================================================= */
.asj-ask {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .15rem 0;
  padding: .6rem 1rem .6rem .8rem;
  font: inherit;
  font-size: .95em;
  line-height: 1.4;
  text-align: left;
  color: #293A51;
  background: #fff;
  border: 1px solid #80C33D;
  border-radius: 2rem;
  box-shadow: 0 1px 2px rgba(41, 58, 81, .06);
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.asj-ask:hover,
.asj-ask:focus-visible {
  background: #f4faec;
  box-shadow: 0 3px 10px rgba(41, 58, 81, .12);
}
.asj-ask:active { transform: translateY(1px); }
.asj-ask:focus-visible { outline: 2px solid #293A51; outline-offset: 2px; }

.asj-ask-mark {
  display: inline-flex;
  flex: none;
  color: #80C33D;
}
.asj-ask-q { font-weight: 500; }

/* A question standing on its own gets room around it. */
p > .asj-ask:only-child { margin: .4rem 0; }

/* Switched off, or no chat on the page: it is just a sentence again. */
.asj-ask-plain { font-style: italic; }
.asj-ask-plain--inline { font-style: normal; }

/* The inline variant: part of the article's sentence, underlined in green,
   with an arrow -- it reads as prose and presses as a question. */
.asj-ask.asj-ask--inline {
  display: inline;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: #293A51;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: linear-gradient(#80C33D, #80C33D);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.asj-ask.asj-ask--inline:hover,
.asj-ask.asj-ask--inline:focus-visible { background-color: #f4faec; box-shadow: none; }
.asj-ask--inline .asj-ask-go { color: #6aa92f; font-weight: 600; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .asj-ask { transition: none; }
}