/*
  Nexus AI V5 — 3D Living Orb Engine
  Logo-inspired, dependency-free animated orb.
  States:
  - nxv5-state-dormant
  - nxv5-state-attentive
  - nxv5-state-thinking
  - nxv5-state-alerting
  - nxv5-state-guiding
  - nxv5-state-celebrating
*/

.nxv5-orb{
  --nx-red:#c8102e;
  --nx-red2:#ef233c;
  --nx-dark:#111827;
  --nx-charcoal:#252525;
  --nx-silver:#d7dde7;
  --nx-white:#fff;
  --nx-blue:#2563eb;
  --nx-amber:#f59e0b;
  --nx-green:#16a34a;
  position:relative;
  width:78px;
  height:78px;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  perspective:720px;
  transform-style:preserve-3d;
  filter:drop-shadow(0 18px 28px rgba(15,23,42,.26));
  transition:transform .22s ease, filter .22s ease;
}

.nxv5-orb:hover{
  transform:translateY(-2px) scale(1.035);
  filter:drop-shadow(0 22px 40px rgba(200,16,46,.24));
}

.nxv5-orb-stage{
  position:relative;
  width:78px;
  height:78px;
  display:block;
  transform-style:preserve-3d;
  animation:nxv5-stage-float 5.2s ease-in-out infinite;
}

.nxv5-globe{
  position:absolute;
  inset:18px;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.95) 0 16%, rgba(255,255,255,.48) 17% 26%, transparent 27%),
    radial-gradient(circle at 52% 52%, #fff 0 26%, #f2f4f7 27% 38%, #cfd6df 69%, #8d98a8 100%);
  box-shadow:
    inset -10px -12px 16px rgba(15,23,42,.22),
    inset 7px 6px 10px rgba(255,255,255,.8),
    0 0 0 2px rgba(255,255,255,.85),
    0 0 18px rgba(200,16,46,.20);
  transform-style:preserve-3d;
  animation:nxv5-globe-rotate 8s linear infinite;
  z-index:4;
}

.nxv5-globe-shine{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.78),transparent 36%);
  z-index:5;
}

.nxv5-africa,
.nxv5-europe{
  position:absolute;
  display:block;
  background:linear-gradient(145deg,var(--nx-red2),var(--nx-red));
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
  opacity:.96;
  z-index:3;
}

/* Abstracted Nexus-logo globe continents; not a map dependency */
.nxv5-africa{
  width:18px;height:25px;
  left:20px;top:19px;
  border-radius:42% 58% 60% 40% / 35% 39% 61% 65%;
  transform:rotate(9deg);
  clip-path:polygon(45% 0,76% 10%,90% 30%,77% 51%,83% 72%,62% 100%,35% 87%,28% 67%,10% 52%,21% 30%);
}

.nxv5-europe{
  width:23px;height:13px;
  left:18px;top:12px;
  border-radius:50%;
  clip-path:polygon(0 45%,17% 16%,38% 22%,51% 0,72% 21%,100% 19%,88% 52%,64% 52%,55% 81%,29% 66%,12% 83%);
}

.nxv5-grid{
  position:absolute;
  inset:6px;
  border-radius:50%;
  opacity:.16;
  border:1px solid rgba(17,24,39,.55);
  z-index:2;
}

.nxv5-grid-x{transform:rotateX(62deg)}
.nxv5-grid-y{transform:rotateY(62deg)}

.nxv5-ring,
.nxv5-arc,
.nxv5-halo,
.nxv5-energy{
  position:absolute;
  border-radius:50%;
  display:block;
  transform-style:preserve-3d;
  pointer-events:none;
}

.nxv5-ring-silver{
  inset:14px;
  border:4px solid rgba(215,221,231,.78);
  border-left-color:rgba(122,133,148,.9);
  border-bottom-color:rgba(83,93,108,.45);
  transform:rotateX(66deg) rotateZ(-14deg);
  animation:nxv5-ring-spin 7.5s linear infinite;
  z-index:3;
}

