/* Rectangular reading planes; depth belongs only to the optical shell.
   Uniform center scaling preserves the five existing composition anchors. */
.agent-card-layer { --agent-card-scale: .91; }
.agent-card-shell,
.agent-card-shell[data-side="right"],
.agent-card-shell[data-side="center"] {
  transform: scale(var(--agent-card-scale));
  transform-origin: center;
  transform-style: flat;
  --card-corner-radius: 12px;
  --shell-offset: -16px;
}
.agent-card-shell[data-side="right"] { --shell-offset: 16px; }
.agent-card-plane--back {
  transform: translate(var(--shell-offset), -5px);
  border-width: 1.5px;
}
.agent-card-plane--edge {
  left: -16px; right: auto; top: -5px; bottom: 0;
  width: 18px;
  transform: none;
  border-radius: 12px 0 0 12px;
  clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 calc(100% - 5px));
}
.agent-card-shell[data-side="right"] .agent-card-plane--edge {
  left: auto; right: -16px;
  transform: none;
  border-radius: 0 12px 12px 0;
  clip-path: polygon(0 5px, 100% 0, 100% calc(100% - 5px), 0 100%);
}
.agent-card-plane--top {
  left: -16px; right: 0; top: -5px; height: 7px;
  transform: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 16px 100%);
}
.agent-card-shell[data-side="right"] .agent-card-plane--top {
  left: 0; right: -16px;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
/* A wider transparent bevel strengthens the perimeter without filling the face. */
.agent-card-plane--front::before { padding: 5px; }
.agent-card-plane--front::after { inset: 6px; padding: 1.25px; }

/* R2: the master stays slightly more compact; all existing centers are fixed. */
.agent-card-shell[data-side="center"] { --agent-card-scale: .895; }
.agent-card-shell { --slab-angle: 90deg; --slab-outer: 0%; }
.agent-card-shell[data-side="right"] { --slab-angle: 270deg; --slab-outer: 100%; }
/* Transparent slab: outer glint, open glass, refracted color, inner boundary. */
.agent-card-plane--edge {
  border-color: transparent;
  background:
    radial-gradient(ellipse 18px 26px at var(--slab-outer) 2%, rgba(246,253,255,.82), transparent 95%),
    radial-gradient(ellipse 18px 26px at var(--slab-outer) 98%, rgba(231,249,255,.72), transparent 95%),
    linear-gradient(var(--slab-angle), rgba(230,250,255,.78), rgba(245,253,255,.22) 12%, rgba(139,195,220,.08) 27%, rgba(var(--agent-primary),.24) 43%, rgba(239,253,255,.36) 54%, rgba(60,111,145,.2) 66%, rgba(205,237,252,.1) 82%, rgba(245,253,255,.62) 92%, rgba(49,95,126,.28));
}
.agent-card-plane--edge::before {
  content: ""; position: absolute; inset: 2px 3px;
  border-radius: inherit;
  border-inline: 1px solid rgba(229,248,255,.38);
  background: linear-gradient(180deg, rgba(var(--agent-primary),.15), transparent 23%, transparent 76%, rgba(var(--agent-secondary),.18));
}
.agent-card-shell[data-side="left"] .agent-card-plane--front::before { padding: 4px 3px 4px 6px; }
.agent-card-shell[data-side="right"] .agent-card-plane--front::before { padding: 4px 6px 4px 3px; }