/* Aura — the chat widget.
   ==========================================================================
   Rebuilt on the site's own design system. What was here before was a generic
   template: slate #0f172a with emerald #10b981, declared as --dk and --ac on
   :root, on a site whose ink is Console Navy #001427 and whose action colour is
   Signal Brick #B65002. The launcher's green ring and green status dot were the
   most visible part of it, sitting on the navy footer where they matched
   nothing and read as another company's product bolted on.

   Three faults were measured rather than assumed, at 1440 and 390:

     the quick-reply row overflowed its own box -- scrollWidth 421 against a
     400px window -- so "Demo" was cut off at every width;

     the welcome list ran 78px past the bottom of its scroller at 1440, which
     put the fourth card entirely out of view with nothing to say it was there;

     the stylesheet set --dk, --ac and a `*` rule with tap-highlight on the
     whole document, from a widget.

   Everything here is scoped to #aw5-fab, #aw5-box and #aw5-ndg. Nothing
   touches `*` or `:root`.

   The bezel is the site's: a 26px shell holding a 6px tray around a 20px core,
   the same construction as the cards and the article plates.
   ========================================================================== */

#aw5-fab,
#aw5-box,
#aw5-ndg {
  /* Local aliases so the rules below read, resolving to the design system with
     literal fallbacks -- this file is loaded on pages where design-system.css
     is present, but a fallback costs nothing and removes the dependency. */
  --aw-ink: var(--ds-ink, #001427);
  --aw-ink-soft: #0a2036;
  --aw-action: var(--ds-primary, #B65002);
  --aw-action-hover: var(--ds-primary-hover, #974302);
  --aw-live: var(--ds-primary-vivid, #FF7F1F);
  --aw-focus: var(--ds-secondary, #0450BD);
  --aw-surface: var(--ds-surface, #F1F4F9);
  --aw-white: var(--ds-white, #fff);
  --aw-text: var(--ds-text, #28282B);
  --aw-muted: var(--ds-text-muted, #5F5A54);
  --aw-line: var(--acma-hairline, rgba(0, 20, 39, .08));
  --aw-line-inv: var(--acma-hairline-inverse, rgba(255, 255, 255, .14));
  --aw-shell: var(--acma-radius-shell, 26px);
  --aw-core: var(--acma-radius-core, 20px);
  --aw-ease: var(--acma-ease, cubic-bezier(.32, .72, 0, 1));
  --aw-font: var(--ds-font-primary, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);

  font-family: var(--aw-font);
  box-sizing: border-box;
}

#aw5-fab *,
#aw5-box *,
#aw5-ndg * { box-sizing: border-box; }

/* ==========================================================================
   LAUNCHER
   The old one was a flat navy disc on a navy footer with a green dot. It needs
   a hairline of its own to sit on a dark ground, and the live dot belongs in
   the brand's amber, which is the colour this site already uses to mean live.
   ========================================================================== */
#aw5-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid var(--aw-line-inv);
  border-radius: 50%;
  background: var(--aw-ink);
  color: var(--aw-white);
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(0, 20, 39, .18),
    0 12px 28px -12px rgba(0, 20, 39, .45);
  transition:
    transform .32s var(--aw-ease),
    box-shadow .32s var(--aw-ease),
    opacity .2s linear;
}

#aw5-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 6px rgba(0, 20, 39, .2),
    0 18px 36px -14px rgba(0, 20, 39, .55);
}

#aw5-fab:focus-visible {
  outline: 3px solid var(--aw-live);
  outline-offset: 3px;
}

/* Open: the launcher gets out of the way rather than spinning. The old rule
   scaled to 0 and rotated 90deg, which on a 60px disc is a lot of motion for
   "this is now a window". */
#aw5-fab.open {
  transform: scale(.85);
  opacity: 0;
  pointer-events: none;
}

#aw5-fab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The live dot. Amber, hairlined against the disc so it reads at any size. */
.aw5-fp {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--aw-live);
  border: 2px solid var(--aw-ink);
}

.aw5-fp::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--aw-live);
  opacity: 0;
  animation: aw5-ping 2.6s var(--aw-ease) infinite;
}

@keyframes aw5-ping {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(2.1); }
  100% { opacity: 0;  transform: scale(2.1); }
}

