/* =========================================================================
   The campus assistant.

   Namespaced .bu-chat so it cannot reach anything in the template. Sits above
   the back-to-top button rather than beside it: the template pins that to the
   right in every language, so stacking the two in one column reads better
   than splitting them across opposite corners in Kurdish and Arabic.

   Motion is on entry and on contact only. Nothing here loops, pulses or
   attracts attention on its own — a support widget that waves at the reader
   while they are trying to read is noise, not help.
   ========================================================================= */

.bu-chat {
  --bu-chat-brown: #33200a;
  --bu-chat-gold: #c89a11;
  --bu-chat-cream: #e9dcc4;
  --bu-chat-ink: #120b03;
  --bu-chat-paper: #faf7f1;

  /* The launcher's corner. The veil and the stage inside are fixed to the
     viewport in their own right, so this box only positions the button. */
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: inherit;
}

/* ---------------------------------------------------------------- veil */
/*
   Two halves that close over the page from the top and bottom edges.

   Each is its own element rather than one growing box, because the join has
   to happen in the middle of the screen no matter how tall it is, and two
   halves travelling inwards do that for free at any height.

   `visibility` is on a delay so the halves are gone from the tree once they
   have opened again, rather than sitting invisible over the page catching
   clicks meant for the site.
*/
.bu-chat__veil {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}

.bu-chat.is-open .bu-chat__veil {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.bu-chat__veil-half {
  position: absolute;
  left: 0;
  right: 0;
  /* Half the screen each, plus a pixel so no seam shows where they meet. */
  height: calc(50% + 1px);
  /* The site's own paper, not a blackout. Covering the page is about giving
     the assistant a room of its own, and a room does not have to be dark. */
  background: var(--bu-chat-paper);
  transition: transform 0.5s cubic-bezier(0.83, 0, 0.17, 1);
}

.bu-chat__veil-half--top {
  top: 0;
  transform: translateY(-100%);
}

.bu-chat__veil-half--bottom {
  bottom: 0;
  transform: translateY(100%);
}

.bu-chat.is-open .bu-chat__veil-half {
  transform: none;
}

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

.bu-chat__launcher {
  position: relative;
  z-index: 9992;   /* stays reachable once the veil has closed */
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--bu-chat-brown);
  color: var(--bu-chat-cream);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(51, 32, 10, 0.32);
  display: grid;
  place-items: center;
  transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1),
    background-color 0.24s ease-out, box-shadow 0.24s ease-out;
}

.bu-chat__launcher > i {
  grid-area: 1 / 1;
  transition: opacity 0.2s ease-out, transform 0.24s ease-out;
}

/* The two glyphs are stacked and cross-faded, so the button turns into its
   own close control instead of swapping to a different-looking button. */
