/*
 * public/assets/css/product-tour.css
 *
 * ServiceProStream - Animated Product Tour (Booking App)
 *
 * A self-contained, theme-portable infographic component. A phone frame
 * auto-cycles through the CONVERSATIONAL booking app: Bolt greets the
 * customer, checks every answer as it is given, pinpoints the problem
 * from plain English, and books a real available time - agentic,
 * friendly, intelligent. (The dashboard / tech-portal story is told
 * elsewhere on the page.)
 *
 * Used by the marketing fronts (product tour + setup tour partials).
 * Self-contained by design: it owns ALL of its styling and tokens
 * (scoped to .mkt-tour) and depends on no layout stylesheet. Scene cycling is driven by
 * product-tour.js (IntersectionObserver gated). Respects
 * prefers-reduced-motion: no cycling, scene 0 shown static.
 *
 * Naming: .mkt-tour* (component) and .mkt-tscene* (per-scene mock UI).
 * .mkt-phone* (the device frame) is owned here, not by marketing.css.
 */

/* ================================================================== */
/*  Tokens - scoped so the component renders identically on any dark   */
/*  surface (marketing #080d14, onboarding #0d1117).                   */
/* ================================================================== */

.mkt-tour {
    --t-bg:          #0b1120;
    --t-surface:     #141f30;
    --t-surface-2:   #0f1826;
    --t-border:      #223058;
    --t-text:        #e8eef6;
    --t-muted:       #8197b3;
    --t-blue:        #388bfd;
    --t-blue-dim:    rgba(56, 139, 253, 0.14);
    --t-green:       #22c55e;
    --t-green-dim:   rgba(34, 197, 94, 0.16);
    --t-gold:        #f5c842;
    --t-gold-dim:    rgba(245, 200, 66, 0.16);
    --t-radius:      0.7rem;
    --t-font-display: 'Barlow Condensed', 'Impact', sans-serif;
    --t-font-body:    'DM Sans', 'Segoe UI', sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

/* ================================================================== */
/*  Device frame (owned here)                                          */
/* ================================================================== */

/* Definite width so the phone - whose scenes are all position:absolute,
   giving the screen zero intrinsic width - never shrink-to-fit collapses
   into a thin "pill". Without this the hero (wide flex column) collapses
   even though the fixed-width onboarding panel happens to resolve. */
.mkt-tour__device {
    width: 100%;
    max-width: 300px;
}

.mkt-phone {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    padding: 0.55rem;
    aspect-ratio: 9 / 16;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 2.25rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1.5px rgba(56, 139, 253, 0.5);
}

.mkt-phone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1.85rem;
    background: var(--t-bg);
}

/* ================================================================== */
/*  Scenes - stacked layers, one active at a time (cross-fade + lift)  */
/* ================================================================== */

.mkt-tour__scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.99);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}

.mkt-tour__scene.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.mkt-tscene {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--t-bg);
    font-family: var(--t-font-body);
}

.mkt-tscene__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
    background: var(--t-surface-2);
    border-bottom: 1px solid var(--t-border);
}

.mkt-tscene__bolt {
    display: inline-flex;
    color: var(--t-blue);
    font-size: 0.95rem;
}

.mkt-tscene__bar-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--t-text);
}

.mkt-tscene__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.6rem;
    padding: 1rem 0.95rem 1.1rem;
}

/* Intro scene centers its small cluster (icon + title + button). */
.mkt-tscene__body--intro {
    justify-content: center;
    gap: 1.1rem;
}

.mkt-tscene__h {
    margin: 0 0 0.15rem;
    font-family: var(--t-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--t-text);
}

.mkt-tscene__h--xl { font-size: 1.6rem; }

/* Per-scene circular icon badge - anchors each step and fills the phone */
.mkt-tour__icon {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--t-blue);
    background: var(--t-blue-dim);
    border: 1px solid rgba(56, 139, 253, 0.4);
}

.mkt-tour__icon--xl { width: 86px; height: 86px; font-size: 2.5rem; }

.mkt-tour__scene.is-active .mkt-tour__icon {
    animation: tourPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mkt-tour__caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--t-blue);
    animation: tourCaret 1s step-end infinite;
}

/* ── Smart Match: matched result cards ──────────────────────────── */