.nxv5-arc-red{
  inset:4px;
  border:8px solid transparent;
  border-top-color:var(--nx-red2);
  border-left-color:var(--nx-red);
  transform:rotateX(62deg) rotateY(-18deg) rotateZ(-35deg);
  animation:nxv5-arc-red 4.8s linear infinite;
  filter:drop-shadow(0 0 10px rgba(200,16,46,.45));
  z-index:6;
}

.nxv5-arc-charcoal{
  inset:7px;
  border:7px solid transparent;
  border-right-color:#1f2937;
  border-bottom-color:#111827;
  transform:rotateX(66deg) rotateY(22deg) rotateZ(36deg);
  animation:nxv5-arc-charcoal 6.1s linear infinite reverse;
  filter:drop-shadow(0 0 8px rgba(17,24,39,.28));
  z-index:2;
}

.nxv5-node{
  position:absolute;
  width:15px;
  height:15px;
  border-radius:50%;
  display:block;
  z-index:8;
  box-shadow:inset 3px 3px 6px rgba(255,255,255,.55), inset -4px -4px 7px rgba(0,0,0,.23);
}

.nxv5-node-red{
  background:radial-gradient(circle at 30% 26%,#fff,#ff596d 22%,var(--nx-red) 66%,#7f1d1d 100%);
  top:3px;right:10px;
  animation:nxv5-node-red 4.8s linear infinite;
  filter:drop-shadow(0 0 10px rgba(200,16,46,.58));
}

.nxv5-node-dark{
  background:radial-gradient(circle at 30% 25%,#fff,#6b7280 24%,#111827 72%,#000 100%);
  bottom:7px;left:10px;
  animation:nxv5-node-dark 6.1s linear infinite reverse;
}

.nxv5-halo-a,
.nxv5-halo-b{
  inset:-5px;
  border:1px solid rgba(200,16,46,.18);
  opacity:.8;
  animation:nxv5-breathe 3.4s ease-in-out infinite;
}

.nxv5-halo-b{
  inset:-12px;
  border-color:rgba(37,99,235,.12);
  animation-delay:.65s;
}

.nxv5-energy{
  inset:0;
  background:
    radial-gradient(circle at 50% 96%, rgba(200,16,46,.28), transparent 26%),
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.46), transparent 22%);
  opacity:.75;
  mix-blend-mode:screen;
  animation:nxv5-energy 4.2s ease-in-out infinite;
  z-index:1;
}

.nxv5-state-dormant .nxv5-orb-stage{animation-duration:6.5s}
.nxv5-state-attentive .nxv5-halo-a{border-color:rgba(245,158,11,.34)}
.nxv5-state-attentive .nxv5-energy{background:radial-gradient(circle at 50% 96%, rgba(245,158,11,.32), transparent 28%)}
.nxv5-state-thinking .nxv5-arc-red,
.nxv5-state-thinking .nxv5-arc-charcoal,
.nxv5-state-thinking .nxv5-ring-silver{animation-duration:2.1s}
.nxv5-state-thinking .nxv5-halo-b{border-color:rgba(37,99,235,.36)}
.nxv5-state-alerting .nxv5-halo-a,
.nxv5-state-alerting .nxv5-halo-b{border-color:rgba(200,16,46,.55);animation-duration:1.25s}
.nxv5-state-alerting .nxv5-energy{opacity:1;background:radial-gradient(circle at 50% 92%, rgba(200,16,46,.55), transparent 35%)}
.nxv5-state-guiding .nxv5-halo-b{border-color:rgba(22,163,74,.28)}
.nxv5-state-celebrating .nxv5-energy{background:radial-gradient(circle at 50% 92%, rgba(22,163,74,.4), transparent 35%)}