.bu-chat__launcher-x {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.bu-chat.is-open .bu-chat__launcher > i:first-child {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.bu-chat.is-open .bu-chat__launcher-x {
  opacity: 1;
  transform: none;
}

.bu-chat__launcher:hover,
.bu-chat__launcher:focus-visible {
  background: var(--bu-chat-gold);
  color: var(--bu-chat-brown);
  transform: scale(1.06);
  box-shadow: 0 14px 32px rgba(51, 32, 10, 0.4);
}

.bu-chat__launcher:active {
  transform: scale(0.95);
  transition-duration: 0.09s;
}

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

/*
   The stage: what the veil closes to reveal.

   Waits for the halves to meet before it arrives — the 0.34s delay on the way
   in is roughly two thirds of the veil's travel, which reads as the content
   being uncovered rather than racing the curtain. On the way out it goes
   first and quickly, so the halves are opening onto the page and not onto a
   panel still fading.
*/
/*
   The stage fills the screen.

   It was a rounded white card floating on a dark wash — a popup with a title
   bar, which is the shape of every support widget and reads as one. Now the
   veil is the surface and the content simply sits on it: no border, no
   shadow, no window frame, the type and the space doing the work.
*/
.bu-chat__stage {
  position: fixed;
  z-index: 9991;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  color: var(--bu-chat-brown);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.14s ease-in, transform 0.14s ease-in,
    visibility 0s linear 0.14s;
}

.bu-chat.is-open .bu-chat__stage {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease-out 0.34s, transform 0.34s ease-out 0.34s,
    visibility 0s 0.34s;
}

/* ------------------------------------------------------------ controls */

.bu-chat__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 22px;
  flex: 0 0 auto;
}

.bu-chat__controls-gap {
  flex: 1 1 auto;
}

.bu-chat__controls button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(51, 32, 10, 0.06);
  color: var(--bu-chat-brown);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

.bu-chat__controls button:hover,
.bu-chat__controls button:focus-visible {
  background: var(--bu-chat-brown);
  color: var(--bu-chat-paper);
  outline: none;
}

.bu-chat__controls button:active {
  transform: scale(0.94);
}

[dir="rtl"] .bu-chat__back i {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------- welcome */

.bu-chat__welcome {
  display: block;
  margin-bottom: 6px;
}

.bu-chat__welcome img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.bu-chat__welcome-name {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--bu-chat-brown);
}

.bu-chat__welcome-tag {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(51, 32, 10, 0.58);
}

/* ------------------------------------------------------------- bot mark */

.bu-bot-wrap {
  position: relative;
  display: inline-block;
}

.bu-bot {
  display: block;
}

/* The pupils are moved from JavaScript in viewBox units, so the transform
   has to be read in those units too rather than in screen pixels. */
.bu-bot__pupils {
  transform-box: view-box;
  transition: transform 0.09s linear;
}

/* Widened when it is about to be spoken to — the same move a face makes when
   it realises it is being addressed. */
.bu-bot__eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bu-bot-wrap.is-speaking .bu-bot__eye {
  transform: scaleY(1.12);
}

/* -------------------------------------------------------------- mouth -- */
/*
   Two mouths, one shown at a time.

   Closed is the resting smile. Open belongs to the speaking option only:
   opening it for the writing option too would say the same thing for both
   and so say nothing for either.
*/
.bu-bot__smile,
.bu-bot__mouth-open {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.16s ease-out, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bu-bot__mouth-open {
  opacity: 0;
  transform: scaleY(0.25);
}

.bu-bot-wrap.is-speaking .bu-bot__smile {
  opacity: 0;
  transform: scaleY(0.4);
}

.bu-bot-wrap.is-speaking .bu-bot__mouth-open {
  opacity: 1;
  transform: scaleY(1);
  animation: bu-bot-talk 0.62s ease-in-out infinite;
}

@keyframes bu-bot-talk {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.58); }
}

/* -------------------------------------------------------------- bubble -- */
/*
   What the writing option gets instead of an open mouth. Sat off the mark's
   upper corner with a tail pointing back at it, so it reads as coming from
   the bot rather than floating beside it.
*/
.bu-bot__bubble {
  position: absolute;
  top: 4%;
  inset-inline-start: 78%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(51, 32, 10, 0.18);
  opacity: 0;
  transform: translateY(6px) scale(0.8);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.16s ease-in, transform 0.16s ease-in;
}

[dir="rtl"] .bu-bot__bubble {
  transform-origin: bottom right;
}

.bu-bot__bubble::after {
  content: "";
  position: absolute;
  bottom: -4px;
  inset-inline-start: 9px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}

.bu-bot-wrap.is-typing .bu-bot__bubble {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease-out 0.04s,
    transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) 0.04s;
}

.bu-bot__bubble i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(51, 32, 10, 0.4);
}

.bu-bot-wrap.is-typing .bu-bot__bubble i {
  animation: bu-bot-dots 1.1s ease-in-out infinite;
}

.bu-bot__bubble i:nth-child(2) { animation-delay: 0.15s; }
.bu-bot__bubble i:nth-child(3) { animation-delay: 0.3s; }

@keyframes bu-bot-dots {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.bu-bot__body {
  transform-origin: 48px 56px;
  animation: bu-bot-float 5.5s ease-in-out infinite;
}

.bu-bot__eyes {
  transform-origin: 48px 55.5px;
  animation: bu-bot-blink 6.5s ease-in-out infinite;
}

.bu-bot__tassel,
.bu-bot__tassel-bead {
  transform-origin: 80px 24px;
  animation: bu-bot-swing 5.5s ease-in-out infinite;
}

.bu-bot__halo {
  transform-origin: 48px 56px;
  animation: bu-bot-breathe 5.5s ease-in-out infinite;
}

@keyframes bu-bot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3.5px); }
}

/* A blink is fast and rare. Anything slower reads as sleepy, anything more
   frequent as a fault. */
@keyframes bu-bot-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

@keyframes bu-bot-swing {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(7deg); }
}

@keyframes bu-bot-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.14; }
  50%      { transform: scale(1.07); opacity: 0.2; }
}

