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

   WhatsApp's palette on purpose: it is the app this customer
   already uses to order coconuts, so the chat reads as familiar
   rather than as a corporate widget bolted to the corner.
   ============================================================ */

.nbc{
  --wa-deep:#075E54;    /* the header */
  --wa-teal:#128C7E;    /* its lighter half */
  --wa-leaf:#25D366;    /* the launcher */
  --wa-mine:#DCF8C6;    /* my own bubbles */
  --wa-paper:#ECE5DD;   /* the conversation behind them */
  --ink:#111B21;
  --ink-soft:#667781;

  position:fixed;right:20px;bottom:20px;z-index:80;
  font:400 15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[lang="bn"] .nbc{font-family:"Hind Siliguri","Noto Sans Bengali",ui-sans-serif,system-ui,sans-serif;line-height:1.75}

/* ---------- Launcher ---------- */
.nbc-open{
  position:relative;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
  /* One soft green, top to bottom. It carried a four-stop gradient and a
     radial highlight, which fought the robot sitting on it. */
  background:linear-gradient(165deg,#5FDC92,#22BF69);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(34,191,105,.34),0 2px 5px rgba(15,51,37,.14);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent
}
.nbc-open:hover{transform:scale(1.07)}
.nbc-open:active{transform:scale(.96)}
.nbc-open .nbc-open-x svg{width:26px;height:26px}

/* the icon swaps for a cross when the panel is up */
.nbc-open-i,.nbc-open-x{
  position:absolute;display:grid;place-items:center;
  transition:opacity .28s ease,transform .38s cubic-bezier(.34,1.56,.64,1)
}
.nbc-open-x{opacity:0;transform:rotate(-90deg) scale(.5)}
.nbc.on .nbc-open-i{opacity:0;transform:rotate(90deg) scale(.5)}
.nbc.on .nbc-open-x{opacity:1;transform:none}
.nbc.on .nbc-open{background:linear-gradient(145deg,#3a4b52,#243239)}

/* a quiet nudge that it is there at all */
.nbc-dot{
  position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:#FF5C4D;border:2.5px solid #fff
}
.nbc-dot::after{
  content:"";position:absolute;inset:-2.5px;border-radius:50%;
  border:2px solid #FF5C4D;animation:nbc-ping 2.4s ease-out infinite
}
@keyframes nbc-ping{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.2);opacity:0}
}

/* ---------- Panel ---------- */
.nbc-panel{
  position:absolute;right:0;bottom:76px;width:min(376px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--wa-paper);border-radius:18px;
  box-shadow:0 24px 60px rgba(7,94,84,.24),0 4px 14px rgba(0,0,0,.14);
  transform-origin:bottom right;
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .26s ease,transform .38s cubic-bezier(.19,.86,.24,1)
}
.nbc.on .nbc-panel{opacity:1;transform:none;pointer-events:auto}
.nbc-panel[hidden]{display:none}

/* the faint doodle WhatsApp puts behind a conversation */
.nbc-log{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 12px 18px;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(7,94,84,.045) 2px,transparent 2.5px),
    radial-gradient(circle at 62% 42%,rgba(7,94,84,.04) 2.5px,transparent 3px),
    radial-gradient(circle at 34% 78%,rgba(7,94,84,.045) 2px,transparent 2.5px);
  background-size:120px 120px,150px 150px,100px 100px;
  scrollbar-width:thin;scrollbar-color:rgba(7,94,84,.25) transparent
}
.nbc-log::-webkit-scrollbar{width:6px}
.nbc-log::-webkit-scrollbar-thumb{background:rgba(7,94,84,.25);border-radius:3px}

/* ---------- Header ---------- */
.nbc-head{
  flex:none;display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:linear-gradient(120deg,var(--wa-deep),var(--wa-teal));
  color:#fff
}
.nbc-av{position:relative;flex:none;width:40px;height:40px}
.nbc-av img{
  width:40px;height:40px;border-radius:50%;display:block;
  object-fit:contain;background:#fff;padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.22)
}
.nbc-live{
  position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--wa-leaf);border:2px solid var(--wa-deep)
}
.nbc-live::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa-leaf);
  animation:nbc-breathe 2.2s ease-out infinite
}
@keyframes nbc-breathe{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(2.4);opacity:0}}

.nbc-who{flex:1;min-width:0}
.nbc-who b{display:block;font-size:15px;font-weight:600;letter-spacing:.01em}
.nbc-who small{display:block;font-size:12px;opacity:.82;margin-top:1px}

.nbc-min{
  flex:none;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:#fff;display:grid;place-items:center;
  transition:background .2s ease
}
.nbc-min:hover{background:rgba(255,255,255,.16)}
.nbc-min svg{width:20px;height:20px}

