/* Ward's particle identity. CSS keeps legacy tiny marks and no-WebGL fallbacks
   light; explicit icons and larger marks reveal a lazy Three.js canvas. */

.ward-orb,
.ward-orb-canvas--gold {
  border-radius: var(--radius-full);
  background: center / 125% no-repeat url('/assets/ward-orb-512.png');
  box-shadow: var(--shadow-ward-gold-ball);
}

.ward-orb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  isolation: isolate;
}

.ward-orb--small,
.ward-orb--icon { width: var(--ward-orb-icon-size); height: var(--ward-orb-icon-size); }
.ward-orb--compact { width: var(--ward-orb-compact-size); height: var(--ward-orb-compact-size); }

/* In the sidebar the orb is an ICON among icons, so it matches their 18px box
   (owner call 2026-08-06). Scoped to the nav rather than redefining --small,
   which is a named size other surfaces depend on. */
.sidebar-nav .nav-item .ward-orb--small { width: 18px; height: 18px; }
.ward-orb--medium { width: var(--ward-orb-medium-size); height: var(--ward-orb-medium-size); }
.ward-orb--large { width: var(--ward-orb-large-size); height: var(--ward-orb-large-size); }
.ward-orb--extra-large { width: var(--ward-orb-page-size); height: var(--ward-orb-page-size); }

.ward-orb canvas {
  display: none;
}

.ward-orb--flowing,
.ward-orb-canvas--gold.ward-orb--flowing {
  background: transparent;
  box-shadow: none;
}

.ward-orb--flowing canvas {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  box-shadow: none;
  z-index: 1;
}

.ward-orb--flowing::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background: radial-gradient(circle, transparent 28%, var(--ward-orb-flow-halo) 48%, transparent 70%);
  filter: blur(var(--space-2));
  pointer-events: none;
}

/* Compact Three.js marks show crisp gold without a surrounding glow. */
.ward-orb--flowing.ward-orb--core-only::before { content: none; }

.ward-orb-canvas--gold {
  display: block;
  border: 0;
}

.ward-orb::after,
.ward-orb-canvas--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-gold-inset);
  pointer-events: none;
}

.ward-orb--thinking,
.ward-orb-canvas--gold.ward-orb--thinking {
  box-shadow: var(--shadow-ward-gold-ball-thinking);
}

.ward-orb--speaking,
.ward-orb-canvas--gold.ward-orb--speaking {
  box-shadow: var(--shadow-ward-gold-ball-speaking);
}

.ward-orb--listening,
.ward-orb-canvas--gold.ward-orb--listening {
  box-shadow: var(--shadow-ward-gold-ball-listening);
}

/* Canvas shading owns the contour; an inset CSS highlight would paint a
   static circle over the flowing silhouette. State lives in shader uniforms. */
.ward-orb--flowing::after { content: none; }
.ward-orb--flowing.ward-orb--thinking,
.ward-orb--flowing.ward-orb--speaking,
.ward-orb--flowing.ward-orb--listening { box-shadow: none; }

/* Small/no-WebGL identities use an exact still exported from the same scene. */
.ward-orb.ward-orb--small, .ward-orb.ward-orb--icon:not(.ward-orb--flowing), .ward-orb.ward-orb--compact:not(.ward-orb--flowing) {
  background: center / 125% no-repeat url('/assets/ward-orb-512.png');
  box-shadow: none;
}