/* The guide is outside the miniature app so it stays legible without stealing clicks. */
.demo-guide {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.demo-guide[hidden] { display: none; }

.demo-guide-pointer {
  position: absolute;
  left: var(--guide-x);
  top: var(--guide-y);
  width: 20px;
  height: 20px;
  fill: #1766da;
  filter: drop-shadow(0 1px 1px white) drop-shadow(0 0 2px white);
  transform-origin: 4px 4px;
}

.demo-guide-label {
  position: absolute;
  left: var(--guide-label-x);
  top: var(--guide-label-y);
  width: var(--guide-label-width);
  padding: 10px 12px;
  border: 1px solid #ffffff9c;
  border-radius: 11px;
  background: #1465d9;
  box-shadow: 0 5px 18px #17477d24;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

.demo-guide-label strong { display: block; font-weight: 600; }
.demo-guide-label span { display: block; margin-top: 3px; color: #e3efff; font-size: 10px; }

.codex-preview .conversation-button[data-guide-target] {
  background: #e8f2ff;
  color: #1458b6;
  box-shadow: inset 0 0 0 1.5px #3d8bf0;
}

.demo-guide.is-animated .demo-guide-pointer { animation: guide-point 1.6s cubic-bezier(.22, 1, .36, 1) 3; }
.demo-guide.is-animated .demo-guide-label { animation: guide-appear .45s ease-out both; }
.codex-preview .conversation-button[data-guide-target="animate"] { animation: guide-pulse 1.6s ease-in-out 3; }

@keyframes guide-point {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12% { transform: translate(13px, 9px) scale(1); }
  40%, 65% { transform: translate(0, 0) scale(1); }
  52% { transform: translate(0, 0) scale(.86); }
}

@keyframes guide-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px #3d8bf0; }
  52% { box-shadow: inset 0 0 0 2px #1766da, 0 0 0 4px #398cff20; background: #d9eaff; }
}

@keyframes guide-appear {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-guide.is-animated .demo-guide-pointer,
  .demo-guide.is-animated .demo-guide-label,
  .codex-preview .conversation-button[data-guide-target="animate"] { animation: none; }
}