/* ---------- Bubbles ---------- */
.nbc-day{margin:2px 0 14px;text-align:center}
.nbc-day span{
  display:inline-block;padding:4px 11px;border-radius:8px;
  background:rgba(255,255,255,.82);color:var(--ink-soft);
  font-size:11.5px;font-weight:500;box-shadow:0 1px 1px rgba(0,0,0,.06)
}

.nbc-row{display:flex;margin-bottom:9px;animation:nbc-in .34s cubic-bezier(.19,.86,.24,1) both}
.nbc-row.me{justify-content:flex-end}
@keyframes nbc-in{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}

.nbc-bub{
  position:relative;max-width:85%;padding:7px 11px 18px;border-radius:9px;
  background:#fff;color:var(--ink);font-size:14.4px;line-height:1.5;
  box-shadow:0 1px 1px rgba(0,0,0,.09);word-wrap:break-word
}
.nbc-txt{white-space:pre-wrap}
.nbc-row.me .nbc-bub{background:var(--wa-mine)}
.nbc-row.bad .nbc-bub{background:#FFF1EE;color:#8A3A1C}

/* the little tail, drawn rather than imaged */
.nbc-row.them .nbc-bub::before,
.nbc-row.me .nbc-bub::before{
  content:"";position:absolute;top:0;width:9px;height:12px
}
.nbc-row.them .nbc-bub::before{
  left:-7px;background:#fff;
  clip-path:polygon(100% 0,100% 100%,0 0)
}
.nbc-row.me .nbc-bub::before{
  right:-7px;background:var(--wa-mine);
  clip-path:polygon(0 0,0 100%,100% 0)
}
.nbc-row.bad .nbc-bub::before{background:#FFF1EE}
.nbc-row.them .nbc-bub{border-top-left-radius:2px}
.nbc-row.me .nbc-bub{border-top-right-radius:2px}

.nbc-time{
  position:absolute;right:9px;bottom:4px;
  font-size:10.5px;color:var(--ink-soft);opacity:.8;white-space:nowrap
}

/* ---------- Typing ---------- */
.nbc-wait .nbc-bub{padding:12px 14px 12px}
.nbc-dots{display:flex;gap:4px;align-items:center}
.nbc-dots i{
  width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.45;
  animation:nbc-bob 1.25s ease-in-out infinite
}
.nbc-dots i:nth-child(2){animation-delay:.16s}
.nbc-dots i:nth-child(3){animation-delay:.32s}
@keyframes nbc-bob{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-5px);opacity:.9}
}