.mkt-tour__matches {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mkt-tour__match {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.55rem;
    background: var(--t-green-dim);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-left: 3px solid var(--t-green);
    text-align: left;
    opacity: 0;
}

.mkt-tour__scene.is-active .mkt-tour__match {
    animation: tourReveal 0.5s ease both;
}

.mkt-tour__scene.is-active .mkt-tour__match:nth-child(1) { animation-delay: 0.2s; }
.mkt-tour__scene.is-active .mkt-tour__match:nth-child(2) { animation-delay: 0.55s; }
.mkt-tour__scene.is-active .mkt-tour__match:nth-child(3) { animation-delay: 0.9s; }

.mkt-tour__match-icon {
    flex-shrink: 0;
    color: var(--t-green);
    font-size: 1.2rem;
}

.mkt-tour__match-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mkt-tour__match-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-muted);
}

.mkt-tour__match-val {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--t-text);
}

/* ── Day / time chips ───────────────────────────────────────────── */

.mkt-tour__chips,
.mkt-tour__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mkt-tour__chip,
.mkt-tour__slot {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0.5rem 0.4rem;
    border-radius: 0.55rem;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    color: var(--t-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.mkt-tour__chip.is-on,
.mkt-tour__slot.is-on {
    border-color: var(--t-blue);
    background: var(--t-blue-dim);
    color: var(--t-text);
    box-shadow: 0 0 0 1px rgba(56, 139, 253, 0.35);
}

/* ── Service-area badge + "live schedule" note (the intelligence) ── */

.mkt-tour__ok {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 50rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--t-green);
    background: var(--t-green-dim);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.mkt-tour__note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--t-muted);
}

.mkt-tour__note-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--t-green);
    box-shadow: 0 0 8px var(--t-green);
    flex-shrink: 0;
    animation: tourPulse 1.8s ease-in-out infinite;
}

.mkt-tour__cta-btn {
    margin-top: 0.3rem;
    text-align: center;
    padding: 0.7rem;
    border-radius: 0.6rem;
    background: var(--t-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ── Scene 6 - Booking confirmed ───────────────────────────────── */

.mkt-tour__confirm {
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
}

.mkt-tour__confirm-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--t-green-dim);
    border: 2px solid var(--t-green);
    color: var(--t-green);
    font-size: 1.7rem;
    box-shadow: 0 0 26px rgba(34, 197, 94, 0.4);
}

.mkt-tour__scene.is-active .mkt-tour__confirm-ring {
    animation: tourPop 0.6s ease 0.25s both;
}

.mkt-tour__confirm-title {
    margin: 0;
    font-family: var(--t-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--t-text);
}

.mkt-tour__confirm-meta {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--t-muted);
}

/* ================================================================== */
/*  Setup-tour scenes - cartoonized onboarding-wizard SIMULATION       */
/*                                                                    */
/*  Per-scene content for partials/marketing/setup-tour.html.twig (the */
/*  marketing Setup section). Each scene reuses the booking shell's     */
/*  .mkt-tscene + .mkt-tscene__bar; .mkt-setup is the body (flex:1) so  */
/*  content fills the phone. Entrance animations fire on .is-active.    */
/* ================================================================== */

.mkt-setup {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.1rem 1rem 1.3rem;
    text-align: center;
}

.mkt-setup__title {
    margin: 0;
    font-family: var(--t-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--t-text);
}

.mkt-setup__sub {
    margin: 0;
    font-size: 0.9rem;
    color: var(--t-muted);
}

/* ── Opener (title card) ───────────────────────────────────────── */
.mkt-setup--opener { gap: 1.1rem; }

.mkt-setup__brand {
    margin: 0;
    font-family: var(--t-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--t-blue);
    text-transform: uppercase;
}

.mkt-setup__title--opener { font-size: 1.85rem; }

/* ── Big circular icon badge ───────────────────────────────────── */
.mkt-setup__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    font-size: 2.2rem;
    color: var(--t-blue);
    background: var(--t-blue-dim);
    border: 1px solid rgba(56, 139, 253, 0.4);
}

.mkt-setup__icon--xl { width: 88px; height: 88px; font-size: 2.6rem; }

