/* Launchers demo: each example starts from a real screen (a web page, a folder,
 * a job advert), then the Agent Launcher review window and the agent's terminal,
 * or a new chat. Every face shares one grid cell, so the window keeps one height
 * across faces and examples; colours follow the site theme like the other demos.
 * Only the move to the next example flips; inside one example the windows change
 * like a desktop: the launcher pops up over the starting screen, then the terminal
 * or chat comes to the front with a quick crossfade. */
.launch-demo-window {
    position: relative;
    isolation: isolate;
}

/* The screenshot flash, as on the context demo. */
.launch-demo-window::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

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

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

.launch-demo-stage {
    display: grid;
    min-height: 15.5rem;
    color: rgb(var(--vv-color-text));
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: left;
}

.launch-demo-face {
    grid-area: 1 / 1;
    position: relative;
    min-width: 0;
    padding: 0.75rem 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease-out, visibility 0s linear 250ms;
}

.launch-demo-face.launch-demo-visible,
.launch-demo-face.launch-demo-behind {
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms ease-out, visibility 0s;
}

/* The starting screen stays put behind the launcher, as an inactive window. */
.launch-demo-face.launch-demo-behind { opacity: 0.65; }
.launch-demo-face.launch-demo-unused { display: none; }

/* The terminal and the chat are apps coming to the front: above everything else. */
.launch-terminal,
.launch-chat { z-index: 3; }

/* While the window flips to the next example, faces switch instantly. */
.launch-demo-window.launch-instant .launch-demo-face { transition: none; }

/* The launcher: a small window popping up over the starting screen, under two thirds
 * of its width and set towards the lower right, so the page you were on (its address
 * bar, title and the first cards or files) stays recognisable round it. Its type and
 * spacing are a step smaller than the other faces. */
.launch-demo-face.launch-review {
    z-index: 2;
    width: 62%;
    align-self: end;
    justify-self: end;
    margin: 0 0.9rem 0.6rem 0;
    padding: 0 0.5rem 0.35rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.5rem;
    background: rgb(var(--vv-color-surface));
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.35), 0 2px 6px rgb(0 0 0 / 0.2);
    font-size: 0.625rem;
    line-height: 1.4;
    transform: scale(0.96);
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}

.launch-demo-face.launch-review.launch-demo-visible {
    transform: scale(1);
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s;
}

.launch-dialog-title {
    margin: 0 -0.5rem 0.3rem;
    padding: 0.1rem 0.5rem;
    border-bottom: 1px solid rgb(var(--vv-color-input-border));
    text-align: center;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(var(--vv-color-text) / 0.75);
}

/* Tighter rows and smaller type, so the small window still holds every field. */
.launch-review .launch-field { gap: 0.1rem; margin-bottom: 0.25rem; }
.launch-review .launch-label { font-size: 0.5625rem; }
.launch-review .launch-input { padding: 0.15rem 0.4rem; }
.launch-review .launch-context { min-height: 1.15rem; gap: 0.25rem; }
.launch-review .launch-chip { gap: 0.25rem; padding: 0.05rem 0.4rem; font-size: 0.5625rem; }
.launch-review .launch-prompt { min-height: 0; }
.launch-review .launch-checks { gap: 0.15rem 0.75rem; margin-bottom: 0.3rem; }
.launch-review .launch-check { gap: 0.35rem; }
.launch-review .launch-checkbox { width: 0.75rem; height: 0.75rem; font-size: 0.4375rem; }
.launch-review .launch-hint { font-size: 0.5625rem; }
.launch-review .launch-hint kbd { padding: 0 0.2rem; font-size: 0.5rem; }
.launch-review .launch-buttons { gap: 0.3rem; }
.launch-review .launch-button { padding: 0.1rem 0.5rem; font-size: 0.5625rem; }

.launch-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

.launch-muted { color: rgb(var(--vv-color-text) / 0.6); }

/* Review window */
.launch-field { display: grid; gap: 0.15rem; margin-bottom: 0.45rem; }
.launch-label { font-size: 0.6875rem; font-weight: 600; color: rgb(var(--vv-color-text) / 0.75); }

.launch-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.3rem;
    background: rgb(var(--vv-color-control) / 0.6);
}

.launch-input .fa-chevron-down { font-size: 0.55rem; color: rgb(var(--vv-color-text) / 0.55); }

/* One row of badges, scrolling sideways in the app; here the overflow is cut off. */
.launch-context { display: flex; min-height: 1.35rem; align-items: center; gap: 0.3rem; overflow: hidden; }

