/* css hologram girl, cyan light, no portrait files */

.chix-avatar {
  --size: 48px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  cursor: pointer;
  filter: drop-shadow(0 0 8px #5cefff88);
  animation: float 4s ease-in-out infinite;
}

.chix-avatar.hero { --size: 92px; }
.chix-avatar.tiny { --size: 28px; animation: none; cursor: default; }

.holo-girl i { position: absolute; display: block; font-style: normal; }

.holo-girl::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #5cefff22 3px 4px);
  animation: scan 2.8s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.holo-hair {
  position: absolute;
  top: 6%;
  width: 22%;
  height: 38%;
  background: linear-gradient(180deg, #9ff7ff, #5cefff66);
  opacity: 0.85;
  filter: blur(0.3px);
}
.holo-hair.left { left: 14%; border-radius: 80% 40% 70% 30%; transform: rotate(12deg); }
.holo-hair.right { right: 14%; border-radius: 40% 80% 30% 70%; transform: rotate(-12deg); }

.holo-head {
  position: absolute;
  top: 8%;
  left: 28%;
  width: 44%;
  height: 32%;
  background: linear-gradient(180deg, #d9fbffcc, #5cefff55);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 0 10px #5cefff88;
}

.holo-visor {
  position: absolute;
  top: 38%;
  left: 12%;
  width: 76%;
  height: 28%;
  background: linear-gradient(90deg, transparent, #e8ffff, #5cefff, #e8ffff, transparent);
  border-radius: 40%;
  box-shadow: 0 0 8px #fff;
}

.holo-torso {
  position: absolute;
  top: 38%;
  left: 32%;
  width: 36%;
  height: 28%;
  background: linear-gradient(180deg, #9ff7ffaa, #4aa6ff44);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.holo-hips {
  position: absolute;
  top: 62%;
  left: 24%;
  width: 52%;
  height: 30%;
  background: linear-gradient(180deg, #7eefff88, transparent);
  border-radius: 20% 20% 50% 50%;
}

.chix-avatar.thinking { animation: float 1.4s ease-in-out infinite; }
.chix-avatar.thinking .holo-visor { animation: halo-pulse 1s ease-in-out infinite; }
.chix-avatar.happy .holo-girl { filter: brightness(1.25) saturate(1.2); }
.chix-avatar.cheer { animation: wiggle 500ms ease-in-out 2; }

@keyframes scan { from { background-position: 0 0; } to { background-position: 0 40px; } }
@keyframes halo-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; filter: brightness(1.6); } }