/* ─────────────────────────────────────────────────────────────────────────
   PROTOTYPE — "Assistant beneath" (peel from the right).

   Same footprint as the docked column, but a different z-story: the page is a
   floating card that peels LEFT to reveal the assistant surface sitting
   UNDERNEATH it on the right — depth (shadow + z-order), not an in-flow column
   pushed alongside. Both planes stay visible; the right band is full-height so
   long answers read comfortably. Toggle dock/beneath with the pill (bottom-left).

   Loads AFTER chat_panel.css. Only active on desktop when .app--beneath-open.
   ───────────────────────────────────────────────────────────────────────── */

.app--beneath-open {
  /* Fraction of the content area (viewport minus rail) the page card keeps. */
  --peel-frac: 0.62;
  --area: calc(100vw - var(--rail-width, 55px));
}

/* The page recedes into a lifted card occupying the LEFT of the content area. */
.app--beneath-open > .main {
  justify-self: start;
  align-self: stretch;
  width: calc(var(--area) * var(--peel-frac));
  height: 100%;
  position: relative;
  z-index: 3;                 /* above the surface (2) so its shadow falls over it */
  overflow: hidden;
  border-radius: 18px 0 0 18px;
  box-shadow:
    26px 0 54px -18px rgba(20, 15, 12, 0.42),
    1px 0 0 0 var(--border-light);
  animation: pagePeel 380ms cubic-bezier(0.2, 0, 0, 1);
  transition: width 340ms cubic-bezier(0.2, 0, 0, 1); /* narrow <-> wide toggle */
}
@keyframes pagePeel {
  from { width: 100%; border-radius: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  to   { width: calc(var(--area) * var(--peel-frac)); }
}

/* The assistant surface fills the revealed right band, beneath the page card. */
.chat-panel--beneath {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: calc((100vw - var(--rail-width, 55px)) * (1 - var(--peel-frac, 0.62)));
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-app);
  border-left: 1px solid var(--border-light);
  box-shadow: none;
  border-radius: 0;
  animation: surfaceReveal 380ms cubic-bezier(0.2, 0, 0, 1);
  transition: width 340ms cubic-bezier(0.2, 0, 0, 1); /* narrow <-> wide toggle */
}
@keyframes surfaceReveal {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.chat-panel--beneath .chat-panel__body { min-height: 0; }