.launch-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 999px;
    background: rgb(var(--vv-color-link) / 0.12);
    font-size: 0.6875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hidden copies reserve the full prompt, so the text appearing never resizes the window. */
.launch-prompt,
.launch-composer-text { display: grid; align-items: start; }
.launch-prompt { min-height: 2.75rem; }
.launch-prompt > *,
.launch-composer-text > * { grid-area: 1 / 1; }
.launch-prompt-reserve { visibility: hidden; }
.launch-prompt-text { opacity: 0; transition: opacity 350ms ease-out; }
.launch-prompt-text.launch-shown { opacity: 1; }

.launch-checks { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.55rem; }
.launch-check { display: inline-flex; align-items: center; gap: 0.45rem; }

.launch-checkbox {
    display: inline-flex;
    width: 0.9rem;
    height: 0.9rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.2rem;
    font-size: 0.5rem;
    color: transparent;
}

.launch-checked .launch-checkbox {
    border-color: rgb(var(--vv-color-link));
    background: rgb(var(--vv-color-link));
    color: #fff;
}

.launch-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.launch-hint { font-size: 0.6875rem; color: rgb(var(--vv-color-text) / 0.6); transition: color 250ms; }
.launch-hint-active { color: rgb(var(--vv-color-text)); }

.launch-hint kbd {
    padding: 0 0.3rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.625rem;
}

.launch-hint-active kbd { border-color: rgb(var(--vv-color-link)); color: rgb(var(--vv-color-link)); }

.launch-buttons { display: flex; gap: 0.4rem; }

.launch-button {
    padding: 0.2rem 0.65rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.3rem;
    font-size: 0.6875rem;
    transition: transform 150ms, box-shadow 250ms, background 250ms;
}

.launch-button-primary {
    border-color: rgb(var(--vv-color-link));
    background: rgb(var(--vv-color-link) / 0.85);
    color: #fff;
    font-weight: 600;
}

.launch-button-pressed {
    transform: scale(0.94);
    box-shadow: 0 0 0 3px rgb(var(--vv-color-link) / 0.3);
}

/* Terminal */
.launch-terminal .launch-mono { display: grid; gap: 0.35rem; font-size: 0.75rem; }
.launch-term-path { color: rgb(var(--vv-color-link)); }
.launch-term-prompt { color: rgb(var(--vv-color-text) / 0.55); }
.launch-term-request { padding-left: 0.6rem; border-left: 2px solid rgb(var(--vv-color-input-border)); }
.launch-term-status { display: flex; align-items: center; gap: 0.45rem; color: rgb(var(--vv-color-text) / 0.75); }
.launch-term-done { color: rgb(74 222 128); }
html[data-theme="light"] .launch-term-done { color: rgb(21 128 61); }

.launch-term-spinner {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    border: 2px solid rgb(var(--vv-color-link));
    border-top-color: transparent;
    border-radius: 999px;
    animation: spin 1s linear infinite;
}

/* Clicking the notification brings the agent's terminal to the front: a white outline
 * just outside the window frame, following its rounded corners, for a third of a second.
 * It is a sibling of the window, which clips its own content. A soft glow keeps it
 * readable on the light theme too. */
.launch-focus-ring {
    position: absolute;
    inset: -4px;
    z-index: 30;
    border: 2px solid rgb(255 255 255 / 0.95);
    border-radius: calc(0.75rem + 4px);
    box-shadow: 0 0 18px rgb(255 255 255 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.1);
    opacity: 0;
    pointer-events: none;
}

html[data-theme="light"] .launch-focus-ring {
    box-shadow: 0 0 14px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(0 0 0 / 0.14);
}

.launch-focus-ring.launch-focus-ring-on { animation: launchFocusRing 330ms ease-out; }

@keyframes launchFocusRing {
    0%, 100% { opacity: 0; }
    25%, 70% { opacity: 1; }
}