/* ----------------------------------------------------------------- head */

.bu-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bu-chat-brown);
  color: #fff;
  flex: 0 0 auto;
}

.bu-chat__avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(233, 220, 196, 0.16);
  color: var(--bu-chat-gold);
  font-size: 17px;
  overflow: hidden;
}

.bu-chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bu-chat__ident {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-inline-end: auto;
}

.bu-chat__ident strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.bu-chat__ident span {
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.4;
}

.bu-chat__head button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.bu-chat__head button:hover,
.bu-chat__head button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

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

.bu-chat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The paper already is the background; a second one would draw a box. */
  background: transparent;
  scrollbar-width: thin;
  /* A conversation is read, so it keeps a measure rather than running the
     full width of a desktop screen. */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.bu-chat__turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bu-chat__turn--visitor {
  align-items: flex-end;
}

.bu-chat__turn--bot {
  align-items: flex-start;
}

.bu-chat__bubble {
  max-width: 88%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.62;
  /* A pasted question can be one unbroken string; it must wrap, not widen
     the panel and force the page to scroll sideways. */
  overflow-wrap: anywhere;
  /* Each turn rises into place, which is what makes the transcript read as a
     sequence rather than a block that changed. */
  animation: bu-chat-rise 0.24s ease-out both;
}

.bu-chat__bubble--bot {
  align-self: flex-start;
  background: #fff;
  box-shadow: 0 1px 2px rgba(51, 32, 10, 0.04);
  color: #2b2118;
  border: 1px solid rgba(51, 32, 10, 0.09);
  border-start-start-radius: 4px;
}

.bu-chat__bubble--visitor {
  background: var(--bu-chat-brown);
  color: var(--bu-chat-cream);
  border-end-end-radius: 4px;
}

@keyframes bu-chat-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.bu-chat__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bu-chat-gold);
  color: var(--bu-chat-brown);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.bu-chat__cta:hover,
.bu-chat__cta:focus-visible {
  color: var(--bu-chat-brown);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(200, 154, 17, 0.34);
}

.bu-chat__cta i {
  font-size: 11px;
}

[dir="rtl"] .bu-chat__cta i {
  transform: scaleX(-1);
}

/* The one looping animation here, and it earns it: it is the only signal
   that a reply is on its way. */
.bu-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px;
}

.bu-chat__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(51, 32, 10, 0.36);
  animation: bu-chat-blink 1.1s ease-in-out infinite;
}

.bu-chat__typing span:nth-child(2) {
  animation-delay: 0.16s;
}

.bu-chat__typing span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes bu-chat-blink {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ------------------------------------------------------------- starters */

.bu-chat__starters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}

.bu-chat__starters-head {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(51, 32, 10, 0.5);
}

.bu-chat__chip {
  box-shadow: 0 1px 2px rgba(51, 32, 10, 0.04);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44px minimum target: these are the first thing a thumb reaches for. */
  min-height: 44px;
  padding: 8px 14px;
  text-align: start;
  border: 1px solid rgba(51, 32, 10, 0.16);
  border-radius: 12px;
  background: #fff;
  color: #33200a;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out,
    color 0.2s ease-out, transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bu-chat__chip i {
  color: var(--bu-chat-gold);
  font-size: 13px;
  transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bu-chat__chip:hover,
.bu-chat__chip:focus-visible,
.bu-chat__chip:active {
  background: var(--bu-chat-brown);
  border-color: var(--bu-chat-brown);
  color: #fff;
  transform: translateY(-2px);
}

.bu-chat__chip:hover i,
.bu-chat__chip:focus-visible i,
.bu-chat__chip:active i {
  transform: scale(1.18) rotate(-8deg);
}

.bu-chat__chip:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.09s;
}

/* ------------------------------------------------------------- composer */

.bu-chat__composer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 24px 28px;
  background: transparent;
  border-top: 0;
}

.bu-chat__composer input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(51, 32, 10, 0.14);
  border-radius: 16px;
  background: #fff;
  color: #2b2118;
  font-size: 14px;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.bu-chat__composer input:focus {
  outline: none;
  border-color: var(--bu-chat-gold);
  background: #fff;
}

.bu-chat__composer button {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 16px;
  background: var(--bu-chat-brown);
  color: var(--bu-chat-cream);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out,
    opacity 0.2s ease-out;
}

[dir="rtl"] .bu-chat__composer button i {
  transform: scaleX(-1);
}

