/* === Z: AI Rainbow Pill (span version) FULL CSS (monospace, tiny padding) === */
.z-aiPill{
  --zPadY: 2px;   /* much smaller */
  --zPadX: 6px;   /* much smaller */
  --zRadius: 999px;

  --zBg1: #000;
  --zBg2: #000;

  --zTextAngle: 90deg;
  --zBorderAngle: 25deg;
  --zBorderW: 2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;

  font-family: monospace;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
}

.z-aiPill__txt{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--zPadY) var(--zPadX);
  border-radius: var(--zRadius);

  width: var(--zW, auto);
  overflow: hidden;
  white-space: nowrap;

  background: linear-gradient(180deg, var(--zBg1), var(--zBg2));

  border: var(--zBorderW) solid transparent;

  background-image:
    linear-gradient(180deg, var(--zBg1), var(--zBg2)),
    linear-gradient(var(--zBorderAngle),
      #ff2d55 0%,
      #ff6b00 12%,
      #ffd60a 24%,
      #34c759 36%,
      #00d6ff 52%,
      #0a84ff 68%,
      #7d5cff 82%,
      #ff2d55 97%,
      #ff9f0a 100%
    );

  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;

  background-size: 100% 100%, 600% 600%;
  background-repeat: no-repeat;
  animation: zAiBorderShift 14s ease-in-out infinite alternate;

  transition:
    width 420ms cubic-bezier(.2,.9,.2,1),
    opacity 320ms ease;
  opacity: 1;
}

.z-aiPill__txt::before{
  content: attr(data-render);
  display: block;

  background: linear-gradient(var(--zTextAngle),
    #ff2d55 0%,
    #ff6b00 10%,
    #ffd60a 22%,
    #34c759 34%,
    #00d6ff 50%,
    #0a84ff 66%,
    #7d5cff 82%,
    #ff2d55 96%,
    #ff9f0a 100%
  );
  background-size: 700% 700%;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: zAiTextShift 12s ease-in-out infinite alternate;

  filter: drop-shadow(0 0 6px rgba(255,255,255,0.10));
}

.z-aiPill__txt::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--zRadius);
  background: radial-gradient(closest-side, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 280ms ease;
}

.z-aiPill:hover .z-aiPill__txt::after{ opacity: 0.80; cursor: none; }
.z-aiPill.z-isCollapsing .z-aiPill__txt{ opacity: 0.92; }

.z-aiPill:focus-visible .z-aiPill__txt{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 3px;
}

@keyframes zAiBorderShift{
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 100% 50%; }
}

@keyframes zAiTextShift{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}