/* R3: one measured perimeter built OUTWARD from the unchanged reading face.
   Canonical height and the scene's existing uniform scale drive every side. */
.agent-card-shell:is([data-side="left"], [data-side="right"]) {
  --card-height: var(--agent-height);
  --shell-outer: calc(var(--card-height) * .057);
  --shell-inner: calc(var(--card-height) * .027);
  --shell-top: calc(var(--card-height) * .024);
  --shell-bottom: calc(var(--card-height) * .033);
  --shell-left: var(--shell-outer);
  --shell-right: var(--shell-inner);
  --shell-corner-x: 0%;
}
.agent-card-shell[data-side="right"] {
  --shell-left: var(--shell-inner);
  --shell-right: var(--shell-outer);
  --shell-corner-x: 100%;
}
/* Remove the previous extrusion: it must not add to the measured perimeter. */
.agent-card-shell:is([data-side="left"], [data-side="right"]) :is(
  .agent-card-plane--back, .agent-card-plane--edge, .agent-card-plane--top
) { display: none; }
.agent-card-shell:is([data-side="left"], [data-side="right"]) .agent-chromatic-field::before { display: none; }
.agent-card-shell:is([data-side="left"], [data-side="right"]) .agent-card-plane--front { box-shadow: none; }
.agent-card-shell:is([data-side="left"], [data-side="right"]) .agent-card-plane--front::before {
  /* Compensate for the existing 1px transparent front border without changing it. */
  inset: calc(-1px - var(--shell-top)) calc(-1px - var(--shell-right)) calc(-1px - var(--shell-bottom)) calc(-1px - var(--shell-left));
  padding: var(--shell-top) var(--shell-right) var(--shell-bottom) var(--shell-left);
  border-radius:
    calc(var(--card-corner-radius) + var(--shell-left)) calc(var(--card-corner-radius) + var(--shell-right)) calc(var(--card-corner-radius) + var(--shell-right)) calc(var(--card-corner-radius) + var(--shell-left)) /
    calc(var(--card-corner-radius) + var(--shell-top)) calc(var(--card-corner-radius) + var(--shell-top)) calc(var(--card-corner-radius) + var(--shell-bottom)) calc(var(--card-corner-radius) + var(--shell-bottom));
  background:
    radial-gradient(ellipse 20px 30px at var(--shell-corner-x) 8%, rgba(var(--agent-primary),.32), transparent 95%),
    radial-gradient(ellipse 26px 36px at var(--shell-corner-x) 92%, rgba(var(--agent-secondary),.28), transparent 95%),
    linear-gradient(180deg, rgba(241,253,255,.24), rgba(156,205,233,.07) 24%, rgba(206,237,250,.05) 72%, rgba(237,252,255,.27));
  /* Thin boundary highlight; the rest of the masked band remains transparent. */
  box-shadow: inset 0 0 0 1px rgba(236,251,255,.68), inset 0 0 0 2px rgba(71,118,149,.16);
}
.agent-card-shell:is([data-side="left"], [data-side="right"]) .agent-card-plane--front::after {
  inset: -1px;
  padding: .75px;
  border-radius: var(--card-corner-radius);
  background: linear-gradient(var(--card-light-angle), rgba(237,251,255,.62), rgba(71,113,144,.24) 25%, rgba(213,242,255,.38) 68%, rgba(240,253,255,.66));
}