/* Ask Emote widget styles. All widget classes carry the ae- prefix so nothing
   collides with site CSS. The Home band and Contact panel wrappers use the
   site's r-numbered module convention (r262-ask) and are styled here too, so
   the site stylesheet needs no changes. Colours match the site tokens:
   canvas #f6f4ee, ink #191919, mint #62d6b1. */

/* ------------------------------------------------------------ chat bubble */
.ae-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #191919;
  color: #f6f4ee;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 990;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  animation: ae-glow 10s ease-in-out infinite;
}
.ae-fab svg { width: 26px; height: 26px; }
.ae-fab:hover { background: #000; }
.ae-fab:focus-visible { outline: 2px solid #62d6b1; outline-offset: 3px; }
.ae-fab__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #62d6b1;
}
/* Official glow, option 2: soft teal pulse on a ten second cycle. */
@keyframes ae-glow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
  50% {
    box-shadow:
      0 0 0 7px rgba(98, 214, 177, 0.30),
      0 0 30px 12px rgba(98, 214, 177, 0.42),
      0 10px 30px rgba(0, 0, 0, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ae-fab { animation: none; }
}

/* ---------------------------------------------------------- FAB teaser --- */
.ae-teaser { display: none; }
@media (hover: hover) {
  .ae-teaser {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 991;
    display: block;
    padding: 14px 20px 15px;
    border-radius: 16px 16px 4px 16px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
    color: #191919;
    font-family: 'Apercu', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.94);
    transform-origin: 100% 100%;
    transition: opacity .3s ease, transform .34s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .34s;
  }
  .ae-teaser.ae-teaser--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .34s cubic-bezier(.22, .9, .3, 1);
  }
  .ae-teaser__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    color: #8a8578;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .ae-teaser__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #62d6b1;
  }
  .ae-teaser__body { position: relative; min-height: 19px; min-width: 148px; }
  .ae-teaser__typing,
  .ae-teaser__message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
  }
  .ae-teaser__typing { gap: 5px; }
  .ae-teaser__typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9c4b8;
    animation: ae-teaser-dot 1s ease-in-out infinite;
  }
  .ae-teaser__typing i:nth-child(2) { animation-delay: .15s; }
  .ae-teaser__typing i:nth-child(3) { animation-delay: .3s; }
  .ae-teaser__message {
    color: #191919;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 19px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .ae-teaser.ae-teaser--message .ae-teaser__typing { opacity: 0; }
  .ae-teaser.ae-teaser--message .ae-teaser__message { opacity: 1; transform: none; }
}
@keyframes ae-teaser-dot {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@media (max-width: 480px) {
  .ae-teaser { right: 16px; bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-teaser { transform: none; transition: opacity .15s ease, visibility 0s linear .15s; }
  .ae-teaser.ae-teaser--visible { transition: opacity .15s ease; }
  .ae-teaser__typing { display: none; }
  .ae-teaser__message { opacity: 1; transform: none; transition: none; }
}
html.mnav-open .ae-teaser,
body:has(.ae-panel.ae-on) .ae-teaser { display: none !important; }

/* ------------------------------------------------------------- chat panel */
.ae-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: min(392px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 130px));
  background: #f6f4ee;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 991;
  font-family: 'Apercu', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: #191919;
  font-size: 17px;
  line-height: 1.6;
}
.ae-panel.ae-on { display: flex; }

/* ---------------------------------------------------- iOS visual viewport --- */
/* The keyboard reduces the visual viewport rather than the layout viewport.
   When JS detects that reduction it makes the open compact panel fill only the
   available viewport, keeping the input row directly above the keyboard. */
