/* Visitor commentary is deliberately separate from the native CAD surfaces. */
.visitor-guide {
    position: fixed;
    top: calc(var(--visitor-viewport-top, 0px) + 12px);
    right: 12px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    z-index: 1001;
    width: min(calc(100% - 24px), 470px);
    margin: 0;
    padding: 28px 28px 28px 96px;
    border: 1px solid #b99ae6;
    border-left: 4px solid #c4a0ff;
    border-radius: 24px 24px 24px 4px;
    background: rgba(33, 23, 51, .96);
    box-shadow: 0 20px 64px #0009;
    color: #f6efff;
}
.visitor-guide[hidden], .visitor-veil[hidden], .visitor-guide [hidden] { display: none; }
.visitor-avatar { position: absolute; left: 18px; top: 22px; width: 60px; height: 60px; color: #c4a0ff; }
.visitor-label { margin: 0 0 10px; color: #d1b5ff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.visitor-guide h2 { margin: 0 0 12px; color: #f6efff; font-size: 1.85rem; line-height: 1.2; }
.visitor-body { margin: 0; font-size: 1.06rem; line-height: 1.5; }
.visitor-secondary { margin: 16px 0 0; color: #decdf4; font-size: .95rem; line-height: 1.5; }
.visitor-controls { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.visitor-controls button { width: auto; min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: #decaff; font-size: .8rem; text-decoration: underline; }
.visitor-controls button:focus-visible { outline: 2px solid #d1b5ff; outline-offset: 4px; }
.visitor-veil { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 999; pointer-events: none; }
#visitor-ring { stroke-width: 4; filter: drop-shadow(0 0 7px #c4a0ff); transition: x 180ms ease, y 180ms ease, width 180ms ease, height 180ms ease; }
.workspace .visitor-next { outline: 4px solid #c4a0ff; outline-offset: 4px; box-shadow: 0 0 18px #c4a0ff88; }
.incoming-request-graphic.visitor-subdued { filter: brightness(.45); }
.demo-start-overlay { position: fixed; inset: 0; z-index: 1100; border-radius: 0; background: rgba(5, 4, 14, .78); }
.demo-start-overlay[hidden] { display: none; }
.demo-start-card { width: min(100%, 460px); border-color: #b99ae6; background: #211733; border-radius: 24px 24px 24px 4px; }
.demo-start-label { color: #d1b5ff; }
.demo-start-button { background: #c4a0ff; border-color: #c4a0ff; color: #211733; }
.demo-start-button:focus-visible { outline-color: #d1b5ff; }
.visitor-guide.is-modal { padding: 14px 20px; }
.visitor-guide.is-modal .visitor-avatar { display: none; }
@media (max-width: 800px) {
    .visitor-guide { padding: 24px 20px 24px 84px; }
    .visitor-avatar { left: 14px; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { #visitor-ring { stroke-width: 4; filter: drop-shadow(0 0 5px #c4a0ff); transition: none; } }

.trial-success-toast:not(:empty) { z-index: 1002; }

.visitor-guide.is-complete { border-color: #e0c5ff; box-shadow: 0 0 32px #b580ef33, 0 20px 64px #0009; }
.visitor-guide.is-complete h2 { font-size: 2rem; }
.visitor-guide.is-complete .visitor-secondary { color: #eedfff; font-weight: 700; }
.visitor-guide.is-complete .visitor-label::before { content: "✓ "; }

/* Native dialogs already dim their surroundings; retain the visitor spotlight ring. */
.visitor-veil.is-modal .visitor-shade { fill-opacity: 0; }
#visitor-next-ring { filter: drop-shadow(0 0 5px #c4a0ff); }

/* Reserve scrolling room without resizing or rearranging the CAD workspace. */
.visitor-tour-active .demo-page::before { content: ""; display: block; height: var(--visitor-reserve, 360px); }
.visitor-tour-active .demo-page { padding-bottom: calc(50vh + var(--visitor-reserve, 360px)); }
.visitor-tour-active .visitor-guide { max-height: var(--visitor-guide-max-height, 45dvh); }
/* Keep native dialogs accessible beside the guide, or in the remaining viewport. */
.modal-backdrop.visitor-modal-side { top: var(--visitor-viewport-top, 0px); bottom: var(--visitor-viewport-bottom, 0px); right: calc(var(--visitor-guide-width) + 36px); overflow-y: auto; align-items: safe center; }
.modal-backdrop.visitor-modal-below { top: var(--visitor-clearance); bottom: var(--visitor-viewport-bottom, 0px); overflow-y: auto; align-items: safe center; }