/* PAGE 3 · SECTION: the third part of the front page (under the four levels): the chatbot. */

.page-3 {
  position: relative;                          /* the background layers with "position: absolute" are placed within this section */
  overflow: hidden;                            /* the drifting glow sticks out past the edges: cut that off */
  height: 100vh;                               /* exactly one full screen tall: the chat panel scrolls inside, the page doesn't grow */
  height: 100svh;                              /* on phones: the screen height without the browser's address bar (older browsers use the line above) */
  padding-top: calc(var(--header-h) + 28px);   /* room for the menu bar */
  padding-bottom: 28px;
  display: flex;
  justify-content: center;                     /* the chat panel in the middle */
  color: var(--navy);
  background: linear-gradient(180deg, #f8f9fd 0%, #eef1fa 55%, #e3e9f7 100%); /* Page 1's light, soft blue-white */
}

/* The same background layers as Page 1 (see Page 1 (main)/CSS/animation_section.css). */

/* Page 1's three soft coloured glows, drifting slowly. "glow-drift" is the movement from Page 1's CSS. */
.page-3-glow {
  position: absolute;
  inset: -20%;   /* stretches 20% past every edge, so the drifting never shows an edge */
  background:
    radial-gradient(circle at 70% 40%, rgba(120, 140, 255, 0.22) 0%, transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(203, 224, 238, 0.9) 0%, transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(221, 228, 243, 0.9) 0%, transparent 35%);
  animation: glow-drift 24s ease-in-out infinite alternate;
}

/* The rippling lines are a General part: see General/CSS/section_lines.css */

/* People who turn off motion in their system settings see the glow standing still */
@media (prefers-reduced-motion: reduce) {
  .page-3-glow { animation: none; }
}

/* The box the chat panel goes in (chat-widget.js fills it). The panel takes this box's size:
   720px wide (or the full width minus a small gap on narrow screens), and the full height left over.
   "position: relative" puts it on top of the background layers. */
.page-3-chat {
  position: relative;
  width: min(720px, 100% - 32px);
  height: 100%;
}