/* ==========================================================================
   The knowledge-graph demo — the hero's centerpiece.

   Same phosphor vocabulary as the rest of the page: inset wells on near-black,
   hairline rules, amber for a node the AI has drawn on and cyan for the path it
   travelled to get there. The graph and the chat sit side by side once there is
   room, and stack on mobile like everything else on the site.
   ========================================================================== */

.kg-demo {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: var(--border);
  max-width: 68rem;
}

.kg-demo__head { margin-bottom: 1.5rem; }
.kg-demo__head h2 { font-size: var(--step-2); margin: 0.2rem 0 0.5rem; }
.kg-demo__head p { margin: 0; max-width: 56ch; }

.kg-demo__stage {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .kg-demo__stage { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: stretch; }
}

/* --- Graph ---------------------------------------------------------------- */

.kg-demo__graph {
  background: var(--bg-inset);
  border: var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kg-demo__graph svg { width: 100%; height: auto; display: block; }

.kg-edge {
  stroke: var(--rule-bright);
  stroke-width: 1;
  fill: none;
  transition: stroke var(--speed) var(--ease), stroke-width var(--speed) var(--ease),
    filter var(--speed) var(--ease);
}

.kg-edge--active {
  stroke: var(--cyan);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgb(34 211 238 / 0.65));
}

.kg-node__circle {
  fill: var(--bg-panel);
  stroke: var(--rule-bright);
  stroke-width: 1.5;
  transition: fill var(--speed) var(--ease), stroke var(--speed) var(--ease),
    filter var(--speed) var(--ease);
}

.kg-node__icon {
  font-size: 17px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.kg-node__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--fg-faint);
  pointer-events: none;
  user-select: none;
  transition: fill var(--speed) var(--ease);
}

.kg-node { cursor: default; }

.kg-node--active .kg-node__circle {
  stroke: var(--amber);
  fill: color-mix(in srgb, var(--amber) 14%, var(--bg-panel));
  filter: drop-shadow(0 0 7px rgb(255 176 0 / 0.55));
}

.kg-node--active .kg-node__label { fill: var(--amber); }

/* Motion is decorative only — turned off entirely on request. The active
   states above are plain, non-animated fills/strokes, so they still read fine
   with transitions removed. */
@media (prefers-reduced-motion: reduce) {
  .kg-edge, .kg-node__circle, .kg-node__label { transition: none; }
}

/* --- Chat ------------------------------------------------------------------ */

.kg-demo__chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.kg-demo__log {
  flex: 1;
  min-height: 14rem;
  max-height: 24rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius);
}

.kg-msg { display: flex; flex-direction: column; max-width: 88%; gap: 0.3rem; }
.kg-msg--user { align-self: flex-end; align-items: flex-end; }
.kg-msg--ai { align-self: flex-start; align-items: flex-start; }

.kg-msg__bubble {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  line-height: 1.55;
  border: 1px solid var(--rule-bright);
  white-space: pre-line;
}

.kg-msg--user .kg-msg__bubble { background: color-mix(in srgb, var(--amber) 8%, var(--bg-panel)); border-color: var(--amber-dim); color: var(--fg); }
.kg-msg--ai .kg-msg__bubble { background: var(--bg-panel); border-color: var(--cyan-dim); color: var(--fg); }

.kg-msg__meta {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kg-msg__speaker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.kg-msg__speaker:hover:not(:disabled),
.kg-msg__speaker:focus-visible { background: var(--cyan); color: var(--bg); }
.kg-msg__speaker:disabled { opacity: 0.5; cursor: progress; }
.kg-msg__speaker svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

.kg-demo__status {
  font-size: var(--step--1);
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kg-demo__status[hidden] { display: none; }

.kg-dots { display: inline-flex; gap: 0.2rem; }
.kg-dots span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--cyan);
  animation: kg-dot-pulse 1.1s ease-in-out infinite;
}
.kg-dots span:nth-child(2) { animation-delay: 0.15s; }
.kg-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes kg-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kg-dots span { animation: none; opacity: 1; }
}

/* --- Suggested-question chips ---------------------------------------------- */

.kg-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.kg-chip {
  font: inherit;
  font-size: 0.72rem;
  color: var(--fg-mute);
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.kg-chip:hover:not(:disabled),
.kg-chip:focus-visible { border-color: var(--amber); color: var(--amber); }
.kg-chip:disabled { opacity: 0.5; cursor: progress; }

/* --- Input row --------------------------------------------------------------- */

.kg-demo__form {
  display: flex;
  gap: 0.6rem;
}

.kg-demo__form .input { flex: 1; }

/* --- Action card ------------------------------------------------------------- */

.kg-action {
  margin-top: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--bg-panel);
  border: var(--border);
  border-left: 2px solid var(--amber-dim);
  border-radius: var(--radius);
  max-width: 88%;
  align-self: flex-start;
}

.kg-action__title {
  margin: 0 0 0.35rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

.kg-action__body { margin: 0 0 0.7rem; font-size: var(--step--1); color: var(--fg-mute); }

.kg-action__status {
  margin: 0;
  font-size: var(--step--1);
  color: var(--green);
}

/* --- Footer ------------------------------------------------------------------ */

.kg-demo__foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kg-demo__foot p {
  margin: 0;
  color: var(--fg-mute);
  font-size: var(--step--1);
  max-width: 44ch;
}