@import url('tokens.css');

/* ============================================================================
   The program tour (ProgramTour): the balloon the shell stands beside the control a stop explains,
   the arrow that turns toward it, and the ring drawn around it. Global tour-* classes (no CSS
   isolation: the embedded host does not serve the scoped bundle). Every themed value reads a
   token, so light and dark both hold; the bare px are structural dimensions.

   Where the balloon stands, which side its arrow is on and when it shows are written by
   Static/js/tour.js: the balloon is drawn unseen, and appears once it has a place.
   ============================================================================ */

.tour-balloon {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-tour);
    width: 380px;
    max-width: calc(100vw - 24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}

.tour-balloon[data-placed] {
    opacity: 1;
    pointer-events: auto;
}

/* A stop with a clip is as wide as its clip: 560px, with the card's padding on both sides. */
.tour-balloon.with-clip {
    width: 594px;
}

/* The card scrolls on its own when the window is shorter than the stop, so the balloon never
   leaves the window to show all of it. */
.tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    color: var(--color-text);
}

/* In the desktop window the title bar's keys float in the top-right corner, and the balloon keeps
   below them (tour.js), so it has that much less height to stand in. */
.host-shell .tour-card {
    max-height: calc(100vh - 72px);
}

/* ---- The arrow: a square turned on its point, half of it over the card's edge ------------- */
.tour-arrow {
    position: absolute;
    z-index: 1;
    display: none;
    width: 12px;
    height: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-stroke);
    transform: rotate(45deg);
}

/* The balloon under its control: the arrow on its top edge, pointing up. */
.tour-balloon[data-side="bottom"] .tour-arrow {
    display: block;
    top: -6px;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/* The balloon over its control: the arrow on its bottom edge, pointing down. */
.tour-balloon[data-side="top"] .tour-arrow {
    display: block;
    bottom: -6px;
    border-left-color: transparent;
    border-top-color: transparent;
}

/* The balloon right of its control: the arrow on its left edge, pointing left. */
.tour-balloon[data-side="right"] .tour-arrow {
    display: block;
    left: -6px;
    border-top-color: transparent;
    border-right-color: transparent;
}

/* The balloon left of its control: the arrow on its right edge, pointing right. */
.tour-balloon[data-side="left"] .tour-arrow {
    display: block;
    right: -6px;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

/* ---- The ring around the control the stop explains ---------------------------------------- */
/* Drawn over the page and never in it, so the control keeps its own look and its own presses. */
/* The glow's 6px is mirrored in tour.js (RING_GLOW), which keeps the ring and its glow inside the
   part of the page the control can be seen through. */
.tour-ring {
    position: fixed;
    z-index: var(--z-tour);
    pointer-events: none;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 6px var(--color-accent-bg);
}

/* ---- The head: the page, where the reader is in the walk, and the way out ------------------ */
.tour-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.tour-eyebrow {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.tour-progress {
    flex: 0 0 auto;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.tour-close {
    flex: 0 0 auto;
}

/* ---- The clip of the real program -------------------------------------------------------- */
.tour-clip {
    line-height: 0;
}

.tour-clip video {
    display: block;
    width: 560px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    object-fit: cover;
}

/* A clip the browser could not play is not a hole in the balloon: the words carry the stop. */
.tour-clip[data-missing] {
    display: none;
}

/* ---- The words ---------------------------------------------------------------------------- */
.tour-title {
    margin: 0;
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.tour-body {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-text);
}

/* The conversation with the assistant, drawn like the Welcome page's: a small window of the reader's
   own assistant, its bar naming it with no product's look, and in it what is asked on the right in
   the accent tint, what the assistant answers on the left on the well. */
.tour-chat {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.tour-chat-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.tour-chat-title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

.tour-chat-names {
    font-size: var(--font-size-description);
    line-height: 1.3;
    color: var(--color-text-secondary);
}

.tour-chat-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.tour-bubble {
    margin: 0;
    max-width: 88%;
    padding: var(--space-3) var(--space-4);
    border-radius: 12px;
    font-size: var(--font-size-body);
    line-height: 1.45;
    color: var(--color-text);
}

.tour-bubble-ask {
    align-self: flex-end;
    background: var(--color-accent-bg);
    border-bottom-right-radius: var(--radius-sm);
}

.tour-bubble-answer {
    align-self: flex-start;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-stroke);
    border-bottom-left-radius: var(--radius-sm);
}

/* ---- The balloon's own replies ------------------------------------------------------------ */
.tour-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}