.mkt-tour__scene.is-active .mkt-setup__icon {
    animation: mktSetupPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mkt-setup__icon--live {
    color: var(--t-gold);
    background: var(--t-gold-dim);
    border-color: rgba(245, 200, 66, 0.55);
}

.mkt-tour__scene.is-active .mkt-setup__icon--live {
    animation: mktSetupBounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Location: map + centered dropping pin ─────────────────────── */
.mkt-setup__map {
    position: relative;
    width: 160px;
    height: 116px;
    border-radius: 0.7rem;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    overflow: hidden;
    background-image:
        linear-gradient(rgba(56, 139, 253, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 139, 253, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
}

.mkt-setup__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--t-blue);
    font-size: 2.1rem;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
}

.mkt-tour__scene.is-active .mkt-setup__pin {
    animation: mktSetupDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mkt-setup__addr {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 50rem;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    color: var(--t-text);
    font-size: 0.82rem;
    font-weight: 600;
}

.mkt-setup__addr i { color: var(--t-blue); }

/* ── Hours: day rows ───────────────────────────────────────────── */
.mkt-setup__days {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    max-width: 210px;
}

.mkt-setup__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--t-text);
}

.mkt-setup__day-on { color: var(--t-green); font-weight: 700; }
.mkt-setup__day--off { opacity: 0.5; }
.mkt-setup__day--off span:last-child { color: var(--t-muted); }

/* ── Service Area: two clearly-labelled choices ────────────────── */
.mkt-setup__choices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 230px;
}

.mkt-setup__choice {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 50rem;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
}

.mkt-setup__choice.is-on {
    border-color: var(--t-blue);
    background: var(--t-blue-dim);
    box-shadow: 0 0 0 1px rgba(56, 139, 253, 0.35);
}

.mkt-setup__choice-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--t-muted);
}

.mkt-setup__choice.is-on .mkt-setup__choice-label { color: var(--t-blue); }

.mkt-setup__choice-val {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--t-text);
}

.mkt-setup__choice-or {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--t-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Your Config: checklist ────────────────────────────────────── */
.mkt-setup__checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 220px;
    text-align: left;
}

.mkt-setup__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--t-text);
    opacity: 0;
}

.mkt-setup__check i { color: var(--t-green); font-size: 1.05rem; }

.mkt-tour__scene.is-active .mkt-setup__check { animation: mktSetupSlide 0.5s ease both; }
.mkt-tour__scene.is-active .mkt-setup__check:nth-child(1) { animation-delay: 0.35s; }
.mkt-tour__scene.is-active .mkt-setup__check:nth-child(2) { animation-delay: 0.7s; }
.mkt-tour__scene.is-active .mkt-setup__check:nth-child(3) { animation-delay: 1.05s; }

/* ── Your First Tech: pill buttons ─────────────────────────────── */
.mkt-setup__pills {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 230px;
}

.mkt-setup__pill {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 50rem;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    color: var(--t-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.mkt-setup__pill.is-on {
    color: var(--t-text);
    border-color: var(--t-blue);
    background: var(--t-blue-dim);
    box-shadow: 0 0 0 1px rgba(56, 139, 253, 0.35);
}

/* ── Live!: payoff with sparkle ────────────────────────────────── */
.mkt-setup--live { position: relative; }

.mkt-setup__title--live {
    font-size: 1.65rem;
    color: var(--t-gold);
}

.mkt-setup__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 50rem;
    background: var(--t-green-dim);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: var(--t-green);
    font-size: 0.82rem;
    font-weight: 700;
}

.mkt-setup__spark {
    position: absolute;
    font-size: 0.75rem;
    color: var(--t-gold);
    opacity: 0;
}

.mkt-setup__spark--1 { top: 14%; left: 26%; }
.mkt-setup__spark--2 { top: 10%; right: 28%; font-size: 0.95rem; }
.mkt-setup__spark--3 { top: 26%; right: 24%; }

.mkt-tour__scene.is-active .mkt-setup__spark { animation: mktSetupSpark 1.6s ease-in-out infinite; }
.mkt-tour__scene.is-active .mkt-setup__spark--2 { animation-delay: 0.4s; }
.mkt-tour__scene.is-active .mkt-setup__spark--3 { animation-delay: 0.8s; }

@keyframes mktSetupPop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes mktSetupBounce {
    0%   { opacity: 0; transform: scale(0) translateY(10px); }
    50%  { opacity: 1; transform: scale(1.2) translateY(-6px); }
    70%  { transform: scale(0.95) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mktSetupDrop {
    0%   { opacity: 0; transform: translate(-50%, -160%); }
    60%  { opacity: 1; transform: translate(-50%, -38%); }
    78%  { transform: translate(-50%, -60%); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes mktSetupSlide {
    0%   { opacity: 0; transform: translateX(-8px); }
    100% { opacity: 1; transform: none; }
}

@keyframes mktSetupSpark {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50%      { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-tour__scene.is-active .mkt-setup__icon,
    .mkt-tour__scene.is-active .mkt-setup__icon--live,
    .mkt-tour__scene.is-active .mkt-setup__pin,
    .mkt-tour__scene.is-active .mkt-setup__check,
    .mkt-tour__scene.is-active .mkt-setup__spark {
        animation: none;
    }
    .mkt-setup__check { opacity: 1; }
    .mkt-setup__spark { opacity: 0; }
}

/* ================================================================== */
/*  Caption + dot indicators                                           */
/* ================================================================== */

.mkt-tour__caption {
    margin: 0;
    min-height: 1.4em;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--t-text);
    transition: opacity 0.3s ease;
}

.mkt-tour__dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.mkt-tour__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--t-border);
    transition: background 0.3s ease, transform 0.3s ease;
}

.mkt-tour__dot.is-on {
    background: var(--t-blue);
    transform: scale(1.25);
}

/* ================================================================== */
/*  Keyframes                                                          */
/* ================================================================== */

@keyframes tourPop {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes tourPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.8); }
}

}

