/*
 * SG Chat — AR filter overlay styles.
 * Owned exclusively by ar.js. Only touches:
 *   - #btn-toggle-ar (injected by ar.js into HOOK:CALL-CONTROLS-AR)
 *   - .ar-overlay-canvas (injected by ar.js, absolutely positioned over the
 *     local participant's <video> tile)
 *
 * #btn-toggle-ar inherits the base `button.secondary` look from style.css,
 * which is tuned for the light app chrome; call.css's sibling restyle moves
 * the call stage to a dark theme, so the "active" accent below uses
 * tokens.css's brand hue directly (works on light or dark) rather than a
 * light-surface token.
 */

#btn-toggle-ar {
  position: relative;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
}

#btn-toggle-ar[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

#btn-toggle-ar.active {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* The canvas must sit directly on top of the local tile's <video>, matching
   its box exactly, without disturbing call.js's existing tile layout/CSS. */
.ar-overlay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* never intercept clicks meant for the video tile */
  z-index: 5;
  border-radius: var(--radius-md);
}

/* call.js's .participant-tile is not guaranteed to be position:relative —
   ar.js sets this inline on the tile it targets, but keep a CSS fallback
   here too in case markup shape changes. */
.participant-tile.ar-host {
  position: relative;
}

.ar-unavailable-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  opacity: 0.75;
  margin-left: var(--space-1);
  /* NOT white-on-dark: like e2ee.css's toggle label, this badge lives in
     .call-controls, a sibling of #call-video-grid, not nested inside it —
     the surrounding chrome stays on the light app background even during
     an active call. Confirmed white-on-white was invisible via a real
     headless screenshot + vision check. */
  color: var(--color-text-muted);
}