body.ae-chat-open .ae-fab {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none;
}
@media (max-width: 600px) {
  html.ae-lock { overflow: hidden; }
  .ae-panel.ae-on {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }
  @supports (height: 100dvh) {
    .ae-panel.ae-on { height: 100dvh; }
  }
  .ae-panel.ae-on .ae-log { min-height: 0; }
  .ae-panel.ae-panel--vv,
  .ae-panel.ae-panel--vv-fallback {
    top: var(--ae-vv-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
  }
  .ae-panel.ae-panel--vv { height: var(--ae-vv-height); }
  .ae-panel.ae-panel--vv-fallback { height: 100vh; }
  @supports (height: 100dvh) {
    .ae-panel.ae-panel--vv-fallback { height: 100dvh; }
  }
  .ae-panel.ae-panel--vv .ae-log,
  .ae-panel.ae-panel--vv-fallback .ae-log { min-height: 0; }
}
.ae-head {
  background: #191919;
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ae-head__dot { width: 9px; height: 9px; border-radius: 50%; background: #62d6b1; flex: none; }
.ae-head b { font-size: 15.5px; font-weight: 700; display: block; }
.ae-head span { font-size: 12.5px; opacity: 0.7; display: block; }
.ae-head__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ae-head__close:hover { background: rgba(255, 255, 255, 0.12); }
.ae-head__close:focus-visible { outline: 2px solid #62d6b1; outline-offset: -2px; }

.ae-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 120px;
}
.ae-msg {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14.8px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.ae-msg--u { align-self: flex-end; background: #191919; color: #fff; border-bottom-right-radius: 6px; }
.ae-msg--a { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; }
.ae-src { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.ae-src__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(25, 25, 25, 0.55);
  margin-bottom: 2px;
}
.ae-src a {
  font-size: 12.5px;
  color: #191919;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(25, 25, 25, 0.3);
  padding: 3px 0;
}
.ae-src a:hover { text-decoration-color: #191919; }
.ae-suggest { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.ae-chip {
  font: inherit;
  font-size: 13px;
  border: 1px solid rgba(25, 25, 25, 0.3);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 40px;
  cursor: pointer;
  color: #191919;
  text-align: left;
}
.ae-chip:hover { background: #fff; }
.ae-chip:focus-visible { outline: 2px solid #191919; outline-offset: 2px; }

.ae-ctarow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ae-btn {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid #191919;
  background: #191919;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.ae-btn--ghost { background: transparent; color: #191919; }
.ae-btn:hover { opacity: 0.88; }
.ae-btn:focus-visible { outline: 2px solid #62d6b1; outline-offset: 2px; }

.ae-thinking { display: inline-block; }
.ae-thinking i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #191919;
  opacity: 0.35;
  margin-right: 5px;
  animation: ae-think 1s infinite;
  font-style: normal;
}
.ae-thinking i:nth-child(2) { animation-delay: 0.18s; }
.ae-thinking i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ae-think {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ae-thinking i { animation: none; }
}

.ae-in {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(25, 25, 25, 0.18);
  background: #f6f4ee;
}
.ae-in input {
  flex: 1;
  font: inherit;
  font-size: 16px;
  padding: 12px 16px;
  min-height: 44px;
  border: 1px solid rgba(25, 25, 25, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #191919;
  outline: none;
  min-width: 0;
}
.ae-in input:focus-visible { border-color: #191919; }
.ae-send {
  border: 0;
  background: #191919;
  color: #fff;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ae-send:hover { background: #000; }
.ae-send:focus-visible { outline: 2px solid #62d6b1; outline-offset: 2px; }
.ae-mic {
  border: 1px solid rgba(25, 25, 25, 0.25);
  background: #fff;
  color: #191919;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ae-mic:focus-visible { outline: 2px solid #191919; outline-offset: 2px; }
.ae-mic.ae-rec {
  background: #e25b4a;
  border-color: #e25b4a;
  color: #fff;
  animation: ae-micpulse 1.2s ease-in-out infinite;
}
@keyframes ae-micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 91, 74, 0.45); }
  50% { box-shadow: 0 0 0 10px rgba(226, 91, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ae-mic.ae-rec { animation: none; }
}

/* ----------------------------------------------- handoff note, Contact form */
.ae-note {
  font-size: 13.5px;
  color: rgba(25, 25, 25, 0.62);
  margin-top: 8px;
}

/* ------------------------------------------------------- Home band, r262-ask
   Uses the site's section and wrap layout classes. Panel styling lives here. */
/* R296: these four band instances sit on very long joined canvases. Their
   anchored, static wash supplies the same nearby teal blob presence Home gets
   from its compact canvas, without changing Home, Contact or the canvas flow. */
.r262-ask--ambient {
  isolation: isolate;
  overflow: hidden;
}
.r262-ask--ambient::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -22% -12%;
  background:
    radial-gradient(47% 88% at 17% 46%, rgba(98, 214, 177, 0.42) 0%, rgba(75, 184, 158, 0.25) 37%, rgba(25, 25, 25, 0) 72%),
    radial-gradient(34% 64% at 85% 82%, rgba(98, 214, 177, 0.22) 0%, rgba(25, 25, 25, 0) 72%);
  filter: blur(22px);
  pointer-events: none;
  transform: translateZ(0);
}
.r262-ask--ambient > .wrap {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .r262-ask--ambient::before { transform: none; }
}

.r262-ask__panel {
  background-color: #c0e5de;
  background-image: radial-gradient(120% 160% at 12% 0%, #e2f3ee 0%, #c0e5de 55%, #abdcd2 100%);
  border-radius: 30px;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.4vw, 48px);
}
.r262-ask__panel h2 {
  margin: 0 0 22px;
  max-width: 22ch;
}
.r262-ask__row { display: flex; gap: 12px; }
.r262-ask__field {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid rgba(25, 25, 25, 0.25);
  border-radius: 999px;
  background: #fff;
}
.r262-ask__row input {
  min-width: 0;
  flex: 1;
  font: inherit;
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  padding: 17px 12px 17px 24px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #191919;
  outline: none;
}
.r262-ask__field:focus-within { border-color: #191919; }
.r262-ask__mic { margin: 4px 6px 4px 0; }
.r262-ask__mic[hidden] { display: none; }
.r262-ask__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.r262-ask__chip {
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(25, 25, 25, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: #191919;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.3;
  text-align: left;
}
.r262-ask__chip:hover { background: #fff; }
.r262-ask__chip:focus-visible {
  outline: 2px solid #191919;
  outline-offset: 2px;
}
.r262-ask__answer {
  margin-top: 30px;
}
.r262-ask__answer-card {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
}
.r262-ask__question,
.r262-ask__sources__label {
  margin: 0;
  color: rgba(25, 25, 25, 0.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.r262-ask__copy {
  max-width: 62ch;
  margin-top: 12px;
  color: #191919;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  white-space: pre-wrap;
}
.r262-ask__sources {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.r262-ask__sources__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-top: 1px solid rgba(25, 25, 25, 0.16);
  color: #191919;
  text-decoration: none;
}
.r262-ask__sources__label + .r262-ask__sources__row {
  margin-top: 10px;
}
.r262-ask__sources__copy {
  min-width: 0;
}
.r262-ask__sources__copy strong,
.r262-ask__sources__path {
  display: block;
}
.r262-ask__sources__copy strong {
  font-size: 15.5px;
  line-height: 1.3;
}
.r262-ask__sources__path {
  overflow: hidden;
  margin-top: 3px;
  color: rgba(25, 25, 25, 0.62);
  font-size: 13.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r262-ask__sources__arrow {
  flex: 0 0 auto;
  opacity: 0.5;
  transition: transform 180ms ease;
}
.r262-ask__sources__row:hover .r262-ask__sources__arrow,
.r262-ask__sources__row:focus-visible .r262-ask__sources__arrow {
  transform: translateX(4px);
}
.r262-ask__sources__row:focus-visible {
  outline: 2px solid #191919;
  outline-offset: 3px;
}
.r262-ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.r262-ask__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid #191919;
  border-radius: 999px;
  background: #191919;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.r262-ask__action:hover { opacity: 0.88; }
.r262-ask__action:focus-visible {
  outline: 2px solid #191919;
  outline-offset: 2px;
}
.r262-ask__action--ghost {
  background: transparent;
  color: #191919;
}
.r262-ask__action[disabled] {
  cursor: default;
  opacity: 0.55;
}
.r262-ask__handoff {
  margin: 0;
  color: #191919;
  font-size: 14px;
  line-height: 1.5;
}
.ae-src__copy strong,
.ae-src__path {
  display: block;
}
.ae-src__path {
  margin-top: 3px;
  color: rgba(25, 25, 25, 0.62);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .r262-ask__row { flex-direction: column; }
  .r262-ask__field { width: 100%; }
  .r262-ask__row .btn { width: 100%; min-height: 48px; }
  .r262-ask__answer { margin-top: 22px; }
  .r262-ask__chips { gap: 8px; }
  .r262-ask__chip { font-size: 13.5px; }
  .r262-ask__sources__row { align-items: flex-start; }
}

/* ------------------------------------------------------------ small screens */
@media (max-width: 480px) {
  .ae-fab { right: 16px; bottom: 16px; }
  .ae-panel {
    right: 16px;
    bottom: 88px;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
  }
}

/* R296: the mobile menu is a full takeover. Hide every floating Ask Emote
   surface while it is open, then restore the existing widget state on close. */
@media (max-width: 1080px) {
  html.mnav-open .ae-fab,
  html.mnav-open .ae-panel {
    display: none !important;
  }
}

/* v101: voice status note. Hidden state stays in the accessibility tree so a
   later message is announced; shown state is a single helper line. */
.ae-voice-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ae-voice-note.is-on {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  flex: 1 0 100%;
  margin: 6px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: #6b6f76;
}
.ae-in { flex-wrap: wrap; }
.r262-ask__row { flex-wrap: wrap; }
.r262-ask__row .ae-voice-note.is-on {
  order: 3;
  margin: -2px 0 0;
  padding: 0 24px;
  font-size: 13px;
  color: rgba(25, 25, 25, 0.72);
}
@media (max-width: 640px) {
  .r262-ask__row .btn { order: 2; }
  .r262-ask__row .ae-voice-note.is-on { order: 1; margin: -4px 0 0; }
}