/* The agent's avatar (agent/_avatar): a circle in the workspace accent with two
   eyes. Still by default. While a turn runs, an ancestor's data-agent-state
   (the draft shell, the replying pill) sets what the eyes do:

     waiting  eyes closed, a slow breathe  — a turn queued for a free slot
     writing  eyes look down at the page, a small bob
     reading  eyes scan side to side       — a tool call, e.g. reading the wiki

   Units inside the SVG are its 100-unit viewBox, so every move scales with the
   avatar's size. The eyes take the page background: white in light mode, ink in
   dark, where the accent lifts to a lighter tint. */
.avatar > .agent-avatar {
  aspect-ratio: 1;
  block-size: auto;
  grid-area: 1/1;
  inline-size: var(--avatar-size, 5ch);
  max-inline-size: 100%;
}

.agent-avatar__figure,
.agent-avatar__eye {
  transform-box: fill-box;
  transform-origin: center;
}

/* The body is the agent's accent. With none picked it is the page's; a picked
   one arrives as [data-accent] on the svg, and colors.css scopes the accent
   primitives to that element. So the colour is declared on the svg itself (an
   inherited token would already be substituted at :root), lifted on a dark
   ground as the workspace marks are. */
.agent-avatar {
  --agent-avatar-body: oklch(var(--lch-accent));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .agent-avatar {
    --agent-avatar-body: oklch(var(--lch-accent-lift));
  }
}

:root[data-theme="dark"] .agent-avatar,
html:not([data-sidebar="match"]) #sidebar[data-contrast="true"] .agent-avatar {
  --agent-avatar-body: oklch(var(--lch-accent-lift));
}

.agent-avatar__body {
  fill: var(--agent-avatar-body);
}

.agent-avatar__eye {
  fill: var(--color-bg);
  transition: opacity 150ms ease-out, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.agent-avatar__lids {
  fill: none;
  opacity: 0;
  stroke: var(--color-bg);
  stroke-linecap: round;
  stroke-width: 4;
  transition: opacity 150ms ease-out;
}

.agent-avatar__dot {
  fill: var(--color-bg);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

/* Each state's pose reads on its own; reduced motion drops only the animation. */

/* Idle: one blink when pointed at, never on its own, so a room full of agent
   replies stays calm. */
.avatar:hover .agent-avatar__eye {
  animation: agent-blink 300ms ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

[data-agent-state="waiting"] {
  .agent-avatar__eye { opacity: 0; }
  .agent-avatar__lids { opacity: 1; }

  .agent-avatar__figure {
    animation: agent-breathe 3s ease-in-out infinite alternate;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

[data-agent-state="writing"] {
  .agent-avatar__eye { opacity: 0; transform: translateY(13px) scaleY(0.46); }
  .agent-avatar__dot { opacity: 1; }

  .agent-avatar__figure {
    animation: agent-bob 1.2s ease-in-out infinite alternate;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

[data-agent-state="reading"] .agent-avatar__eye {
  animation: agent-scan 1.6s ease-in-out infinite alternate;
  transform: translateX(-10px);

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes agent-blink {
  50% { transform: scaleY(0.1); }
}

@keyframes agent-breathe {
  to { transform: scale(1.03); }
}

@keyframes agent-bob {
  to { transform: translateY(-3px); }
}

@keyframes agent-scan {
  from { transform: translateX(-10px); }
  to   { transform: translateX(10px); }
}