@keyframes nxv5-stage-float{
  0%,100%{transform:rotateX(0deg) rotateY(0deg) translateY(0)}
  35%{transform:rotateX(8deg) rotateY(-12deg) translateY(-2px)}
  70%{transform:rotateX(-7deg) rotateY(12deg) translateY(1px)}
}

@keyframes nxv5-globe-rotate{
  0%{transform:rotateY(0deg) rotateX(0deg)}
  50%{transform:rotateY(180deg) rotateX(9deg)}
  100%{transform:rotateY(360deg) rotateX(0deg)}
}

@keyframes nxv5-ring-spin{
  to{transform:rotateX(66deg) rotateZ(346deg)}
}

@keyframes nxv5-arc-red{
  to{transform:rotateX(62deg) rotateY(-18deg) rotateZ(325deg)}
}

@keyframes nxv5-arc-charcoal{
  to{transform:rotateX(66deg) rotateY(22deg) rotateZ(396deg)}
}

@keyframes nxv5-node-red{
  0%{transform:translate3d(0,0,16px) scale(1)}
  25%{transform:translate3d(-36px,20px,22px) scale(.86)}
  50%{transform:translate3d(-44px,50px,4px) scale(.72)}
  75%{transform:translate3d(4px,40px,-10px) scale(.82)}
  100%{transform:translate3d(0,0,16px) scale(1)}
}

@keyframes nxv5-node-dark{
  0%{transform:translate3d(0,0,8px) scale(.88)}
  25%{transform:translate3d(42px,-21px,-5px) scale(.72)}
  50%{transform:translate3d(47px,-50px,10px) scale(.9)}
  75%{transform:translate3d(-4px,-38px,19px) scale(1)}
  100%{transform:translate3d(0,0,8px) scale(.88)}
}

@keyframes nxv5-breathe{
  0%,100%{transform:scale(.92);opacity:.22}
  50%{transform:scale(1.14);opacity:.82}
}

@keyframes nxv5-energy{
  0%,100%{transform:scale(.96) rotateZ(0deg);opacity:.48}
  50%{transform:scale(1.08) rotateZ(14deg);opacity:.95}
}

@media (prefers-reduced-motion: reduce){
  .nxv5-orb-stage,
  .nxv5-globe,
  .nxv5-ring-silver,
  .nxv5-arc-red,
  .nxv5-arc-charcoal,
  .nxv5-node-red,
  .nxv5-node-dark,
  .nxv5-halo,
  .nxv5-energy{animation:none!important}
}

