/* ═══════════════════════════════════════════════════════════════
   TESERACTO — la ventana de agent-window.js: el marco con su velo y el
   canvas que lo desborda. El borde, la sombra y el balanceo 3D los comparte
   con la pantalla del texto (consola.css) y el tamaño lo pone cada página.
   Las "sombras" (prismas en ::before y plano proyectado en ::after) no están
   aquí: son de la home.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ÚNICA fuente de verdad del overscan del canvas del agente (por lado).
     agent-window.js la lee en runtime; .ai-window__canvas la consume con calc(). */
  --ai-overscan: 36%;
}

.ai-window {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: visible;
  isolation: isolate;
}

.ai-window__frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.18);
  /* overflow visible: el canvas desborda el marco y el teseracto puede
     "salirse de la pantalla" en los picos de su respiración 4D. El
     recorte del interior lo hace el propio canvas (clip por JS). */
  overflow: visible;
  transform-style: preserve-3d;
  z-index: 2;
}

.ai-window__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.045) 1px,
      rgba(0, 0, 0, 0) 3px,
      rgba(0, 0, 0, 0) 6px
    ),
    radial-gradient(70% 70% at 50% 45%, rgba(0, 255, 156, 0.18), transparent 58%),
    linear-gradient(to bottom right, rgba(255, 255, 255, 0.06), transparent 40%);
  opacity: 0.75;
  mix-blend-mode: overlay;
}

/* Overscan por lado derivado de --ai-overscan (:root). El canvas es
   transparente fuera del rect del marco, así que no tapa el borde ni las
   esquinas redondeadas. */
.ai-window__canvas {
  position: absolute;
  top: calc(-1 * var(--ai-overscan));
  left: calc(-1 * var(--ai-overscan));
  width: calc(100% + 2 * var(--ai-overscan));
  height: calc(100% + 2 * var(--ai-overscan));
  display: block;
  pointer-events: none;
}