/* Zenoo AI on every page (with zai.js): Compliance Hub's AI line working state, the live E and the
   AI working ring, from the Calm design system (AISuggestion, AIWorkingRing). Spectrum tokens:
   ai-spectrum-1 to -5. */
:root { --zai-s1: #6450fa; --zai-s2: #a35cf0; --zai-s3: #e8559a; --zai-s4: #f6844b; --zai-s5: #3e8bf0; }

/* The words: a slow spectrum shimmer while Zenoo works (zenooAiLine .working .txt). */
.zai-line { --zai-ink: #747982; }
.pg-ai, .za-ai, .mai { --zai-ink: #b4b1c2; }
.zai-line:not(.zai-play).zai-working .zai-txt, .zai-line:not(.zai-play).zai-working .zai-txt *,
.zai-play.zai-working :is(.zai-typed, .fr-working, .dp-reading) {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration-color: transparent;
}
.zai-line:not(.zai-play).zai-working .zai-txt, .zai-play.zai-working :is(.zai-typed, .fr-working, .dp-reading) {
  background: linear-gradient(90deg, var(--zai-ink) 0%, var(--zai-ink) 35%, var(--zai-s2) 45%, var(--zai-s3) 50%, var(--zai-s4) 55%, var(--zai-ink) 65%, var(--zai-ink) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: zai-sweep 2.4s linear infinite;
}
@keyframes zai-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Typing: the rest of the sentence holds its place unseen, so the box never grows. */
.zai-gh { visibility: hidden; }
.zai-t.typing::after { content: none; display: none; }
.zai-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -2px; }
.zai-caret::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5px; height: 100%; background: var(--zai-s1); animation: zai-blink .8s steps(1) infinite; }
.pg-ai .zai-caret::before, .za-ai .zai-caret::before, .mai .zai-caret::before { background: #c9bdff; }
@keyframes zai-blink { 50% { opacity: 0; } }

/* AIWorkingRing: a 1px spectrum edge that turns once every 3s while Zenoo works, with a faint glow;
   it holds still for a moment after the answer lands, then fades. */
@property --zai-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.zai-ring { position: relative; transition: filter .6s ease; }
.zai-ring::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: conic-gradient(from var(--zai-a), var(--zai-s1), var(--zai-s2), var(--zai-s3), var(--zai-s4), var(--zai-s5), var(--zai-s1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.zai-ring.zai-ring-on::before, .zai-ring.zai-ring-held::before { opacity: 1; }
.zai-ring.zai-ring-on::before { animation: zai-turn 3s linear infinite; }
.zai-ring.zai-ring-on, .zai-ring.zai-ring-held { filter: drop-shadow(0 0 10px rgba(163, 92, 240, .22)); }
@keyframes zai-turn { to { --zai-a: 360deg; } }
.dp-row.zai-ring { border-radius: 10px; }

/* The E: the live mark replaces older stand-ins (the pulse, the spinning ring). */
.zai-mk { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .zai-working :is(.zai-txt, .zai-typed, .fr-working, .dp-reading) { animation: none; background: none; }
  .zai-working :is(.zai-txt, .zai-txt *, .zai-typed, .fr-working, .dp-reading) { color: var(--zai-ink); -webkit-text-fill-color: var(--zai-ink); }
  .zai-ring.zai-ring-on::before { animation: none; }
  .zai-caret::before { animation: none; }
}