@keyframes tourCaret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes tourReveal {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
}

/* ================================================================== */
/*  Reduced motion - no cycling; scene 0 shown static, no overlays.    */
/*  (JS also skips the interval; this covers the CSS-only fallback.)   */
/* ================================================================== */

/* ================================================================== */
/*  Bolt conversational scenes (the chat vignette)                     */
/*                                                                     */
/*  Mirrors the REAL conversational booking experience: Bolt bubbles   */
/*  with the bolt avatar, the customer's replies on the right, and a   */
/*  dancing-bolt typing beat. Rows stagger in on .is-active with the   */
/*  same animation-delay pattern the match cards use.                  */
/* ================================================================== */

.mkt-chat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.mkt-chat__row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    max-width: 94%;
}

.mkt-chat__row--user {
    align-self: flex-end;
    justify-content: flex-end;
}

.mkt-tour__scene.is-active .mkt-chat__row {
    animation: tourReveal 0.45s ease both;
}

.mkt-tour__scene.is-active .mkt-chat__row:nth-child(1) { animation-delay: 0.15s; }
.mkt-tour__scene.is-active .mkt-chat__row:nth-child(2) { animation-delay: 0.85s; }
.mkt-tour__scene.is-active .mkt-chat__row:nth-child(3) { animation-delay: 1.55s; }
.mkt-tour__scene.is-active .mkt-chat__row:nth-child(4) { animation-delay: 2.1s; }

.mkt-chat__avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--t-blue-dim);
    border: 1px solid var(--t-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-gold);
    font-size: 0.68rem;
}

.mkt-chat__avatar--dancing i {
    display: inline-block;
    animation: tourBoltDance 0.9s infinite ease-in-out;
}

.mkt-chat__bubble {
    padding: 0.45rem 0.65rem;
    border-radius: 0.75rem;
    border-bottom-left-radius: 0.25rem;
    background: var(--t-surface-2);
    border: 1px solid var(--t-border);
    color: var(--t-text);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
}

.mkt-chat__bubble--user {
    background: var(--t-blue-dim);
    border-color: var(--t-blue);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.25rem;
}

.mkt-chat__typing {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.55rem 0.65rem;
    background: var(--t-surface-2);
    border: 1px solid var(--t-border);
    border-radius: 0.75rem;
    border-bottom-left-radius: 0.25rem;
}

.mkt-chat__typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--t-muted);
    animation: tourTypingDot 1s infinite ease-in-out;
}

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

@keyframes tourTypingDot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-2px); }
}

@keyframes tourBoltDance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-1px) rotate(-8deg); }
    50%      { transform: translateY(0) rotate(0deg); }
    75%      { transform: translateY(-1px) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-tour__scene {
        transition: none;
    }
    .mkt-tour__scene.is-active .mkt-tour__confirm-ring {
        animation: none;
    }
    .mkt-tour__note-dot {
        animation: none;
    }
    .mkt-tour__confirm-ring { opacity: 1; }
    .mkt-tour__caret {
        animation: none;
    }
    .mkt-tour__scene.is-active .mkt-tour__match {
        animation: none;
    }
    .mkt-tour__match { opacity: 1; }
    .mkt-tour__scene.is-active .mkt-chat__row {
        animation: none;
    }
    .mkt-chat__typing i,
    .mkt-chat__avatar--dancing i {
        animation: none;
    }
}