/* Unread count. */
.aw5-fb {
  position: absolute;
  top: -2px;
  left: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--aw-action);
  color: var(--aw-white);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  display: none;
}
.aw5-fb.show { display: block; }

/* ==========================================================================
   NUDGE
   ========================================================================== */
#aw5-ndg {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 99998;
  display: none;
  align-items: flex-start;
  gap: 4px;
  max-width: 272px;
  padding: 6px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-shell);
  background: var(--aw-white);
  box-shadow: 0 10px 30px -12px rgba(0, 20, 39, .3);
}
#aw5-ndg.show { display: flex; }

.aw5-ndg-open {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--aw-core);
  background: transparent;
  color: var(--aw-text);
  font: inherit;
  font-size: .875rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.aw5-ndg-open:hover { background: var(--aw-surface); }

.aw5-nc {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aw-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.aw5-nc:hover { background: var(--aw-surface); color: var(--aw-text); }

/* ==========================================================================
   WINDOW — the shell
   ========================================================================== */
#aw5-box {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: none;
  flex-direction: column;
  width: 408px;
  /* 700, not 680. The greeting is the tallest screen the window holds:
     header, four route cards, composer and footer come to 686px, and at
     680 the fourth card sat 17px below the fold -- a scroll to reach the
     one route a visitor is most likely to want. Trimming the cards to
     claw back those pixels would have left nothing for a longer
     translation or a larger default font; the window absorbs it instead,
     and still clears a 900px viewport by 200px. */
  height: min(700px, calc(100vh - 48px));
  overflow: hidden;
  padding: 6px;                      /* the tray */
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-shell);
  background: rgba(0, 20, 39, .035);  /* the tray's own ground */
  box-shadow:
    0 1px 1px rgba(0, 20, 39, .04),
    0 10px 30px -14px rgba(0, 20, 39, .3),
    0 32px 64px -32px rgba(0, 20, 39, .4);
  color: var(--aw-text);
  font-size: .9375rem;
  line-height: 1.5;
}

#aw5-box.open {
  display: flex;
  animation: aw5-in .34s var(--aw-ease) both;
}

@keyframes aw5-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* The core: one rounded white plate inside the tray, holding every screen. */
#aw5-box > .aw5-hd,
#aw5-box > .aw5-qr,
#aw5-box > .aw5-wel,
#aw5-box > #aw5-lcf,
#aw5-box > .aw5-ms,
#aw5-box > .aw5-inp,
#aw5-box > .aw5-ft { background: var(--aw-white); }

#aw5-box > .aw5-hd { border-radius: var(--aw-core) var(--aw-core) 0 0; }
#aw5-box > .aw5-ft { border-radius: 0 0 var(--aw-core) var(--aw-core); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.aw5-hd {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--aw-line);
}

.aw5-av {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--aw-ink);
  color: var(--aw-white);
  font-size: 1rem;
}

/* The live dot on the avatar, same language as the launcher's. */
.aw5-av::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--aw-live);
  border: 2px solid var(--aw-white);
}

.aw5-hi { flex: 1; min-width: 0; }

.aw5-hn {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--aw-ink);
}

.aw5-hs {
  font-size: .8125rem;
  color: var(--aw-muted);
}

.aw5-hbtns { display: flex; gap: 2px; flex: none; }

