/* VARIANT D v4 - THE LIVE PANEL.
   News-card glass. Speak/Chat pills gate two states. Chat FLIP-shrinks the
   SAME living medallion into the thread's corner seat - no image swap - and
   swaps the pills for a "prefer to speak?" line plus a close cross. The
   float window wears the brand mesh and follows the same grammar. Every
   close is an animated furl. */

.at-hero{padding:clamp(96px,calc(100vh - 700px),200px) 0 96px}
.nxa-fig,.nxa-card{display:none !important}

/* the red CTA leaves the copy column for the panel; the countries line
   rises above the headline as a quiet opener */
.at-hero .at-hero-in{display:flex;flex-direction:column;align-items:flex-start}
.at-hero .at-hero-in > *:has(.at-cta){display:none}
.at-hero .at-hero-in > *:has(.at-hero-legend){order:-1}
.at-hero .at-hero-legend{margin-top:0;margin-bottom:26px}

/* S3: four snapshot boxes, two by two. An opening card lifts above its
   neighbours and goes near-solid so the reveal stays readable. */
.nx-cards{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:640px;
  margin-top:clamp(24px,calc(100vh - 800px),44px)}
.nx-slot{z-index:1;transition:opacity .3s ease}
.nx-slot:hover,.nx-slot:focus-within{z-index:6}
.nx-cards:has(.nx-slot:nth-child(1) .nx-card:hover) .nx-slot:nth-child(3),
.nx-cards:has(.nx-slot:nth-child(2) .nx-card:hover) .nx-slot:nth-child(4){
  opacity:0;pointer-events:none}

/* the wordmark is baked into the logo image; the duplicate text span
   only ever doubled it */
.mn .mn-word{display:none !important}

