/* Raptor page graphic: the signal structure, small, in the lower right corner, with an on/off button. See signal-bg.js.
   It sits to the left of the assistant avatar (which is 75px wide and 30px from the right edge), never over it. Clicks pass through. */
.sb-bg {
  position: fixed; right: 124px; bottom: 18px; width: clamp(170px, 17vw, 250px); height: auto; aspect-ratio: 1 / 1;
  z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.9s ease;
}
.sb-bg.on { opacity: 0.62; }
body.dark-mode .sb-bg.on { opacity: 0.8; }

.sb-bg-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 500 11.5px 'DM Mono', ui-monospace, monospace; letter-spacing: 0.02em;
  color: var(--white); background: var(--surface); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0.9;
}
.sb-bg-toggle:hover { opacity: 1; }
.sb-bg-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.sb-bg-toggle i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; }
.sb-bg-toggle[aria-pressed="true"] i { background: var(--purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22); }

/* On a phone there is no room for it and no reason to download the 3D library: hidden, and not loaded (signal-bg.js). */
@media (max-width: 700px) { .sb-bg, .sb-bg-toggle { display: none; } }
@media print { .sb-bg, .sb-bg-toggle { display: none; } }