.aw5-hb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aw-muted);
  cursor: pointer;
  transition: background-color .18s var(--aw-ease), color .18s var(--aw-ease);
}
.aw5-hb:hover { background: var(--aw-surface); color: var(--aw-ink); }
.aw5-hb:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 1px; }
.aw5-hb svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   QUICK REPLIES
   They used to sit on one line with overflow-x:auto -- 421px of pills in a
   400px window, so the last one was cut in half at every width with no
   affordance to scroll. They wrap now: five short labels take two rows and
   nothing is hidden.

   They are also hidden until the conversation starts. On the greeting they
   said Services / Pricing / Careers / Support / Demo directly above four cards
   saying Explore Solutions / Join Our Team / Get Support / Book a Demo -- the
   same five routes offered twice, the second time as the smaller, vaguer pair.
   Two wrapped rows of them cost 94px of a 680px window, which is most of what
   pushed the fourth card out of view. As a shortcut inside a running
   conversation, where there is no card list, they earn their place. The JS
   shows them in sh() and hides them in aw5New().
   ========================================================================== */
.aw5-qr {
  flex: none;
  display: none;          /* the conversation reveals them; see below */
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--aw-line);
}

.aw5-pill {
  padding: 6px 12px;
  border: 1px solid var(--aw-line);
  border-radius: 999px;
  background: var(--aw-white);
  color: var(--aw-text);
  font: inherit;
  font-size: .8125rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s var(--aw-ease), background-color .18s var(--aw-ease), color .18s var(--aw-ease);
}
.aw5-pill:hover {
  border-color: var(--aw-action);
  background: var(--ds-primary-soft, #FDF0E7);
  color: var(--aw-action);
}
.aw5-pill:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 1px; }

/* ==========================================================================
   SCROLL REGIONS
   Three screens share the middle of the window: welcome, lead form, messages.
   Exactly one is visible at a time, and the JS switches between them by writing
   `display` inline -- `flex`, never `block` -- so each has to be laid out as a
   column here or the inline value turns it into a row. That is also why the
   .show rules below are belt-and-braces rather than the mechanism.

   Both scrolling faults came from this box. They need to take the space left
   over rather than set their own height, which is what `min-height: 0` on a
   flex child buys; without it the content sizes the child and the list runs
   past the bottom of the window, which is what put the fourth welcome card
   78px out of view. And their children must not absorb the overflow by
   shrinking -- the default `flex-shrink: 1` squashes cards and bubbles instead
   of letting the container scroll.
   ========================================================================== */
.aw5-wel,
.aw5-ms,
#aw5-lcf {
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 20, 39, .22) transparent;
}

.aw5-wel > *,
.aw5-ms > *,
#aw5-lcf > * { flex: none; }

/* The greeting and the form are short; the pane holding them is as tall as the
   window. Left at the top of a 844px phone screen the greeting ended 170px
   above the composer, adrift in white.

   `safe center` and not plain `center`: in a scrolling box, centred content
   that outgrows the box overflows both ends and the top of it can never be
   reached. The `safe` keyword drops back to start alignment exactly then. A
   browser that does not know the keyword throws the whole declaration out and
   gets start alignment too, which is the same answer. */
.aw5-wel,
#aw5-lcf { justify-content: safe center; }

.aw5-wel::-webkit-scrollbar,
.aw5-ms::-webkit-scrollbar,
#aw5-lcf::-webkit-scrollbar { width: 8px; }

.aw5-wel::-webkit-scrollbar-thumb,
.aw5-ms::-webkit-scrollbar-thumb,
#aw5-lcf::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(0, 20, 39, .22);
  background-clip: content-box;
}

.aw5-wel::-webkit-scrollbar-thumb:hover,
.aw5-ms::-webkit-scrollbar-thumb:hover,
#aw5-lcf::-webkit-scrollbar-thumb:hover { background: rgba(0, 20, 39, .34); background-clip: content-box; }

/* ==========================================================================
   WELCOME
   ========================================================================== */
