/* R4 — one interior rectangle controls every lateral instance.
   Texture registration is inherited, but its perimeter is bounded by this
   shared rounded aperture. No face material or central-card rule changes. */
.agent-card-shell:is([data-side="left"], [data-side="right"]) {
  --card-inner-width: 342px;
  --card-inner-height: 262px;
  --card-inner-radius: 12px;
  --card-inner-offset-x: 4px;
  --card-inner-offset-y: 4px;
  --card-shell-margin-x: 18px;
  --card-shell-margin-y: 10px;
}
.agent-card-shell:is([data-side="left"], [data-side="right"])::before {
  inset: auto;
  left: var(--card-inner-offset-x);
  top: var(--card-inner-offset-y);
  width: var(--card-inner-width);
  height: var(--card-inner-height);
  border-radius: var(--card-inner-radius);
}
.agent-shell-canonical-frame {
  position: absolute;
  left: calc(var(--card-inner-offset-x) - var(--card-shell-margin-x));
  top: calc(var(--card-inner-offset-y) - var(--card-shell-margin-y));
  width: calc(var(--card-inner-width) + 2 * var(--card-shell-margin-x));
  height: calc(var(--card-inner-height) + 2 * var(--card-shell-margin-y));
  border-radius: calc(var(--card-inner-radius) + var(--card-shell-margin-x)) / calc(var(--card-inner-radius) + var(--card-shell-margin-y));
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.agent-shell-canonical-frame > .agent-card-shell-asset {
  position: absolute;
  left: calc(var(--card-shell-margin-x) - var(--card-inner-offset-x));
  top: calc(var(--card-shell-margin-y) - var(--card-inner-offset-y));
  width: calc(var(--card-inner-width) + 2 * var(--card-inner-offset-x));
  height: calc(var(--card-inner-height) + 2 * var(--card-inner-offset-y));
  max-width: none;
  display: block;
  transform-origin: 0 0;
  transform: var(--lateral-shell-registration);
}
.agent-card-shell[data-side="right"] .agent-shell-canonical-frame > .agent-card-shell-asset {
  transform: translateX(calc(var(--card-inner-width) + 2 * var(--card-inner-offset-x))) scaleX(-1) var(--lateral-shell-registration);
}