/* THE ROUND BY A CARD (Steven 2026-10-13 evening: "I just want to make sure
   these animated images get into the designs where the little round
   picture is by the card"). templates/components/_agent_round.html draws
   it: the agent's square pose loop (or the operator's own picture, or a
   still), cover-cropped in a circle. It fills the box it is put in
   (agent-round--fill) or draws its own size. The cast loops are framed on
   the head and chest; the round leans in on the face. Design tokens only. */
.agent-round {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
}
.agent-round--fill { width: 100%; height: 100%; }
.agent-round--xs { width: var(--size-6); height: var(--size-6); }
.agent-round--sm { width: var(--size-10); height: var(--size-10); }
.agent-round--md { width: var(--size-12); height: var(--size-12); }
.agent-round--lg { width: var(--size-16); height: var(--size-16); }
.agent-round__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: 50% 30%;
}
.agent-round--video > .agent-round__media,
.agent-round--image > .agent-round__media {
  transform: scale(1.25);
  transform-origin: 50% 28%;
}
.agent-round--photo > .agent-round__media { object-position: 50% 50%; }
.agent-round > .aa,
.agent-round > svg { display: block; width: 100%; height: 100%; }

/* The Proposals list's rows wear the round's picture as a SQUARE with the
   card's corner (Steven 2026-10-14): static/cards/proposal-rows.css. */

/* NO NATIVE CONTROL OVER A ROUND (Steven 2026-10-14 morning, an iPhone in
   Low Power Mode: the loop did not autoplay and Safari drew its own play
   button over Theo's round). The round is a face, never a player: WebKit's
   control layers never draw over a round's loop (or the agent side's,
   cards/_agent_side.html, which shares the hook), and agent-round.js swaps
   a loop that will not play for its still. One rule per layer: a browser
   that does not know one drops only that rule. */
video[data-agent-round-video]::-webkit-media-controls { display: none !important; }
video[data-agent-round-video]::-webkit-media-controls-panel { display: none !important; }
video[data-agent-round-video]::-webkit-media-controls-overlay-play-button { display: none !important; }
video[data-agent-round-video]::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }