/* Compact application examples. Only the active panel takes up space; mobile
 * layout stability belongs to the shared demo slot, not a stretched window. */
.context-demo-window {
    position: relative;
    isolation: isolate;
}

.context-demo-window::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

.context-demo-window.context-capturing::after {
    animation: contextScreenshot 180ms ease-in-out;
}

@keyframes contextScreenshot {
    0%, 100% { opacity: 0; }
    35%, 65% { opacity: 0.24; }
}

.context-demo-stage {
    background: rgb(var(--vv-color-surface));
    color: rgb(var(--vv-color-text));
}

.context-demo-panel {
    display: none;
    min-width: 0;
    pointer-events: none;
}

.context-demo-panel.context-demo-visible { display: block; }
.context-photo { padding: 1rem; }
.context-photo .home-context-menu { margin-inline: auto; }

/* Use the same site theme tokens as the older app demos: worksheet, controls,
 * customer message and reply all change together, not just the title bar. */
.context-excel,
.context-support {
    background: rgb(var(--vv-color-surface));
    color: rgb(var(--vv-color-text));
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: left;
}

.excel-tabs {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem 0;
    border-bottom: 1px solid rgb(var(--vv-color-input-border));
    background: rgb(var(--vv-color-control));
}

.excel-tabs > * { padding-bottom: 0.3rem; }
.excel-tabs strong { color: rgb(var(--vv-color-link)); border-bottom: 2px solid currentColor; }
.excel-formula { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem; border-bottom: 1px solid rgb(var(--vv-color-input-border)); }
.excel-formula > :first-child { width: 3rem; padding-left: 0.3rem; background: rgb(var(--vv-color-control)); border: 1px solid rgb(var(--vv-color-input-border)); }
.excel-formula em { color: rgb(var(--vv-color-text) / 0.65); }
.excel-sheet { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.6875rem; }
.excel-sheet :is(th, td) { height: 1.65rem; padding: 0.15rem 0.3rem; border: 1px solid rgb(var(--vv-color-input-border)); }
.excel-sheet th { text-align: center; font-weight: 400; background: rgb(var(--vv-color-control)); }
.excel-sheet tr > :first-child { width: 1.5rem; }
.excel-sheet .excel-heading,
.excel-sheet .excel-selected { font-weight: 600; background: rgb(var(--vv-color-link) / 0.12); }
.excel-sheet .excel-selected { outline: 2px solid rgb(var(--vv-color-link)); outline-offset: -2px; }
.excel-footer { display: flex; align-items: center; gap: 1rem; padding: 0.3rem 0.6rem; background: rgb(var(--vv-color-control)); }
.excel-footer strong { color: rgb(var(--vv-color-link)); border-bottom: 2px solid currentColor; }
.excel-zoom { margin-left: auto; }

.support-ticket { padding: 0.75rem; }
.support-message { margin-bottom: 0.5rem; }
.support-message strong { font-size: 0.6875rem; color: rgb(var(--vv-color-text) / 0.75); }
.support-tracking { display: grid; gap: 0.1rem; padding: 0.4rem 0.5rem; border: 1px solid rgb(var(--vv-color-input-border)); border-radius: 0.3rem; background: rgb(var(--vv-color-control)); font-size: 0.6875rem; }
.support-delayed { color: rgb(var(--vv-color-text) / 0.8); }
.context-reply { margin-top: 0.6rem; border: 1px solid rgb(var(--vv-color-input-border)); border-radius: 0.3rem; }
.context-reply-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 0.5rem; padding: 0.3rem 0.5rem; background: rgb(var(--vv-color-control)); border-bottom: 1px solid rgb(var(--vv-color-input-border)); }
.context-reply-heading > span { font-size: 0.625rem; color: rgb(var(--vv-color-text) / 0.65); }
.context-reply-heading strong { font-size: 0.6875rem; }
.context-reply-body { display: grid; padding: 0.5rem; background: rgb(var(--vv-color-surface)); }
.context-reply-body > * { grid-area: 1 / 1; }
.context-reply-placeholder { color: rgb(var(--vv-color-text) / 0.65); }
.context-reply-result { opacity: 0; transition: opacity 350ms ease-out; }
.context-reply-result.context-reply-ready { opacity: 1; }

/* Desktop caption widths still reserve all spoken examples. Stacked slides use
 * a shared, stable caption slot across all modes. */
.context-caption-reserve { visibility: hidden; }

@media (max-width: 639px) {
    .excel-extra-tab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .context-reply-result { transition: none; }
    .context-demo-window.context-capturing::after { animation: none; opacity: 0; }
}