/* Jarvis's presence (D1): the frame around the sphere that presence.js draws. Tokens from theme.css only. */
.presence-wrap {
  position: relative;
  isolation: isolate;
  flex: none;
}
.presence {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hero (home and chat): large and centred, the content below it. */
.presence-hero {
  width: var(--presence-hero);
  height: var(--presence-hero);
  margin: var(--s2) auto calc(-1 * var(--s3));
}
/* The room's light around the sphere: a static gradient whose strength follows the state (an opacity
   change only, so it costs the compositor nothing). */
.presence-hero::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--amber-haze), var(--gold-soft) 45%, transparent);
  opacity: 0.55;
  transition: opacity var(--slow) var(--ease);
}
.presence-hero:has([data-state="listening"])::before { opacity: 0.8; }
.presence-hero:has([data-state="thinking"])::before { opacity: 0.7; }
.presence-hero:has([data-state="speaking"])::before { opacity: 0.95; }
.presence-hero:has([data-state="rest"])::before { opacity: 0.22; }

/* Compact (every other page): small, in the header, beside the brand. */
.presence-compact {
  width: var(--presence-compact);
  height: var(--presence-compact);
}