.bu-chat__composer button:hover:not(:disabled),
.bu-chat__composer button:focus-visible:not(:disabled) {
  background: var(--bu-chat-gold);
  color: var(--bu-chat-brown);
}

.bu-chat__composer button:active:not(:disabled) {
  transform: scale(0.94);
  transition-duration: 0.09s;
}

.bu-chat__composer button:disabled {
  opacity: 0.38;
  cursor: default;
}

/* -------------------------------------------------------------- narrow */

/* Below this the panel is most of the screen, so it stops pretending to be a
   floating card and fills the width. */
@media (max-width: 480px) {
  .bu-chat {
    right: 16px;
    left: 16px;
    bottom: 16px;
    align-items: flex-end;
  }

  .bu-chat__stage {
    width: 100%;
    height: min(72vh, calc(100vh - 110px));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .bu-chat__stage,
  .bu-chat.is-open .bu-chat__stage,
  .bu-chat__launcher,
  .bu-chat__launcher > i,
  .bu-chat__chip,
  .bu-chat__chip i,
  .bu-chat__cta,
  .bu-chat__composer input,
  .bu-chat__composer button {
    transition: none;
  }

  .bu-chat__bubble {
    animation: none;
  }

  .bu-chat__launcher:hover,
  .bu-chat__launcher:active,
  .bu-chat__chip:hover,
  .bu-chat__chip:active,
  .bu-chat__chip:hover i,
  .bu-chat__cta:hover,
  .bu-chat__composer button:active {
    transform: none;
  }

  /* The typing dots stay, without the bounce: they are load-bearing — with
     no motion at all there is nothing to say a reply is coming. */
  .bu-chat__typing span {
    animation-duration: 2s;
  }
}

/* ============================================================== choosing */
/*
   Centred on the page, not stacked in a box.

   The welcome does the introducing — mark, name, tagline — and the two ways
   in sit under it as a pair of quiet cards on the paper. Both weigh the same:
   a visitor who would rather speak than type is not choosing the lesser
   route, and on a site where one of the three languages cannot be spoken to
   at all, making voice the obvious one would promise what the browser cannot
   keep.
*/
.bu-chat__choose {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px 40px;
  overflow-y: auto;
  text-align: center;
}

.bu-chat__choose-title {
  margin: 22px 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(51, 32, 10, 0.45);
}

.bu-chat__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 560px;
}

.bu-chat__mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px;
  border: 1px solid rgba(51, 32, 10, 0.12);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.22s ease-out, transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1),
    box-shadow 0.22s ease-out;
}

.bu-chat__mode-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(200, 154, 17, 0.14);
  color: #8a6a12;
  font-size: 20px;
  transition: background-color 0.24s ease-out, color 0.24s ease-out,
    transform 0.26s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bu-chat__mode-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--bu-chat-brown);
}

.bu-chat__mode-hint {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(51, 32, 10, 0.55);
}

.bu-chat__mode:hover,
.bu-chat__mode:focus-visible,
.bu-chat__mode:active {
  border-color: var(--bu-chat-gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(51, 32, 10, 0.1);
  outline: none;
}

.bu-chat__mode:hover .bu-chat__mode-icon,
.bu-chat__mode:focus-visible .bu-chat__mode-icon,
.bu-chat__mode:active .bu-chat__mode-icon {
  background: var(--bu-chat-gold);
  color: var(--bu-chat-brown);
  transform: scale(1.08) rotate(-6deg);
}

.bu-chat__mode:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 0.09s;
}

/* Why a route will not work, said before it is taken rather than after. */
.bu-chat__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 560px;
  margin: 6px 0 0;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(200, 154, 17, 0.12);
  color: #6b5210;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: start;
}

.bu-chat__note i {
  margin-top: 2px;
  flex: 0 0 auto;
}

/* ================================================================= voice */
.bu-chat__voice {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px 40px;
  overflow-y: auto;
  text-align: center;
}

/*
   The orb.

   Centred on the microphone and larger than it, so the button sits in its
   middle rather than on top of a panel. `pointer-events: none` because it is
   scenery — every tap in that area belongs to the button underneath.
*/
.bu-chat__mic-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
  flex: 0 0 auto;
}

.bu-chat__orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bu-chat__orb canvas {
  display: block;
}

.bu-chat__voice-said {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 620px;
  min-height: 44px;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.45;
  color: var(--bu-chat-brown);
}