/* ---------- Starters ---------- */
.nbc-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px;padding-left:2px}
.nbc-chip{
  padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(7,94,84,.22);background:rgba(255,255,255,.9);
  color:var(--wa-deep);font:500 12.8px/1.35 inherit;text-align:left;
  transition:background .2s ease,transform .2s cubic-bezier(.19,.86,.24,1)
}
.nbc-chip:hover{background:#fff;transform:translateY(-1px)}
.nbc-chip:active{transform:none}

/* ---------- Composer ---------- */
.nbc-bar{
  flex:none;display:flex;align-items:center;gap:8px;padding:9px 10px;
  background:#F0F2F5
}
.nbc-bar input{
  flex:1;min-width:0;height:42px;padding:0 16px;border:0;border-radius:21px;
  background:#fff;color:var(--ink);font:400 14.5px/1 inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.nbc-bar input:focus{outline:2px solid rgba(37,211,102,.45);outline-offset:0}
.nbc-bar button{
  flex:none;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:var(--wa-teal);color:#fff;display:grid;place-items:center;
  transition:background .2s ease,transform .24s cubic-bezier(.34,1.56,.64,1)
}
.nbc-bar button:hover{background:var(--wa-deep);transform:scale(1.06)}
.nbc-bar button:disabled{opacity:.5;pointer-events:none}
.nbc-bar svg{width:19px;height:19px;margin-left:2px}

.nbc-foot{
  flex:none;margin:0;padding:7px 14px 9px;background:#F0F2F5;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:10.8px;line-height:1.45;color:var(--ink-soft);text-align:center
}

/* ---------- Small screens ---------- */
@media (max-width:560px){
  .nbc{right:14px;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  /* The public site puts an action dock across the bottom — 68px of it.
     Clear that first, then the same 30px of air. The dashboard has no
     dock, so it keeps the 30px on its own. */
  .nbc.over-dock{bottom:calc(68px + 30px + env(safe-area-inset-bottom,0px))}
  .nbc-panel{
    width:calc(100vw - 28px);
    height:min(62vh,480px);
    bottom:72px
  }
}

@media (prefers-reduced-motion:reduce){
  .nbc-open,.nbc-open-i,.nbc-open-x,.nbc-panel,.nbc-chip,.nbc-bar button{transition:none}
  .nbc-row{animation:none}
  .nbc-dot::after,.nbc-live::after,.nbc-dots i{animation:none}
  .nbc-open:hover,.nbc-chip:hover,.nbc-bar button:hover{transform:none}
}

/* ============================================================
   The assistant's face
   ============================================================ */

.bot{display:block;line-height:0}
.bot-svg{width:100%;height:100%;display:block;overflow:visible}

/* It breathes, so it never reads as a static icon. */
.bot-body{transform-origin:32px 40px;animation:bot-bob 3.4s ease-in-out infinite}

/* A light sweeps across the visor every few seconds. More than anything
   else this is what stops it reading as a flat sticker. */
.bot-sheen{animation:bot-sheen 4.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bot-sheen{
  0%,62%{transform:translateX(0)}
  86%,100%{transform:translateX(92px)}
}

/* The ear lights alternate, so the two sides are never in step. */
.bot-ear-l{animation:bot-ear 2.6s ease-in-out infinite}
.bot-ear-r{animation:bot-ear 2.6s ease-in-out 1.3s infinite}
@keyframes bot-ear{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes bot-bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-1.1px) rotate(-1.2deg)}
  75%{transform:translateY(-.6px) rotate(1.2deg)}
}

/* The antenna light, on its own slower rhythm. */
.bot-bulb{animation:bot-bulb 2.1s ease-in-out infinite;transform-origin:32px 5px}
@keyframes bot-bulb{
  0%,100%{opacity:.55;transform:scale(.88)}
  50%{opacity:1;transform:scale(1.14)}
}
.bot-ant{transform-origin:32px 13px;animation:bot-tilt 3.4s ease-in-out infinite}
@keyframes bot-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.bot-halo{animation:bot-halo 3.4s ease-in-out infinite}
@keyframes bot-halo{0%,100%{opacity:.5}50%{opacity:.85}}

/* Two blinks close together, then a long pause — the way eyes actually go. */
.bot-eye{transform-origin:center;animation:bot-blink 5.2s infinite}
@keyframes bot-blink{
  0%,90%,100%{transform:scaleY(1)}
  92%{transform:scaleY(.12)}
  94%{transform:scaleY(1)}
  96%{transform:scaleY(.12)}
  98%{transform:scaleY(1)}
}

.bot-smile{opacity:0;transition:opacity .3s ease}

/* Waving while nobody is talking to it. The pivot is the shoulder, at the
   bottom of the raised arm, so the hand swings and the body does not. */
.bot-wave{transform-origin:55px 39px;animation:bot-wave 3.4s ease-in-out infinite}
@keyframes bot-wave{
  0%,58%,100%{transform:rotate(0deg)}
  66%{transform:rotate(-19deg)}
  74%{transform:rotate(9deg)}
  82%{transform:rotate(-14deg)}
  92%{transform:rotate(0deg)}
}

/* The thumb stays down until there is something to be pleased about. */
.bot-thumb{opacity:0;transform-origin:12px 50px;transform:translateY(6px) scale(.6)}

/* Open the chat and it stops waving, smiles, and gives a thumbs up. */
.nbc.on .bot-wave{animation:none;transform:rotate(-14deg)}
.nbc.on .bot-smile{opacity:1}
.nbc.on .bot-thumb{
  animation:bot-thumb .7s cubic-bezier(.34,1.56,.64,1) .12s forwards
}
@keyframes bot-thumb{
  0%{opacity:0;transform:translateY(6px) scale(.6)}
  70%{opacity:1;transform:translateY(-2px) scale(1.1)}
  100%{opacity:1;transform:none}
}

/* ---------- Launcher ----------
   One clean soft green, top to bottom. It used to carry a four-stop
   gradient, a radial highlight and a hairline ring, all of which competed
   with the robot standing on it. --wa-leaf is the flat brand green; this
   is a gentler pair around it. */
.nbc-open{
  width:66px;height:66px;
  background:linear-gradient(165deg,#5FDC92,#22BF69);
  box-shadow:
    0 10px 26px -10px rgba(24,150,82,.5),
    0 2px 7px rgba(15,51,37,.14),
    inset 0 1px 0 rgba(255,255,255,.3)
}
/* The robot art sits high in its own box, so it is nudged down to look
   centred rather than measured to be. */
.nbc-open .bot{width:52px;height:52px;transform:translate(-1px,-1px)}
.nbc-open .bot-svg{width:100%;height:100%}
.nbc-open .nbc-open-i{width:52px;height:52px}
.nbc.on .nbc-open{
  background:linear-gradient(145deg,#3F4A44,#242E28);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.24)
}

/* Smaller in the hand. This block sits after the launcher above on purpose:
   the phone rules further up the file are written before it and were being
   overruled by it. */
@media (max-width:560px){
  .nbc-open{width:52px;height:52px}
  .nbc-open .bot,.nbc-open .nbc-open-i{width:41px;height:41px}
  .nbc-open .nbc-open-x svg{width:22px;height:22px}
  .nbc-dot{width:11px;height:11px;border-width:2px}
}

/* ---------- Header ---------- */
.nbc-av .bot{width:40px;height:40px}
.nbc-head{background:linear-gradient(120deg,#0F3325,#1C5B41 65%,#23704F)}
.nbc-live{border-color:#0F3325}

/* The shop's name, plainly. It used to type itself in behind a caret
   that stopped after five blinks and then sat there, which read as a
   half-finished animation rather than as a live service. */
.nbc-who b{display:flex;align-items:center;gap:7px;white-space:nowrap}
.nbc-who small{display:flex;align-items:center;gap:6px}
.nbc-onair{
  width:7px;height:7px;border-radius:50%;flex:none;background:#8FD26A;
  box-shadow:0 0 0 0 rgba(143,210,106,.7);
  animation:nbc-onair 2s ease-out infinite
}
@keyframes nbc-onair{
  0%{box-shadow:0 0 0 0 rgba(143,210,106,.7)}
  70%{box-shadow:0 0 0 7px rgba(143,210,106,0)}
  100%{box-shadow:0 0 0 0 rgba(143,210,106,0)}
}

.nbc-beat{
  display:inline-flex;align-items:flex-end;gap:2px;height:11px;flex:none
}
.nbc-beat i{
  width:2.5px;border-radius:2px;background:#8FD26A;
  animation:nbc-beat 1.15s ease-in-out infinite
}
.nbc-beat i:nth-child(1){height:5px;animation-delay:0s}
.nbc-beat i:nth-child(2){height:10px;animation-delay:.16s}
.nbc-beat i:nth-child(3){height:7px;animation-delay:.32s}
@keyframes nbc-beat{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .bot-body,.bot-bulb,.bot-ant,.bot-halo,.bot-eye,.bot-wave,.bot-thumb,
  .bot-sheen,.bot-ear-l,.bot-ear-r,
  .nbc-onair,.nbc-beat i{animation:none}
  .nbc.on .bot-thumb{opacity:1;transform:none}
}

/* ==========================================================================
   Attention: the ring, the nudge bubble and the robot's own idle motion

   A launcher in a corner is easy to miss. Every so often the button gives a
   small heave, a ring travels out of it, and a word slides out beside it.
   All of it stops for good the moment the chat has been opened once, and
   none of it runs under prefers-reduced-motion.
   ========================================================================== */

/* --- The travelling ring --- */
.nbc-ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid rgba(37,211,102,.8);opacity:0
}
.nbc.nudging .nbc-ring{animation:nbc-ring 2.6s ease-out 2}
@keyframes nbc-ring{
  0%{transform:scale(1);opacity:.65}
  60%,100%{transform:scale(1.85);opacity:0}
}

/* --- The button's heave --- */
.nbc.nudging .nbc-open{animation:nbc-heave 2.6s cubic-bezier(.34,1.56,.64,1) 2}
@keyframes nbc-heave{
  0%,55%,100%{transform:scale(1)}
  12%{transform:scale(1.14) rotate(-6deg)}
  24%{transform:scale(1.02) rotate(5deg)}
  36%{transform:scale(1.09) rotate(-3deg)}
  46%{transform:scale(1) rotate(0)}
}

/* --- The word beside it --- */
/* display on the class outranks the hidden attribute, so say it here. */
.nbc-nudge[hidden]{display:none}
.nbc-nudge{
  position:absolute;right:74px;bottom:11px;z-index:1;
  display:flex;align-items:center;gap:8px;
  max-width:min(62vw,250px);padding:11px 12px 11px 16px;
  border-radius:16px 16px 4px 16px;
  background:linear-gradient(160deg,#FFFFFF,#F2F7EF);
  border:1px solid rgba(15,51,37,.1);
  box-shadow:0 12px 30px -10px rgba(15,51,37,.35),0 2px 6px rgba(15,51,37,.08);
  opacity:0;transform:translateX(14px) scale(.92);transform-origin:100% 80%;
  transition:opacity .34s ease,transform .46s cubic-bezier(.19,.86,.24,1);
  pointer-events:none
}
.nbc-nudge.in{opacity:1;transform:none;pointer-events:auto}

/* the little tail, pointing back at the robot */
.nbc-nudge::after{
  content:"";position:absolute;right:-6px;bottom:9px;width:12px;height:12px;
  background:#F2F7EF;border-right:1px solid rgba(15,51,37,.1);
  border-bottom:1px solid rgba(15,51,37,.1);
  transform:rotate(-45deg);border-radius:0 0 3px 0
}

.nbc-nudge-t{
  min-width:1px;font:600 13.6px/1.4 inherit;color:var(--nbc-ink,#0F3325);
  white-space:nowrap;overflow:hidden
}
/* the caret that follows the typed text */
.nbc-nudge-t::after{
  content:"";display:inline-block;width:2px;height:1.02em;margin-inline-start:2px;
  vertical-align:-.16em;background:#25D366;animation:nbc-caret 1s steps(1) infinite
}
.nbc-nudge.done .nbc-nudge-t::after{animation:none;opacity:0}
@keyframes nbc-caret{0%,50%{opacity:1}51%,100%{opacity:0}}

.nbc-nudge-x{
  flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(15,51,37,.07);color:var(--nbc-muted,#5C6B60);
  display:grid;place-items:center;transition:background .18s,color .18s
}
.nbc-nudge-x svg{width:10px;height:10px}
.nbc-nudge-x:hover{background:rgba(15,51,37,.14);color:#0F3325}

/* --- The robot leans forward while it is nudging --- */
.nbc.nudging .nbc-open-i .bot-body{animation:nbc-lean 2.6s ease-in-out 2}
@keyframes nbc-lean{
  0%,100%{transform:none}
  20%{transform:translateY(-1.4px) rotate(-5deg)}
  40%{transform:translateY(0) rotate(4deg)}
  60%{transform:translateY(-1px) rotate(-2deg)}
}

/* Open the chat and none of this happens again. */
.nbc.met .nbc-ring,.nbc.met .nbc-nudge{display:none}

@media (max-width:560px){
  .nbc-nudge{right:58px;bottom:6px;padding:8px 9px 8px 12px}
  .nbc-nudge-t{font-size:12.8px}
}

@media (prefers-reduced-motion:reduce){
  .nbc-ring,.nbc-nudge{display:none}
  .nbc.nudging .nbc-open,.nbc.nudging .nbc-open-i .bot-body{animation:none}
}

/* ============================================================
   The robot pays attention

   Three small things, all driven by two numbers the script puts
   on the launcher: the eyes look towards the pointer, the head
   turns a little after them, and it smiles when somebody is
   about to click. None of it runs under reduce-motion, and with
   no pointer at all the numbers stay zero and it looks straight
   ahead.
   ============================================================ */
.bot-look{
  translate:calc(var(--lx, 0) * 1px) calc(var(--ly, 0) * 1px);
  transition:translate .28s cubic-bezier(.19,.86,.24,1)
}
.bot-body{
  rotate:calc(var(--lx, 0) * .5deg);
  transition:rotate .45s cubic-bezier(.19,.86,.24,1)
}
/* The ears lean with the head, so the whole thing turns rather than
   the face sliding about inside a fixed box. */
.bot-ant{
  translate:calc(var(--lx, 0) * .55px) 0;
  transition:translate .45s cubic-bezier(.19,.86,.24,1)
}

/* It smiles at somebody who is about to click, not only after they have. */
.nbc-open:hover .bot-smile,
.nbc.nudging .bot-smile{opacity:1}

/* And waves harder while it is trying to get your attention. */
.nbc.nudging .bot-wave{animation-duration:1.15s}

/* A held breath before the click: the whole robot leans in. */
.nbc-open:hover .bot{scale:1.04}
.bot{transition:scale .3s cubic-bezier(.34,1.56,.64,1)}

@media (prefers-reduced-motion:reduce){
  .bot-look,.bot-body,.bot-ant{translate:none;rotate:none;transition:none}
  .nbc-open:hover .bot{scale:1}
}

/* Happy eyes.

   The blink lives on each eye and animates its own transform, so the smile
   squashes the pair from the group above it instead — the two effects stack
   rather than fight. */
.bot-eyes{
  transform-box:fill-box;transform-origin:center;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1)
}
.nbc-open:hover .bot-eyes,
.nbc.nudging .bot-eyes{transform:scaleY(.66)}

@media (prefers-reduced-motion:reduce){
  .bot-eyes{transition:none}
  .nbc-open:hover .bot-eyes,.nbc.nudging .bot-eyes{transform:none}
}