/* the bar goes white the moment the page moves */
.mn.nx-solid{--bar-bg:rgba(255,255,255,.9) !important;
  --bar-line:rgba(0,0,0,.08) !important;
  --ink:#1d1d1f !important;--muted:#6e6e73 !important;--faint:#a5a5ad !important}

/* ---- the panel: the nx-card glass, verbatim, no shimmer ----------------- */
.nxdP{position:absolute;top:0;right:0;width:344px;height:566px;
  display:flex;flex-direction:column;align-items:center;
  border-radius:16px;overflow:hidden;pointer-events:auto;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 18px 40px -26px rgba(0,0,0,.6);
  transform-origin:100% 100%;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
  animation:nxd-rise .8s cubic-bezier(.22,1,.36,1) both}
.nxdP.is-away{opacity:0;transform:translate(40px,150px) scale(.3);pointer-events:none}
@keyframes nxd-rise{0%{opacity:0;translate:0 18px}100%{opacity:1;translate:0 0}}

.nxd-head{padding:22px 20px 0;text-align:center;flex:none;
  transition:opacity .3s ease,translate .3s ease}
.nxdP.mode-chat .nxd-head{opacity:0;pointer-events:none;translate:0 -8px}
.nxd-head b{font-family:var(--ui,system-ui);font-size:17px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:9px;justify-content:center}
.nxd-head .sub{display:block;margin-top:5px;font-family:var(--ui,system-ui);
  font-size:12.5px;font-weight:300;line-height:1.45;color:rgba(255,255,255,.78)}

.nxd-req{display:block;margin:15px auto 0;flex:none;position:relative;z-index:4;
  cursor:pointer;font-family:var(--ui,system-ui);font-size:14.5px;font-weight:500;
  color:#fff;background:#c8102e;border:1px solid #c8102e;
  border-radius:var(--r,8px);padding:10px 26px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,
             opacity .3s ease,translate .3s ease}
.nxd-req:hover{background:#fff;border-color:#fff;color:#c8102e}
.nxdP.mode-chat .nxd-req,.nxdP.is-live .nxd-req{
  opacity:0;pointer-events:none;translate:0 -8px}
/* she is live: the request button has done its job, the way into chat
   takes its seat */
.nxd-vline{position:absolute;left:26px;right:26px;top:116px;z-index:4;
  display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .35s ease .25s}
.nxdP.is-live .nxd-vline{opacity:1;pointer-events:auto}
.nxd-vline > span{flex:1;font-family:var(--ui,system-ui);font-size:11.5px;
  font-weight:300;line-height:1.4;color:rgba(255,255,255,.72)}

/* the cross back to the original screen, chat mode only */
.nxd-x{position:absolute;top:12px;right:12px;z-index:7;
  border:0;background:transparent;color:rgba(255,255,255,.65);
  font-size:21px;line-height:1;cursor:pointer;padding:4px 7px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease .25s,color .2s ease,transform .3s ease}
.nxdP.mode-chat .nxd-x{opacity:1;pointer-events:auto}
.nxd-x:hover{color:#fff;transform:rotate(90deg)}

/* ---- the medallion: one object, FLIP-shrunk between modes --------------- */
.nxd-stage{position:absolute;top:170px;left:50%;width:224px;height:224px;
  margin-left:-112px;z-index:3;pointer-events:none;will-change:transform;
  transition:transform .62s cubic-bezier(.45,.05,.2,1)}
.nxd-stage img{position:absolute;top:-27px;left:50%;transform:translateX(-50%);
  width:260px;max-width:none;display:block;opacity:0;transition:opacity .95s ease}
.nxd-stage img.is-on{opacity:1}
.nxd-ring{position:absolute;inset:-14px;width:calc(100% + 28px);
  height:calc(100% + 28px);overflow:visible;transition:opacity .3s ease}
.nxd-ring rect{fill:url(#nxdGrad);transform-box:fill-box;
  transform-origin:center bottom;transform:scaleY(.3);opacity:.85;
  animation:nxd-eqr 1.6s ease-in-out infinite}
@keyframes nxd-eqr{
  0%{transform:scaleY(.22);opacity:.55}
  50%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.22);opacity:.55}
}
.nxd-stage.to-corner .nxd-ring{opacity:0}
/* Speak pressed: the ring surges and a live chip confirms she is on */
.nxdP.is-live .nxd-ring{filter:brightness(1.35) saturate(1.3)}
.nxdP.is-live .nxd-ring rect{animation-duration:.55s !important}
.nxd-livechip{position:absolute;top:396px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:7px;pointer-events:none;
  font-family:var(--ui,system-ui);font-size:11.5px;font-weight:400;color:#fff;
  background:rgba(200,16,46,.30);border:1px solid rgba(232,148,75,.55);
  border-radius:100px;padding:5px 13px;opacity:0;transition:opacity .3s ease}
.nxdP.is-live .nxd-livechip{opacity:1}
.nxd-livechip::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#e8944b;animation:nxd-pulse 1.2s ease-out infinite}
@keyframes nxd-pulse{
  0%{box-shadow:0 0 0 0 rgba(232,148,75,.6)}
  70%{box-shadow:0 0 0 7px rgba(232,148,75,0)}
  100%{box-shadow:0 0 0 0 rgba(232,148,75,0)}}


/* ---- voice mode: the prompts live outside, ready to be spoken ----------- */
.nxd-asks{position:absolute;left:22px;right:22px;top:430px;z-index:2;
  display:flex;flex-direction:column;gap:7px;
  transition:opacity .3s ease,translate .35s ease}
.nxdP.mode-chat .nxd-asks{opacity:0;translate:0 10px;pointer-events:none}
.nxd-ask{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:transparent;border:0;padding:5px 2px}
.nxd-ask i{width:6px;height:6px;border-radius:50%;flex:none;font-style:normal;
  background:var(--ember-ramp,linear-gradient(90deg,#c8102e,#e8944b))}
.nxd-ask em{font-style:normal;font-family:var(--ui,system-ui);font-size:12.5px;
  font-weight:300;color:rgba(255,255,255,.88)}
.nxd-ask:hover em{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- chat mode ---------------------------------------------------------- */
.nxd-chat{position:absolute;left:0;right:0;top:14px;bottom:0;z-index:1;
  display:flex;flex-direction:column;padding:12px 14px 14px;min-height:0;
  opacity:0;pointer-events:none;translate:0 14px;
  transition:opacity .4s ease .28s,translate .5s cubic-bezier(.22,1,.36,1) .28s}
.nxdP.mode-chat .nxd-chat{opacity:1;pointer-events:auto;translate:0 0}
/* the invitation back to voice */
.nxd-sline{display:flex;align-items:center;gap:10px;flex:none;margin-bottom:8px}
/* in the hero panel the words go; one centred Speak, the seat at right */
.nxdP .nxd-sline{position:relative;justify-content:center;min-height:44px;
  margin-bottom:10px;padding-right:0}
.nxdP .nxd-sline > span:not(.seat){display:none}
.nxdP .nxd-sline .nxd-sbtn{margin:0 auto}
.nxdP .nxd-sline .seat{position:absolute;right:26px;top:0;margin:0}
.nxd-sline > span{flex:1;font-family:var(--ui,system-ui);font-size:11.5px;
  font-weight:300;line-height:1.4;color:rgba(255,255,255,.72)}
.nxd-sbtn{flex:none;cursor:pointer;font-family:var(--ui,system-ui);font-size:12.5px;
  font-weight:500;padding:6px 18px;border-radius:100px;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  transition:background .25s ease,border-color .25s ease}
.nxd-sbtn:hover{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  border-color:transparent}
/* the seat the medallion shrinks into, top right beside the cross */
.nxd-sline .seat{width:44px;height:44px;flex:none;margin-right:26px}
.nxd-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:4px 2px;min-height:0}
.nxd-log::-webkit-scrollbar{width:0}
.nxd-msg{max-width:84%;padding:8px 13px;border-radius:14px;
  font-family:var(--ui,system-ui);font-size:13px;font-weight:300;
  line-height:1.45;color:#fff}
.nxd-msg.me{background:rgba(255,255,255,.15);align-self:flex-end;
  border-bottom-right-radius:4px}
.nxd-msg.nexy{background:rgba(10,22,44,.55);border:1px solid rgba(255,255,255,.18);
  align-self:flex-start;border-bottom-left-radius:4px}
.nxd-sugg{display:flex;flex-direction:column;gap:6px;flex:none;margin:8px 0 2px}
.nxd-sugg button{text-align:left;cursor:pointer;font-family:var(--ui,system-ui);
  font-size:12px;font-weight:300;color:rgba(255,255,255,.85);
  background:rgba(10,22,44,.42);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:8px 12px;transition:background .25s ease}
.nxd-sugg button:hover{background:rgba(10,22,44,.68)}
.nxd-inrow{display:flex;gap:8px;margin-top:8px;flex:none}
.nxd-inrow input{flex:1;height:40px;min-width:0;
  background:rgba(10,22,44,.5);border:1px solid rgba(255,255,255,.25);
  border-radius:100px;color:#fff;padding:0 16px;outline:none;
  font-family:var(--ui,system-ui);font-size:13px;font-weight:300}
.nxd-inrow input::placeholder{color:rgba(255,255,255,.5)}
.nxd-inrow input:focus{border-color:rgba(255,255,255,.5)}
/* the send arrow, white so it stands out */
.nxd-send{width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid #fff;background:#fff;color:#0a1d33;font-size:15px;
  line-height:1;transition:background .25s ease,color .25s ease}
.nxd-send:hover{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  border-color:transparent;color:#fff}

/* ---- consent gate ------------------------------------------------------- */
.nxd-consent{position:absolute;inset:0;z-index:8;display:none;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(8,16,32,.72);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);border-radius:inherit}
.nxd-consent.is-open{display:flex;animation:nxd-unfurl .35s cubic-bezier(.22,1,.36,1) both}
.nxd-consent.is-closing{animation:nxd-furl .3s ease both}
.nxd-consent > div{background:rgba(16,28,52,.96);border:1px solid rgba(255,255,255,.24);
  border-radius:14px;padding:20px 18px;text-align:center;max-width:270px}
.nxd-consent p{font-family:var(--ui,system-ui);font-size:12.5px;font-weight:300;
  line-height:1.55;color:rgba(255,255,255,.85);margin:0 0 14px}
.nxd-consent p a{color:#fff;text-decoration:underline}
.nxd-consent button{cursor:pointer;font-family:var(--ui,system-ui);font-size:13px;
  font-weight:500;border-radius:100px;padding:9px 20px}
.nxd-agree{background:#fff;border:1px solid #fff;color:#0a1d33;margin-right:8px}
.nxd-later{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}

/* ---- the dock: a card with presence, not a sliver ----------------------- */
.nxd-pill{position:fixed;right:26px;bottom:26px;z-index:400;cursor:pointer;
  display:flex;align-items:center;gap:15px;text-align:left;
  background:rgba(16,28,52,.55);border:1px solid rgba(255,255,255,.32);
  border-radius:100px;padding:8px 22px 8px 9px;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 60px -22px rgba(0,0,0,.65);
  opacity:0;transform:translateY(30px) scale(.7);transform-origin:100% 100%;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.34,1.4,.64,1) .22s,
             transform .45s cubic-bezier(.34,1.4,.64,1) .22s,
             box-shadow .3s ease}
.nxd-pill:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,
  0 30px 70px -22px rgba(0,0,0,.8)}
.nxd-pill.is-in{opacity:1;transform:none;pointer-events:auto}
.nxd-pill:not(.is-in){transition-delay:0s;transition-duration:.3s}
.nxd-pill.is-tucked{opacity:0;transform:translateY(16px) scale(.72);
  pointer-events:none;transition-delay:0s;transition-duration:.28s}
.nxd-pill .por{position:relative;width:46px;height:46px;flex:none}
.nxd-pill .por::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 210deg,#c8102e,#e0563b,#e8944b,#c8102e);
  animation:nxd-spin 9s linear infinite}
@keyframes nxd-spin{to{transform:rotate(360deg)}}
.nxd-pill img{position:relative;width:46px;height:46px;border-radius:50%;
  object-fit:cover;border:2px solid #101c34;background:#152647;display:block}
.nxd-pill .txt{display:flex;flex-direction:column;gap:2px}
.nxd-pill b{font-family:var(--ui,system-ui);font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:#fff}
.nxd-pill .s2{display:flex;align-items:center;gap:7px;
  font-family:var(--ui,system-ui);font-size:11px;font-weight:300;
  color:rgba(255,255,255,.75)}
.nxd-wave{display:inline-flex;align-items:center;gap:2.5px;height:14px}
.nxd-wave i{width:2.5px;border-radius:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#e8944b,#c8102e));
  animation:nxd-eq 1.1s ease-in-out infinite}
.nxd-wave i:nth-child(1){height:6px}
.nxd-wave i:nth-child(2){height:10px;animation-delay:.18s}
.nxd-wave i:nth-child(3){height:14px;animation-delay:.36s}
.nxd-wave i:nth-child(4){height:9px;animation-delay:.54s}
.nxd-wave i:nth-child(5){height:5px;animation-delay:.72s}
@keyframes nxd-eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* ---- the floating window, on the brand mesh ----------------------------- */
.nxd-float{position:fixed;right:26px;bottom:88px;z-index:401;width:344px;height:500px;
  display:none;flex-direction:column;border-radius:16px;overflow:hidden;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  transform-origin:100% 100%}
.nxd-float.is-open{display:flex;animation:nxd-unfurl .45s cubic-bezier(.22,1,.36,1) both}
.nxd-float.is-closing{animation:nxd-furl .34s cubic-bezier(.55,0,.55,.2) both}
@keyframes nxd-unfurl{0%{opacity:0;transform:translateY(26px) scale(.82)}
  100%{opacity:1;transform:none}}
@keyframes nxd-furl{0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(26px) scale(.82)}}
.nxd-fhead{display:flex;align-items:center;gap:10px;flex:none;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.14)}
.nxd-fhead img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.3);background:#152647}
.nxd-fhead b{font-family:var(--ui,system-ui);font-size:14px;font-weight:600;color:#fff}
.nxd-fhead span{display:block;font-family:var(--ui,system-ui);font-size:11px;
  font-weight:300;color:rgba(255,255,255,.65);margin-top:1px}
.nxd-fx{margin-left:auto;border:0;background:transparent;color:rgba(255,255,255,.6);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;
  transition:color .2s ease,transform .3s ease}
.nxd-fx:hover{color:#fff;transform:rotate(90deg)}
.nxd-fsline{padding:10px 14px 0;flex:none}
.nxd-fbody{position:relative;flex:1;min-height:0}
.nxd-fvoice{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:14px;padding:10px 16px 14px;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.nxd-fasks{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:2px}
.nxd-fasks .nxd-ask{width:100%}
.nxd-float.fmode-voice .nxd-fvoice .nxd-ring{filter:brightness(1.35) saturate(1.3)}
.nxd-float.fmode-voice .nxd-fvoice .nxd-ring rect{animation-duration:.55s !important}
.nxd-fvoice .nxd-livechip{position:static;transform:none;opacity:1}
.nxd-float.fmode-voice .nxd-fvoice{opacity:1;pointer-events:auto}
.nxd-fstage{position:relative;width:180px;height:180px}
.nxd-fstage img{position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:209px;max-width:none;display:block}
.nxd-float .nxd-chat{position:absolute;inset:0;top:0;opacity:1;pointer-events:auto;
  translate:0 0;transition:opacity .35s ease}
.nxd-float.fmode-voice .nxd-chat{opacity:0;pointer-events:none}

@media(max-height:830px){
  .nxdP{height:524px}
  .nxd-stage{top:184px;width:172px;height:172px;margin-left:-86px}
  .nxd-stage img{width:200px;top:-21px}
  .nxd-livechip{top:362px}
  .nxd-asks{top:396px}
}
@media(max-width:1119px){.nxdP{display:none}}
@media(max-width:640px){.nxd-float{right:12px;left:12px;width:auto}}
@media(prefers-reduced-motion:reduce){
  .nxdP{animation:none;transition:opacity .3s ease}
  .nxd-ring rect,.nxd-wave i{animation:none}
  .nxd-stage{transition:none}
  .nxd-stage img{transition:none}
}