/**
 * portal-converse.css
 *
 * Chat chrome for Bolt, the intelligent conversational booking
 * assistant. The classic funnel page is the chassis (portal-funnel.css
 * owns the card, fields, buttons, progress dots); this file owns only
 * the conversation layer that portal-converse.js mounts inside the
 * active step card: thread, bubbles with the Bolt avatar, chips,
 * typing indicator (the bolt dances while typing), and the input bar.
 * Tokens from portal.css.
 */

/* ── Dock (re-parented into the active step card) ─────────────── */

.sps-converse-dock {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 16px;
}

.sps-converse {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Thread ────────────────────────────────────────────────────── */

.sps-converse__thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* Assistant rows: avatar gutter + bubble. */
.sps-converse__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 92%;
}

.sps-converse__row--assistant {
    align-self: flex-start;
}

/* ── Bolt avatar ───────────────────────────────────────────────── */

.sps-converse__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sps-surface-2);
    border: 1px solid var(--sps-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sps-converse__avatar-bolt {
    width: 16px;
    height: 16px;
    color: var(--sps-accent);
}

/* The dance: fires while the typing indicator shows. */
.sps-converse__avatar--dancing .sps-converse__avatar-bolt {
    animation: sps-bolt-dance 0.9s infinite ease-in-out;
    transform-origin: 50% 80%;
}

@keyframes sps-bolt-dance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-2px) rotate(-8deg); }
    50%      { transform: translateY(0) rotate(0deg); }
    75%      { transform: translateY(-2px) rotate(8deg); }
}

/* ── Bubbles - generous padding + line spacing (operator review) ── */

.sps-converse__bubble {
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.012em;
    word-break: break-word;
    /* pre-wrap: the typewriter turns sentence boundaries into line
     * breaks so multi-sentence blurbs read as short human bursts. */
    white-space: pre-wrap;
}

.sps-converse__bubble--assistant {
    background: var(--sps-surface-2);
    color: var(--sps-text-primary);
    border-bottom-left-radius: 4px;
}

.sps-converse__bubble--user {
    align-self: flex-end;
    background: var(--sps-accent-dim);
    color: var(--sps-text-primary);
    border: 1px solid var(--sps-border);
    border-bottom-right-radius: 4px;
    max-width: 88%;
}

/* ── Typing indicator ──────────────────────────────────────────── */

.sps-converse__typing {
    display: inline-flex;
    gap: 5px;
    padding: 14px 16px;
    background: var(--sps-surface-2);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
}

.sps-converse__typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sps-text-muted);
    animation: sps-converse-typing 1s infinite ease-in-out;
}

.sps-converse__typing i:nth-child(2) { animation-delay: 0.15s; }
.sps-converse__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes sps-converse-typing {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .sps-converse__typing i { animation: none; }
    .sps-converse__avatar--dancing .sps-converse__avatar-bolt { animation: none; }
    .sps-converse-card-in { animation: none; }
}

/* ── Card-content entrance ─────────────────────────────────────── */
/* The third beat of think → type → reveal: portal-converse.js adds
 * this class to the section's [data-section-content] the moment Bolt
 * finishes typing, so the classic surface glides in under the blurb. */
.sps-converse-card-in {
    animation: sps-converse-card-in 300ms var(--sps-ease-out, ease-out);
}

@keyframes sps-converse-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Chips ─────────────────────────────────────────────────────── */

.sps-converse__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-start;
    max-width: 95%;
    padding-left: 36px; /* aligns with assistant bubbles past the avatar gutter */
}

.sps-converse__chip {
    border: 1.5px solid var(--sps-accent);
    color: var(--sps-accent);
    background: transparent;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background var(--sps-motion-fast) var(--sps-ease-out);
}

.sps-converse__chip:hover,
.sps-converse__chip:focus-visible {
    background: var(--sps-accent-glow-soft);
    outline: none;
}

.sps-converse__chip:focus-visible {
    box-shadow: 0 0 0 2px var(--sps-accent-glow-strong);
}

.sps-converse__chip--ghost {
    border-color: var(--sps-border);
    color: var(--sps-text-secondary);
    font-weight: 500;
}

/* ── Input bar ─────────────────────────────────────────────────── */

/* Explicit geometry: the bar always spans exactly its container and
 * can never exceed it (the input inside carries min-width: 0 so its
 * intrinsic size cannot push the send button past the right edge -
 * the mobile "far right side cut off" failure). */
.sps-converse__inputbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--sps-border);
    /* Same radius token as the classic inputs (10px) - the pill shape
     * diverged from the classic design system (owner call 2026-07-11). */
    border-radius: var(--sps-input-radius, 10px);
    background: var(--sps-surface-1);
}

.sps-converse__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sps-text-primary);
    /* Same token the classic inputs use (portal-funnel.css loads first
       on every converse page - LP-35 chassis). MUST stay >= 16px: a
       smaller size makes iOS zoom the viewport on focus, and a zoomed
       viewport pans horizontally - the "page swings left and right"
       bug on the mobile conversational app. */
    font-size: var(--sps-input-font, 16px);
    outline: none;
}

.sps-converse__input::placeholder {
    color: var(--sps-text-muted);
}

.sps-converse__send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--sps-accent);
    /* White glyph on the accent circle (owner call 2026-07-11) - the
     * previous main-bg navy read as black against the blue. */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--sps-motion-fast) var(--sps-ease-out);
}

.sps-converse__send:hover,
.sps-converse__send:focus-visible {
    background: var(--sps-accent-hover);
    outline: none;
}

/* Optical centring for the paper-airplane glyph: its visual mass sits
 * up-right, so a one-pixel nudge makes it read centred in the circle. */
.sps-converse__send svg {
    transform: translate(-1px, 1px);
}

/* ── Step-header hints - classic-only (owner decision 2026-07-11) ── */
/*  The "Tell us..." instructional subtext under each step title is    */
/*  redundant next to Bolt's per-card blurbs, so it renders only on    */
/*  the classic app. This stylesheet loads exclusively when            */
/*  is_converse (LP-35 skin layer), which makes it the conditional     */
/*  flag: this rule can never reach the classic surface, and a         */
/*  classic takeover inside converse keeps the quieter chrome too.     */
.portal-step-header__subtext {
    display: none;
}