/*
   The microphone.

   The two rings only run while it is listening — that is the one moment the
   visitor needs telling that something is happening and cannot see it, since
   nothing on screen moves while a person is speaking. At rest and while the
   answer is read back it is still.
*/
.bu-chat__mic {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 50%;
  background: var(--bu-chat-brown);
  color: var(--bu-chat-cream);
  font-size: 30px;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(51, 32, 10, 0.3);
  transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1),
    background-color 0.24s ease-out;
}

.bu-chat__mic i {
  position: relative;
  z-index: 1;
}

.bu-chat__mic-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bu-chat-gold);
  opacity: 0;
}

.bu-chat__mic.is-listening {
  background: #8c1d18;
}

.bu-chat__mic.is-listening .bu-chat__mic-ring {
  animation: bu-chat-pulse 1.9s ease-out infinite;
}

/* The orb is already saying "listening" far louder than two rings could.
   Where it is present they would only be noise on top of it. */
.bu-chat__mic.has-orb .bu-chat__mic-ring {
  display: none;
}

.bu-chat__mic.has-orb {
  background: rgba(51, 32, 10, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.bu-chat__mic.is-listening .bu-chat__mic-ring:nth-child(2) {
  animation-delay: 0.95s;
}

.bu-chat__mic.is-speaking {
  background: var(--bu-chat-gold);
  color: var(--bu-chat-brown);
}

.bu-chat__mic:hover,
.bu-chat__mic:focus-visible {
  transform: scale(1.05);
  outline: none;
}

.bu-chat__mic:active {
  transform: scale(0.95);
  transition-duration: 0.09s;
}

@keyframes bu-chat-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}

.bu-chat__voice-state {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(51, 32, 10, 0.55);
}

/* The answer in writing as well as aloud — a spoken reply that was missed
   has to be recoverable, and some languages have no voice installed. */
.bu-chat__voice-reply {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(51, 32, 10, 0.09);
  font-size: 14px;
  line-height: 1.62;
  color: #2b2118;
  text-align: start;
}

.bu-chat__switch {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: #6b5210;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 10px;
}

.bu-chat__voice-blocked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* The back arrow mirrors with the text, like every other one here. */
.bu-chat__back {
  flex: 0 0 auto;
}

[dir="rtl"] .bu-chat__back i {
  transform: scaleX(-1);
}

/* ================================================================ narrow */
@media (max-width: 575px) {
  .bu-chat__modes {
    grid-template-columns: 1fr;
  }

  .bu-chat__mode {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
    text-align: start;
  }

  .bu-chat__mode-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .bu-chat__mic-wrap {
    width: 200px;
    height: 200px;
  }

  .bu-chat__log,
  .bu-chat__composer {
    padding-inline: 16px;
  }
}

/* ======================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* The veil still covers the page — it is what makes the assistant a place
     rather than a popup — it just arrives without the sweep. */
  .bu-chat__veil-half,
  .bu-chat__stage,
  .bu-chat.is-open .bu-chat__stage,
  .bu-chat__mode,
  .bu-chat__mode-icon,
  .bu-chat__mic {
    transition: none;
  }

  .bu-chat__mode:hover,
  .bu-chat__mode:active,
  .bu-chat__mode:hover .bu-chat__mode-icon,
  .bu-chat__mic:hover,
  .bu-chat__mic:active {
    transform: none;
  }

  .bu-chat__mode:active {
    transform: none;
  }

  .bu-chat.is-open .bu-chat__stage {
    transform: translate(-50%, -50%);
  }

  /* The listening pulse stays: it is the only indication the microphone is
     live, and a live microphone must always be visible as one. */
  .bu-chat__mic.is-listening .bu-chat__mic-ring {
    animation-duration: 3s;
  }

  /* The bot holds still — the blink and the float say nothing that the mark
     itself does not. The mouth and the bubble still change, because those
     carry which option is being considered; they simply stop performing
     while they do it. */
  .bu-bot__body,
  .bu-bot__eyes,
  .bu-bot__tassel,
  .bu-bot__tassel-bead,
  .bu-bot__halo,
  .bu-bot-wrap.is-speaking .bu-bot__mouth-open,
  .bu-bot-wrap.is-typing .bu-bot__bubble i {
    animation: none;
  }

  .bu-bot__pupils,
  .bu-bot__eye,
  .bu-bot__smile,
  .bu-bot__mouth-open,
  .bu-bot__bubble {
    transition: none;
  }
}