/* Visible by default. The widget's JS only ever *hides* a pane -- it writes
   display:none on the two it is leaving and display:flex on the one it is
   entering, and on a first open it writes nothing at all, so whichever pane
   the stylesheet leaves visible is the one the visitor meets. That is the
   welcome. Giving it `display: none` here opened the window on an empty white
   rectangle. */
.aw5-wel { display: flex; padding: 18px 16px 16px; text-align: center; }
.aw5-wel.show { display: flex; }

.aw5-wav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--aw-ink);
  color: var(--aw-white);
  font-size: 1.375rem;
}

.aw5-wel h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--aw-ink);
}

.aw5-wel > p {
  margin: 0 auto 18px;
  max-width: 30ch;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--aw-muted);
}

.aw5-wcs { display: flex; flex-direction: column; gap: 8px; text-align: left; }

/* Each route is a plate: hairline, rounded to the core radius, lifting on
   hover the way the site's cards do. */
.aw5-wc {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-core);
  background: var(--aw-white);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color .2s var(--aw-ease),
    box-shadow .2s var(--aw-ease),
    transform .2s var(--aw-ease);
}
.aw5-wc:hover {
  border-color: rgba(182, 80, 2, .35);
  box-shadow: 0 8px 20px -12px rgba(0, 20, 39, .35);
  transform: translateY(-1px);
}
.aw5-wc:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 2px; }

.aw5-wci {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--aw-surface);
  font-size: 1.0625rem;
}

.aw5-wcl { flex: 1; min-width: 0; display: block; }

.aw5-wct {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--aw-ink);
}

.aw5-wcd {
  display: block;
  margin-top: 1px;
  font-size: .8125rem;
  color: var(--aw-muted);
}

.aw5-wca { flex: none; color: var(--aw-muted); transition: transform .2s var(--aw-ease), color .2s var(--aw-ease); }
.aw5-wc:hover .aw5-wca { transform: translateX(2px); color: var(--aw-action); }

/* ==========================================================================
   LEAD FORM
   ========================================================================== */
#aw5-lcf { display: none; padding: 28px 18px 18px; }
#aw5-lcf.show { display: flex; }

.aw5-lh { margin-bottom: 16px; text-align: center; }
.aw5-li { font-size: 1.75rem; line-height: 1; margin-bottom: 8px; }
.aw5-lh h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; color: var(--aw-ink); }
.aw5-lh p { margin: 0; font-size: .8125rem; color: var(--aw-muted); }

.aw5-lf { margin-bottom: 12px; }
.aw5-lf label {
  display: block;
  margin-bottom: 5px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--aw-muted);
}
.aw5-lf input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: 12px;
  background: var(--aw-white);
  color: var(--aw-text);
  font: inherit;
  font-size: .9375rem;
  transition: border-color .18s var(--aw-ease), box-shadow .18s var(--aw-ease);
}
.aw5-lf input:focus {
  outline: 0;
  border-color: var(--aw-focus);
  box-shadow: 0 0 0 3px rgba(4, 80, 189, .14);
}
.aw5-lf input.err { border-color: #B3261E; }

.aw5-le { display: none; margin-top: 4px; font-size: .75rem; color: #B3261E; }
.aw5-le.show { display: block; }

.aw5-lb {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--aw-action);
  color: var(--aw-white);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s var(--aw-ease);
}
.aw5-lb:hover { background: var(--aw-action-hover); }
.aw5-lb:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 2px; }

.aw5-lt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: .75rem;
  color: var(--aw-muted);
}
.aw5-lt svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   MESSAGES
   The renderer builds each turn as a group holding two things: the bubble and
   a meta line under it ("Aura · AI Agent · 14:32", or just the time for the
   visitor). So a group is a column, aligned to whichever side it came from --
   not a row, which is what a `justify-content` on a flex row gave it while the
   meta sat beside the bubble instead of beneath it.
   ========================================================================== */
.aw5-ms { display: none; padding: 16px 14px 6px; }
.aw5-ms.show { display: flex; }