.launch-toast {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.6rem;
    background: rgb(var(--vv-color-surface));
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.launch-toast.launch-toast-shown { opacity: 1; transform: none; }
.launch-toast.launch-toast-pressed { transform: scale(0.97); box-shadow: 0 0 0 3px rgb(var(--vv-color-link) / 0.35); }

.launch-toast-icon {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    background: rgb(var(--vv-color-link) / 0.15);
    color: rgb(var(--vv-color-link));
    font-size: 0.7rem;
}

.launch-toast-body { display: grid; min-width: 0; gap: 0.05rem; font-size: 0.6875rem; line-height: 1.35; }
.launch-toast-body strong { font-size: 0.75rem; }
.launch-toast-body em { font-style: normal; font-size: 0.625rem; color: rgb(var(--vv-color-text) / 0.6); }

/* Starting screens */
.launch-scene { display: flex; flex-direction: column; gap: 0.45rem; }

.launch-address {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgb(var(--vv-color-control) / 0.7);
    color: rgb(var(--vv-color-text) / 0.7);
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.launch-address i { font-size: 0.6rem; }
.launch-page-title { font-size: 0.95rem; font-weight: 700; }

/* Uneven on purpose: the cards end at different heights and the buttons do not line up. */
.launch-pricing { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0.45rem; padding: 0.35rem; }

.launch-plan {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.45rem;
    background: rgb(var(--vv-color-control) / 0.45);
    font-size: 0.625rem;
    line-height: 1.35;
}

.launch-plan strong { font-size: 0.6875rem; }
.launch-price { font-size: 0.85rem; font-weight: 700; }

.launch-plan-button {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
    background: rgb(var(--vv-color-link) / 0.85);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
}

.launch-plan:nth-child(2) .launch-plan-button { align-self: center; margin-top: 0.6rem; }
.launch-plan:nth-child(3) .launch-plan-button { align-self: flex-end; }

/* The box drawn round the cards for the screenshot. */
.launch-region {
    position: absolute;
    inset: 0;
    border: 2px dashed rgb(var(--vv-color-link));
    border-radius: 0.55rem;
    background: rgb(var(--vv-color-link) / 0.08);
    clip-path: inset(0 100% 100% 0);
    opacity: 0;
    transition: clip-path 700ms ease-out, opacity 150ms ease-out;
    pointer-events: none;
}

.launch-region.launch-region-drawn { clip-path: inset(0 0 0 0); opacity: 1; }

/* Folder */
.launch-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }

.launch-file {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.launch-file i { font-size: 0.95rem; color: rgb(var(--vv-color-text) / 0.65); }
.launch-file .launch-file-sheet { color: rgb(34 160 90); }
.launch-file-selected { border-color: rgb(var(--vv-color-link) / 0.6); background: rgb(var(--vv-color-link) / 0.16); }
.launch-status-bar { margin-top: auto; font-size: 0.625rem; color: rgb(var(--vv-color-text) / 0.6); }

/* Job advert */
.launch-job-meta { font-size: 0.6875rem; margin-top: -0.3rem; }
.launch-job-text { margin: 0; line-height: 1.55; }
.launch-selected-text { background: rgb(var(--vv-color-link) / 0.32); border-radius: 0.15rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.launch-apply { align-self: flex-start; margin-top: 0; }


/* Chat */
.launch-chat { display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; }
.launch-chat-greeting { padding-top: 0.75rem; text-align: center; font-size: 0.95rem; font-weight: 500; color: rgb(var(--vv-color-text) / 0.85); }

.launch-composer {
    padding: 0.55rem 0.65rem 0.45rem;
    border: 1px solid rgb(var(--vv-color-input-border));
    border-radius: 0.75rem;
    background: rgb(var(--vv-color-control) / 0.6);
}

.launch-composer-text { min-height: 2.4rem; font-size: 0.75rem; }
.launch-composer-context { display: block; margin-top: 0.45rem; color: rgb(var(--vv-color-text) / 0.75); }
.launch-composer-context > span { display: block; }
.launch-composer-context > span:first-child { font-weight: 600; }
.launch-composer-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.35rem; font-size: 0.625rem; }
.launch-unsent { color: rgb(var(--vv-color-text) / 0.7); }

.launch-send {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgb(var(--vv-color-text) / 0.85);
    color: rgb(var(--vv-color-surface));
    font-size: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
    .launch-demo-window.launch-capturing::after { animation: none; opacity: 0; }
    .launch-demo-face,
    .launch-demo-face.launch-demo-visible,
    .launch-demo-face.launch-demo-behind,
    .launch-demo-face.launch-review,
    .launch-demo-face.launch-review.launch-demo-visible { transition: none; transform: none; }
    .launch-region,
    .launch-prompt-text,
    .launch-toast,
    .launch-hint,
    .launch-button { transition: none; }
    .launch-term-spinner { animation: none; }
    .launch-focus-ring.launch-focus-ring-on { animation: none; }
    .launch-toast.launch-toast-shown,
    .launch-toast.launch-toast-pressed,
    .launch-button-pressed { transform: none; }
}