/**
 * =========================================================
 * ORDBITS PRO-CORE — ONYX AVATAR CSS (CRYSTAL CORE V2)
 * Route: /modules/onyx/onyx.avatar.css
 * What this file does:
 * - Tunes dashboard and mini avatar surfaces for the new ONYX crystal runtime
 * - Preserves transparent sovereign stage on dashboard
 * - Keeps a stronger contained mini-avatar presentation for module mirrors
 * =========================================================
 */

.onyx-avatar-shell {
  position: relative;
  box-sizing: border-box;
}

.onyx-avatar-shell--dashboard {
  width: 100%;
  margin: 0 0 18px 0;
}

.onyx-avatar-shell--mini {
  position: fixed;
  right: var(--onyx-mini-offset-x, 18px);
  bottom: var(--onyx-mini-offset-y, 18px);
  z-index: 9998;
  width: 118px;
  height: 142px;
}

.onyx-avatar-large {
  position: relative;
  width: 100%;
  min-height: 520px;
  height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  isolation: isolate;
}

.onyx-avatar-large::before,
.onyx-avatar-large::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.onyx-avatar-large::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 240, 255, 0.12), transparent 30%),
    radial-gradient(circle at 54% 58%, rgba(112, 76, 255, 0.08), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(4, 9, 20, 0.42), transparent 44%);
  filter: blur(16px);
}

.onyx-avatar-large::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 24%, transparent 76%, rgba(0,240,255,0.04)),
    radial-gradient(circle at center, transparent 56%, rgba(0, 230, 255, 0.03) 100%);
}

.onyx-avatar-mini {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(88, 166, 255, 0.24);
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 240, 255, 0.16), rgba(15, 23, 42, 0.12) 40%, rgba(2, 6, 23, 0.92) 72%),
    #020617;
  box-shadow:
    0 14px 36px rgba(2, 6, 23, 0.52),
    0 0 26px rgba(88, 166, 255, 0.14),
    inset 0 0 18px rgba(255,255,255,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.onyx-avatar-mini-badge {
  position: absolute;
  right: 4px;
  bottom: 0;
  min-width: 82px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(4, 12, 24, 0.94);
  border: 1px solid rgba(88, 166, 255, 0.28);
  color: #a9efff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.34);
  pointer-events: none;
}

.onyx-avatar-mini:hover {
  transform: scale(1.04);
  box-shadow:
    0 16px 42px rgba(2, 6, 23, 0.62),
    0 0 32px rgba(0, 240, 255, 0.22),
    inset 0 0 22px rgba(255,255,255,0.05);
}

.onyx-avatar-mini canvas,
.onyx-avatar-large canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .onyx-avatar-large {
    min-height: 360px;
    height: 360px;
  }

  .onyx-avatar-shell--mini {
    right: 12px;
    bottom: 12px;
    width: 88px;
    height: 110px;
  }

  .onyx-avatar-mini {
    width: 88px;
    height: 88px;
  }

  .onyx-avatar-mini-badge {
    min-width: 66px;
    padding: 3px 8px;
    font-size: 9px;
  }
}


/* =========================================================
   ONYX MINI ORB AVATAR
   Visual-only replacement for the floating Onyx anchor.
   Based on the legacy Orbi AI artifact, renamed and isolated.
   No ORBI label, no Advisor/Executor text, no legacy menu.
   ========================================================= */

.onyx-avatar-shell--mini {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
}

.onyx-avatar-shell--mini.is-dragging {
  cursor: grabbing;
}

.onyx-avatar-mini.onyx-avatar-mini--orb {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.onyx-avatar-shell--mini:hover .onyx-avatar-mini--orb {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(0, 243, 255, 0.52));
}

.onyx-orb-avatar {
  --onyx-orb-color: var(--module-color, #00f3ff);
  --onyx-orb-size: 56px;

  width: var(--onyx-orb-size);
  height: var(--onyx-orb-size);
  min-width: var(--onyx-orb-size);
  min-height: var(--onyx-orb-size);
  position: relative;
  border-radius: 50%;
  cursor: inherit;
  pointer-events: none;
  perspective: 1000px;
  transform: translateZ(0);
  filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.78));
}

.onyx-orb-avatar::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 34%),
    radial-gradient(circle at center, rgba(0, 243, 255, 0.22), rgba(0, 243, 255, 0.04) 48%, transparent 72%);
  box-shadow:
    inset 0 0 16px rgba(0, 243, 255, 0.32),
    0 0 18px rgba(0, 243, 255, 0.28);
}

.onyx-orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--onyx-orb-color);
  box-shadow: 0 0 10px var(--onyx-orb-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.64;
  pointer-events: none;
}

.onyx-orb-ring-outer {
  width: 100%;
  height: 100%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: onyxOrbSpin 4s linear infinite;
}

.onyx-orb-ring-inner {
  width: 70%;
  height: 70%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: onyxOrbSpinReverse 3s linear infinite;
}

.onyx-orb-ring-data {
  width: 140%;
  height: 140%;
  border: 1px dashed var(--onyx-orb-color);
  opacity: 0.22;
  animation: onyxOrbSpin 10s linear infinite;
}

.onyx-orb-core-prism {
  width: 40%;
  height: 40%;
  position: absolute;
  top: 30%;
  left: 30%;
  transform-style: preserve-3d;
  animation: onyxOrbFloatCore 3s ease-in-out infinite;
  z-index: 2;
}

.onyx-orb-prism-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--onyx-orb-color);
  opacity: 0.72;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 15px var(--onyx-orb-color);
}

.onyx-orb-f1 { transform: rotateY(0deg) translateZ(5px); }
.onyx-orb-f2 { transform: rotateY(90deg) translateZ(5px); }
.onyx-orb-f3 { transform: rotateY(45deg) translateZ(5px); opacity: 0.42; }
.onyx-orb-f4 { transform: rotateY(-45deg) translateZ(5px); opacity: 0.42; }

.onyx-orb-core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 22px var(--onyx-orb-color),
    0 0 48px var(--onyx-orb-color),
    0 0 72px rgba(0, 243, 255, 0.55);
  animation: onyxOrbPulseCore 2s infinite;
  z-index: 3;
}

@keyframes onyxOrbSpin {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes onyxOrbSpinReverse {
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes onyxOrbFloatCore {
  0%, 100% { transform: rotateY(0deg) translateY(0); }
  50% { transform: rotateY(180deg) translateY(-5px); }
}

@keyframes onyxOrbPulseCore {
  0%, 100% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@media (max-width: 768px) {
  .onyx-avatar-shell--mini {
    width: 68px;
    height: 68px;
  }

  .onyx-avatar-mini.onyx-avatar-mini--orb {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
  }

  .onyx-orb-avatar {
    --onyx-orb-size: 48px;
  }
}