.aw5-mg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  margin-bottom: 12px;
}
.aw5-mg.u { align-items: flex-end; }

.aw5-bb {
  max-width: 84%;
  padding: 10px 13px;
  font-size: .9375rem;
  line-height: 1.5;
  /* Bot replies can contain a bare URL, which the formatter turns into one
     unbreakable link longer than the bubble. */
  overflow-wrap: anywhere;
}

.aw5-mg.b .aw5-bb {
  border: 1px solid var(--aw-line);
  border-radius: 4px 16px 16px 16px;
  background: var(--aw-surface);
  color: var(--aw-text);
}

.aw5-mg.u .aw5-bb {
  border-radius: 16px 16px 4px 16px;
  background: var(--aw-ink);
  color: var(--aw-white);
}

.aw5-bb strong { font-weight: 700; }
.aw5-bb a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The meta line. Quiet enough to ignore while reading, close enough to the
   bubble to belong to it. */
.aw5-mt {
  margin: 4px 4px 0;
  font-size: .6875rem;
  color: var(--aw-muted);
}

/* Day divider. A hairline with the day's name sitting in it, rather than a
   floating label with nothing to anchor it. */
.aw5-td {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aw-muted);
}
.aw5-td::before,
.aw5-td::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--aw-line);
}

/* ---- attachments inside a bubble ---- */
.aw5-att-preview { margin: -2px -3px 8px; }
.aw5-att-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: 12px;
  object-fit: cover;
}

.aw5-att-file {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(0, 20, 39, .06);
  font-size: .8125rem;
}
.aw5-mg.u .aw5-att-file { background: rgba(255, 255, 255, .14); }
.aw5-att-file svg {
  flex: none;
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.aw5-att-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- typing ----
   Same shape as a bot bubble, so the reply lands where the dots were instead
   of somewhere else. */
.aw5-tw {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}

.aw5-typ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--aw-line);
  border-radius: 4px 16px 16px 16px;
  background: var(--aw-surface);
}

.aw5-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aw-muted);
  animation: aw5-typing 1.3s var(--aw-ease) infinite;
}
.aw5-dot:nth-child(2) { animation-delay: .16s; }
.aw5-dot:nth-child(3) { animation-delay: .32s; }

@keyframes aw5-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ==========================================================================
   INPUT
   ========================================================================== */
.aw5-inp {
  flex: none;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--aw-line);
}

.aw5-ic {
  border: 1px solid var(--ds-border, #DDE3EC);
  border-radius: 18px;
  background: var(--aw-white);
  transition: border-color .18s var(--aw-ease), box-shadow .18s var(--aw-ease);
}
.aw5-ic:focus-within {
  border-color: var(--aw-focus);
  box-shadow: 0 0 0 3px rgba(4, 80, 189, .12);
}

.aw5-iw { padding: 10px 12px 2px; }

.aw5-iw textarea {
  display: block;
  width: 100%;
  max-height: 88px;
  border: 0;
  background: transparent;
  color: var(--aw-text);
  font: inherit;
  font-size: .9375rem;
  line-height: 1.45;
  resize: none;
  outline: 0;
}
.aw5-iw textarea::placeholder { color: var(--aw-muted); }

.aw5-ib2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 8px;
}

.aw5-ibl { display: flex; align-items: center; gap: 2px; }

.aw5-ib {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aw-muted);
  cursor: pointer;
  transition: background-color .18s var(--aw-ease), color .18s var(--aw-ease);
}
.aw5-ib:hover { background: var(--aw-surface); color: var(--aw-ink); }
.aw5-ib:focus-visible { outline: 2px solid var(--aw-focus); outline-offset: 1px; }
.aw5-ib svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Send. Signal Brick when it can be pressed, flat when it cannot -- so the
   control says whether there is anything to send before it is clicked. */