/* NexusAI Orb VNext production shell: ensures the real red 3D globe replaces legacy blue orb. */
.hnx-nexus-orb,
.nxv4-orb-vnext,
.nxv5-orb{
  --nexus-red:#e30613;
  --nexus-red-hot:#ff2d1b;
  --nexus-graphite:#080a0f;
  position:relative;
  width:86px;
  height:86px;
  border:0;
  border-radius:50%;
  padding:0;
  margin:0;
  display:grid;
  place-items:center;
  overflow:visible;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,6,19,.22), rgba(5,6,10,.20) 48%, transparent 70%);
  cursor:pointer;
  isolation:isolate;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.42)) drop-shadow(0 0 20px rgba(227,6,19,.22));
  transition:transform .22s ease, filter .22s ease;
}
.hnx-nexus-orb:hover,
.nxv4-orb-vnext:hover,
.nxv5-orb:hover{
  transform:translateY(-2px) scale(1.035);
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.48)) drop-shadow(0 0 28px rgba(227,6,19,.36));
}
.hnx-nexus-orb-host,
.nxv5-orb-host,
.nexus-orb-vnext-host{
  position:absolute;
  inset:-14px;
  display:block;
  border-radius:50%;
  overflow:visible;
  pointer-events:none;
  background:transparent;
}
.hnx-nexus-orb-host canvas,
.nxv5-orb-host canvas,
.nexus-orb-vnext-host canvas{
  width:100% !important;
  height:100% !important;
  display:block;
  border-radius:50%;
}
.hnx-nexus-orb.is-vnext::before,
.nxv4-orb-vnext::before,
.nxv5-orb.is-vnext::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(227,6,19,.22);
  box-shadow:0 0 24px rgba(227,6,19,.18), inset 0 0 18px rgba(255,255,255,.08);
  pointer-events:none;
  animation:nexus-orb-shell-pulse 3.6s ease-in-out infinite;
}
.hnx-nexus-dot{
  position:absolute;
  right:7px;
  top:8px;
  z-index:5;
}
.nexus-orb-fallback-active .nexus-orb-fallback-art{
  position:absolute;
  inset:-18px;
  border-radius:50%;
  display:block;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.92), transparent 16%),
    radial-gradient(circle at 48% 50%, rgba(227,6,19,.95) 0 28%, rgba(15,17,22,.94) 29% 52%, rgba(227,6,19,.24) 53% 60%, transparent 61%),
    url('/img/nexus-orb-real-preview.png') center/cover no-repeat;
  box-shadow:inset 0 0 18px rgba(255,255,255,.20), inset -16px -10px 24px rgba(0,0,0,.50), 0 0 28px rgba(227,6,19,.35);
  animation:nexus-orb-fallback-spin 8s linear infinite;
}
.nexus-orb-fallback-active .nexus-orb-fallback-art::before,
.nexus-orb-fallback-active .nexus-orb-fallback-art::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:rgba(227,6,19,.95);
  border-left-color:rgba(227,6,19,.80);
  border-right-color:rgba(210,218,226,.55);
  transform:rotateX(66deg) rotateZ(-20deg);
  filter:drop-shadow(0 0 9px rgba(227,6,19,.45));
}
.nexus-orb-fallback-active .nexus-orb-fallback-art::after{
  inset:2px;
  border-width:3px;
  border-top-color:rgba(210,218,226,.72);
  border-left-color:transparent;
  border-right-color:rgba(25,29,35,.88);
  transform:rotateX(64deg) rotateY(18deg) rotateZ(48deg);
}
@keyframes nexus-orb-shell-pulse{
  0%,100%{opacity:.66;transform:scale(.985)}
  50%{opacity:1;transform:scale(1.035)}
}
@keyframes nexus-orb-fallback-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .hnx-nexus-orb-host canvas,
  .nxv5-orb-host canvas,
  .nexus-orb-vnext-host canvas{animation:none!important}
  .nexus-orb-fallback-active .nexus-orb-fallback-art{animation:none!important}
}
/* Hard override legacy V4 blue/amber state backgrounds when VNext is active.
   #nxv4-orb always renders the vnext canvas host (see _NexusAiV4Presence.cshtml)
   but nothing in JS ever adds a "nxv4-orb-vnext" class to the button, so the
   class-only selectors below never matched live markup. Matching by id keeps
   the class selectors (harmless/no-op) while actually suppressing the legacy
   amber/red glow that was bleeding out around the 3D orb on every state change. */
.nxv4-orb.nxv4-orb-vnext,
.nxv4-orb.nxv4-orb-vnext.attentive,
.nxv4-orb.nxv4-orb-vnext.thinking,
.nxv4-orb.nxv4-orb-vnext.alerting,
.nxv4-orb.nxv4-orb-vnext.guiding,
.nxv4-orb.nxv4-orb-vnext.celebrating,
.nxv4-orb.nxv4-orb-vnext.dormant,
#nxv4-orb{
  width:86px;
  height:86px;
  background:radial-gradient(circle at 50% 50%, rgba(227,6,19,.22), rgba(5,6,10,.20) 48%, transparent 70%) !important;
  box-shadow:none !important;
}
.nxv4-orb.nxv4-orb-vnext .nxv4-orb-core,
.nxv4-orb.nxv4-orb-vnext .nxv4-orb-ring,
#nxv4-orb .nxv4-orb-core,
#nxv4-orb .nxv4-orb-ring{display:none!important}

