/* =====================================================================
   The agent glow
   Primed's signature. It marks the one element an AI agent currently owns
   and nothing else. Requires tokens.css.

   Markup: the glow is a 1.5px gradient ring drawn by padding a wrapper,
   so the content needs an inner element with its own background.

     <div class="pr-glow" data-agent="working">
       <div class="pr-glow__inner"> …agent-owned content… </div>
     </div>

   data-agent="working"  the agent is doing something now. Ring rotates, halo breathes.
   data-agent="waiting"  the agent drafted something and a person must decide.
                         Ring holds still but is thicker, with a stronger halo.
   (no glow)             remove the wrapper, or its class, the moment a person acts.

   One glow per view. In a list of agent-owned rows, the rows carry .pr-agent-ring
   and a badge instead, and only the open draft card glows (DESIGN.md, R25).
   ===================================================================== */

@property --pr-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pr-glow {
  --_ring: conic-gradient(from var(--pr-glow-angle),
            var(--pr-brand), var(--pr-brand-2), var(--pr-brand-3), var(--pr-brand));
  position: relative;
  isolation: isolate;
  border-radius: var(--pr-radius-card);
  padding: var(--pr-glow-border);
  background: var(--_ring);
}

/* soft halo behind the ring */
.pr-glow::after {
  content: "";
  position: absolute;
  inset: calc(var(--pr-glow-spread) * -1);
  z-index: -1;
  border-radius: calc(var(--pr-radius-card) + var(--pr-glow-spread));
  background: var(--_ring);
  filter: blur(var(--pr-glow-blur));
  opacity: var(--pr-glow-opacity);
  pointer-events: none;
}

.pr-glow__inner {
  position: relative;
  z-index: 1;
  background: var(--pr-raised);
  border-radius: calc(var(--pr-radius-card) - var(--pr-glow-border));
}

.pr-glow[data-agent="working"],
.pr-glow[data-agent="working"]::after {
  animation: pr-glow-spin var(--pr-glow-period) linear infinite;
}
.pr-glow[data-agent="working"]::after {
  animation: pr-glow-spin var(--pr-glow-period) linear infinite,
             pr-glow-breathe var(--pr-glow-period) ease-in-out infinite;
}
.pr-glow[data-agent="waiting"] {
  --pr-glow-border: var(--pr-glow-border-waiting);
}
.pr-glow[data-agent="waiting"]::after {
  opacity: var(--pr-glow-opacity-waiting);
}

/* ---- Small agent marks, same meaning at smaller sizes ---------------- */

/* 13px dot for timelines and lists */
.pr-agent-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(from var(--pr-glow-angle),
              var(--pr-brand), var(--pr-brand-2), var(--pr-brand-3), var(--pr-brand));
}

/* 18px ring for checklist items */
.pr-agent-ring {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(from var(--pr-glow-angle),
              var(--pr-brand), var(--pr-brand-2), var(--pr-brand-3), var(--pr-brand));
}
.pr-agent-ring::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pr-raised);
}
/* Waiting ring: thicker, so a draft that needs a person reads at a glance */
.pr-agent-ring[data-agent="waiting"]::after { width: 8px; height: 8px; }

.pr-agent-dot[data-agent="working"],
.pr-agent-ring[data-agent="working"] {
  animation: pr-glow-spin 2.4s linear infinite;
}

@keyframes pr-glow-spin { to { --pr-glow-angle: 360deg; } }
@keyframes pr-glow-breathe { 50% { opacity: calc(var(--pr-glow-opacity) * 1.5); } }

/* ---- Reduced motion: everything holds still, meaning comes from text -- */
@media (prefers-reduced-motion: reduce) {
  .pr-glow,
  .pr-glow::after,
  .pr-agent-dot,
  .pr-agent-ring {
    animation: none !important;
  }
}

/* Accessibility: these marks are images. Give each one role="img" and an
   aria-label naming the state, e.g. "Agent drafted, needs review". */