.aw5-ib.send {
  width: 36px;
  height: 36px;
  background: var(--aw-surface);
  color: var(--aw-muted);
}
.aw5-ib.send:not(:disabled) { background: var(--aw-action); color: var(--aw-white); }
.aw5-ib.send:not(:disabled):hover { background: var(--aw-action-hover); }
.aw5-ib.send:disabled { cursor: default; }

/* The file input is triggered by the paperclip beside it. */
#aw5-fu { display: none; }

/* ==========================================================================
   ATTACHMENT PREVIEW
   ========================================================================== */
.aw5-fi {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--aw-line);
  border-radius: 14px;
  background: var(--aw-surface);
}
.aw5-fi.show { display: flex; }

.aw5-fi-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.aw5-fi-info { flex: 1; min-width: 0; }
.aw5-fi-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--aw-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw5-fi-size { font-size: .75rem; color: var(--aw-muted); }
.aw5-fi button {
  flex: none;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--aw-muted);
  cursor: pointer;
}
.aw5-fi button:hover { background: rgba(0, 20, 39, .07); color: var(--aw-ink); }

/* ==========================================================================
   EMOJI PICKER
   ========================================================================== */
.aw5-ep {
  display: none;
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px);
  width: min(300px, calc(100vw - 48px));
  max-height: 210px;
  overflow: hidden;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-core);
  background: var(--aw-white);
  box-shadow: 0 12px 30px -14px rgba(0, 20, 39, .4);
}
.aw5-ep.show { display: block; }

.aw5-et {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--aw-line);
}
.aw5-et button {
  flex: 1;
  padding: 5px 0;
  border: 0; border-radius: 8px;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
}
.aw5-et button:hover,
.aw5-et button.on { background: var(--aw-surface); }

.aw5-eg {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a plain 1fr floors at the track's min-content
     width, and a <button> carries the UA's own 1px 6px padding, so eight
     columns insisted on 266px inside a 260px box and the last column was
     sliced off by the window's overflow:hidden. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  padding: 6px;
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.aw5-eg button {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0; border-radius: 8px;
  background: transparent;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.aw5-eg button:hover { background: var(--aw-surface); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.aw5-ft {
  flex: none;
  padding: 9px 14px 10px;
  border-top: 1px solid var(--aw-line);
  text-align: center;
}
.aw5-ft span { font-size: .6875rem; color: var(--aw-muted); }

/* ==========================================================================
   FULLSCREEN
   ========================================================================== */
#aw5-box.fs {
  top: 24px;
  right: 24px;
  bottom: 24px;
  left: auto;
  width: min(880px, calc(100vw - 48px));
  height: auto;
}
#aw5-box.fs .aw5-bb { max-width: 70%; }

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #aw5-fab,
  #aw5-box,
  .aw5-wc,
  .aw5-pill,
  .aw5-wca { transition: none; }

  #aw5-box.open { animation: none; }
  .aw5-fp::after,
  .aw5-dot { animation: none; }
  .aw5-fp::after { opacity: 0; }
  #aw5-fab:hover,
  .aw5-wc:hover { transform: none; }
}

/* ==========================================================================
   PHONE
   A sheet, not a floating card: full width, full height, square, and clear of
   the home indicator and the notch.
   ========================================================================== */
@media (max-width: 560px) {
  #aw5-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }

  #aw5-ndg { right: 16px; bottom: 84px; max-width: calc(100vw - 32px); }

  #aw5-box.open,
  #aw5-box.fs {
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--aw-white);
  }

  #aw5-box.open > .aw5-hd,
  #aw5-box.open > .aw5-ft { border-radius: 0; }

  #aw5-box.open > .aw5-hd { padding-top: max(14px, env(safe-area-inset-top)); }
  #aw5-box.open > .aw5-ft { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

  .aw5-bb { max-width: 88%; }
  .aw5-ep { width: calc(100vw - 24px); right: 12px; max-width: none; }
}