/* --------------------------------------------------------------------------
   NexusAI Orb VNext Smooth/Wide Patch
   Purpose: fixes jerky dock animation and opens the moon orbits dramatically.
   Loaded after nexus-ai-v4-presence.css, so these rules override the legacy blue orb.
---------------------------------------------------------------------------- */
.nxv4-presence{
  right:34px !important;
  bottom:32px !important;
  overflow:visible !important;
}
.hnx-nexus-orb,
.nxv4-orb-vnext,
.nxv5-orb{
  width:104px !important;
  height:104px !important;
  overflow:visible !important;
  background:radial-gradient(circle at 50% 50%, rgba(227,6,19,.18), rgba(5,6,10,.18) 48%, transparent 72%) !important;
  contain:layout style;
  will-change:transform,filter;
  transform:translateZ(0);
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.46)) drop-shadow(0 0 24px rgba(227,6,19,.26));
}
.hnx-nexus-orb-host,
.nxv5-orb-host,
.nexus-orb-vnext-host{
  position:absolute !important;
  inset:-52px !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  border-radius:50%;
  overflow:visible !important;
  pointer-events:none !important;
  background:transparent !important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hnx-nexus-orb-host canvas,
.nxv5-orb-host canvas,
.nexus-orb-vnext-host canvas{
  width:100% !important;
  height:100% !important;
  display:block !important;
  border-radius:50%;
  image-rendering:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hnx-nexus-orb.is-vnext::before,
.nxv4-orb-vnext::before,
.nxv5-orb.is-vnext::before{
  inset:-24px !important;
  border:1px solid rgba(227,6,19,.20);
  box-shadow:0 0 30px rgba(227,6,19,.20), inset 0 0 18px rgba(255,255,255,.07);
  animation:nexus-orb-shell-pulse 4.8s ease-in-out infinite;
}
.nxv4-orb.nxv4-orb-vnext,
.nxv4-orb.nxv4-orb-vnext.attentive,
.nxv4-orb.nxv4-orb-vnext.thinking,
.nxv4-orb.nxv4-orb-vnext.alerting,
.nxv4-orb.nxv4-orb-vnext.guiding,
.nxv4-orb.nxv4-orb-vnext.celebrating,
.nxv4-orb.nxv4-orb-vnext.dormant,
#nxv4-orb{
  width:104px !important;
  height:104px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 50% 50%, rgba(227,6,19,.18), rgba(5,6,10,.18) 48%, transparent 72%) !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.nxv4-orb.nxv4-orb-vnext .nxv4-orb-core,
.nxv4-orb.nxv4-orb-vnext .nxv4-orb-ring,
#nxv4-orb .nxv4-orb-core,
#nxv4-orb .nxv4-orb-ring{
  display:none !important;
}
.nexus-orb-fallback-active .nexus-orb-fallback-art{
  inset:-42px !important;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.45));
  animation:nexus-orb-fallback-spin 14s linear infinite !important;
}
@media(max-width:640px){
  .nxv4-presence{right:22px !important;bottom:22px !important;}
  .hnx-nexus-orb,.nxv4-orb-vnext,.nxv5-orb,#nxv4-orb{width:88px !important;height:88px !important;}
  .hnx-nexus-orb-host,.nxv5-orb-host,.nexus-orb-vnext-host{inset:-42px !important;}
}
@media (prefers-reduced-motion: reduce){
  .hnx-nexus-orb,.nxv4-orb-vnext,.nxv5-orb,#nxv4-orb{filter:drop-shadow(0 16px 28px rgba(0,0,0,.34));}
  .hnx-nexus-orb.is-vnext::before,.nxv4-orb-vnext::before,.nxv5-orb.is-vnext::before{animation:none !important;}
}