/* Motion belongs to the existing illustrations; their content remains the source. */
.interface-figure .pvg-window { position: relative; }
.interface-typing { position: relative; display: inline-block; vertical-align: bottom; }
.interface-typing-source { visibility: hidden; }
.interface-typing-layer { position: absolute; inset: 0; }
.interface-typing.is-typing .interface-typing-layer::after {
  content: "";
  display: inline-block;
  width: 0.1em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.12em;
  background: var(--pvg-green);
}
.interface-input-copy { position: relative; flex: 1; min-width: 0; }
.interface-input-draft { position: absolute; inset: 0; color: var(--pvg-ink); }
.interface-input-draft::after {
  content: "";
  display: inline-block;
  width: 0.1em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.1em;
  background: var(--pvg-green);
}
.interface-figure .interface-pointer {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 25px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  color: var(--pvg-window-ink);
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--pvg-window-paper) 60%, transparent));
}
.interface-pointer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.interface-pointer path { fill: currentColor; stroke: var(--pvg-window-paper); stroke-width: 1.6; stroke-linejoin: round; }
.interface-pointer::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--pvg-window-accent);
  border-radius: 50%;
  opacity: var(--interface-click, 0);
  transform: scale(var(--interface-ring, 0.5));
}
.interface-is-animated .mock-mail-open,
.interface-is-animated .mock-chat-input {
  background: color-mix(in srgb, var(--pvg-green) calc(var(--interface-focus, 0) * 8%), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pvg-green) calc(var(--interface-focus, 0) * 60%), transparent);
}
.interface-is-animated .mock-system-chart svg { overflow: hidden; }
.interface-chart-dot { fill: var(--pvg-green); }
.interface-chart-dot:last-child { fill: var(--pvg-ink-dim); }
.interface-is-animated .mock-chat-input { align-items: center; }
.interface-is-animated .mock-chat-input > span { flex: 0 0 auto; }
.interface-cli .mock-cli-command { display: flex; align-items: baseline; gap: 0.6em; white-space: pre-wrap; }
.interface-cli .interface-command-text { min-width: 0; overflow-wrap: anywhere; }
.interface-is-animated .mock-cli-output,
.interface-is-animated .mock-cli-table { transform-origin: left top; }
.interface-thinking {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 1.45em;
  opacity: 0;
}
.interface-thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--pvg-green); }
.interface-is-animated .mock-message-system { position: relative; }

/* The transcript scrolls inside the original window; its frame stays still. */
.interface-cli, .interface-chat { width: 100%; min-width: 0; }
.interface-cli .mock-cli-body { display: flex; flex-direction: column; }
.interface-cli, .interface-cli .mock-window { min-height: 400px; }
.interface-chat, .interface-chat .mock-chat { min-height: 500px; }
.mock-cli-viewport { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mock-cli-transcript, .mock-chat-transcript { position: relative; padding-bottom: 8px; }
.mock-cli-step:first-child .mock-cli-command { margin-top: 0; }
.mock-cli-output.mock-cli-tree { gap: 0; }
.interface-cli .mock-cli-output p { overflow-wrap: anywhere; }
.mock-cli-tree .mock-cli-target, .mock-cli-grant p:first-child { color: var(--pvg-green); }
.interface-chat .mock-chat-thread { overflow-y: auto; scrollbar-width: none; padding-right: 5px; }
.interface-chat .mock-chat-thread::-webkit-scrollbar { display: none; }
.interface-chat .mock-message-user { margin-top: 0; max-width: 88%; }
.interface-chat .mock-message-system { max-width: none; margin-top: 12px; }
.interface-chat .mock-system-row > .mock-cortex-icon { margin-top: 14px; }
.interface-chat .mock-chat-access { display: block; width: auto; margin: 14px 0 0; padding: 13px; }
.mock-chat-access > b { display: block; margin-bottom: 8px; }
.mock-chat-access .mock-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-left: 0;
  border-top: 1px solid var(--pvg-line);
  font-size: clamp(11px, 0.9vw, 13px);
}
.mock-access-row > span { color: var(--pvg-ink); }
.mock-access-row > strong { color: var(--pvg-green); font-size: inherit; font-weight: 500; }
.mock-chat-access .mock-chat-sources { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 7px 0 12px; padding: 0; border: 0; color: var(--pvg-ink-dim); }
.mock-chat-sources small { font-size: 10px; }
.mock-chat-access .mock-access-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--pvg-green);
  border-radius: 5px;
  text-align: center;
  color: var(--pvg-ink);
  background: color-mix(in srgb, var(--pvg-green) calc(8% + var(--interface-focus, 0) * 12%), transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pvg-green) calc(var(--interface-auth-pulse, 0) * 12%), transparent);
}
.mock-access-labels { display: grid; }
.mock-access-labels > span { grid-area: 1 / 1; opacity: 0; }
.mock-access-labels > .is-active { opacity: 1; }
.mock-auth-shield { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--pvg-green); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: var(--interface-auth, 0); }
.mock-auth-check { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--interface-auth-check, 0)); }
.mock-access-confirm.is-authenticated { color: var(--pvg-green); }
.mock-system-done .mock-message-system { display: flex; flex-direction: column; align-items: flex-start; }
.mock-mail-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--pvg-green);
  border-radius: 5px;
  color: var(--pvg-ink);
  font-size: inherit;
  line-height: 1.3;
}
.mock-mail-open svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--pvg-green); stroke-width: 1.3; }
.mock-mail-open > span:last-child { color: var(--pvg-green); }
.interface-chat .mock-chat-input { margin-top: 12px; }
.interface-chat .mock-chat-input { flex-shrink: 0; }

/* The non-animated view exposes all the evidence, with normal manual scrolling. */
.interface-figure:not(.interface-is-animated) .mock-cli-viewport,
.interface-figure:not(.interface-is-animated) .mock-chat-thread { scroll-behavior: auto; }

@media (max-width: 720px) {
  .interface-figure .interface-pointer { width: 16px; height: 21px; }
  .interface-cli, .interface-cli .mock-window { min-height: 440px; height: 440px; }
  .interface-chat, .interface-chat .mock-chat { min-height: 500px; height: 500px; }
  .interface-cli .mock-cli-body { font-size: 11px; }
}