/* MCP demo: a scripted, looping recording of an AI assistant driving Zigzag through its MCP server
   (js/mcp-demo.js plays it). On the left the assistant: it is asked something, calls Zigzag's tools
   and answers. On the right the topic it works in, where its message lands.
   Colors follow the app's dark theme; sizes are in rem, so it scales with the page. */

.mc-demo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 26rem;
  background: #0d0f12;
  color: #e6e8eb;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}

.mc-spacer { flex: 1; }
.mc-faint { color: #8b949e; }

.mc-ai,
.mc-app {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.mc-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.375rem;
  padding: 0 1rem;
  border-bottom: 1px solid #22262c;
  background: #15181d;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.mc-bar b { font-weight: 600; }

/* ---- The assistant: a terminal-like chat ---- */

.mc-ai {
  grid-template-rows: auto 1fr;
  background: #0a0c0f;
}

.mc-live { color: #7ee787; }

.mc-feed {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  overflow: hidden;
  padding: 1rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #c9d1d9;
}

.mc-feed b { font-weight: 600; color: #e6e8eb; }
.mc-prompt { color: #c4b5fd; }
.mc-dot { color: #a78bfa; }

/* A tool's result, under its call */
.mc-ok {
  margin-top: -0.375rem;
  padding-left: 1.25em;
  color: #7ee787;
}

/* ---- The topic ---- */

.mc-app {
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid #30363d;
}

/* While the assistant reads the topic */
.mc-reading {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgb(124 58 237 / 0.25);
  color: #c4b5fd;
  font-size: 0.75rem;
}

.mc-timeline {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  overflow: hidden;
  padding: 1rem 1.25rem;
}

.mc-timeline b { margin-right: 0.5rem; font-weight: 600; }

.mc-n-matt { color: oklch(0.78 0.14 29); }
.mc-n-alice { color: oklch(0.78 0.14 96); }
.mc-n-richard { color: oklch(0.78 0.14 229); }
.mc-n-bob { color: oklch(0.78 0.14 309); }

/* The assistant's message, marked as it lands */
.mc-new {
  margin-inline: -0.625rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: rgb(124 58 237 / 0.16);
  box-shadow: inset 3px 0 #7c3aed;
}

.mc-composer {
  margin: 0 1.25rem 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #2a2f36;
  border-radius: 0.75rem;
  background: #16191e;
  color: #6b7280;
}

/* Hidden until js/mcp-demo.js reaches its time; without JS, everything shows. */
.js .mc-demo [data-at]:not(.is-on) { display: none; }

/* Tablets and phones turned sideways: the assistant on top, the topic below */
@media (max-width: 1023px) {
  .mc-demo { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mc-ai { height: 17rem; }
  .mc-app { height: 19rem; border-left: 0; border-top: 1px solid #30363d; }
}

/* Phones: a little smaller, and tighter at the edges */
@media (max-width: 760px) {
  .mc-demo { font-size: 0.8125rem; }
  .mc-ai { height: 18rem; }
  .mc-feed { padding: 0.75rem; font-size: 0.6875rem; }
  .mc-timeline { padding-inline: 0.75rem; }
  .mc-composer { margin-inline: 0.75rem; }
}