/* Guided tour (2026-08-04) — spotlight ring + floating bubble.
   Engine: static/js/chat/tour.js; steps: chat/tour_steps.js.
   MODAL (her call 2026-08-05): the overlay swallows every click — while
   touring, only the bubble (Next / Skip) is interactive; the demo drives
   the plate itself. */

.bf-tour { position: fixed; inset: 0; z-index: 1080; pointer-events: auto; }
/* Paused: the chapter's surface is hidden (other tab active). */
.bf-tour.bf-tour-hidden { display: none; }
/* Current step's anchor unresolved — no highlight beats a stale one. */
.bf-tour-ring.bf-tour-ring-hidden { display: none; }
/* Search chapter, last stop: the history flyout shows ABOVE the dim
   (read-only — the overlay still owns every click) while the ring sits
   on the clock and the bubble beside it. */
.bfh-flyout.bf-tour-lift { z-index: 1081; pointer-events: none; }

.bf-tour-ring {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 2px #e8590c, 0 0 0 9999px rgba(17, 24, 39, 0.38);
    transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
    pointer-events: none;
}

.bf-tour-bubble {
    position: fixed;
    width: min(340px, calc(100vw - 24px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    padding: 16px 18px 14px;
    pointer-events: auto;
    transition: top 200ms ease, left 200ms ease;
}
.bf-tour-title { font-weight: 700; font-size: 0.95rem; color: #1a1a1a; margin-bottom: 4px; }
.bf-tour-body { font-size: 0.85rem; line-height: 1.55; color: #495057; margin: 0 0 12px; }
.bf-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bf-tour-dots { display: inline-flex; gap: 5px; }
.bf-tour-dot { width: 6px; height: 6px; border-radius: 50%; background: #dee2e6; }
.bf-tour-dot.on { background: #e8590c; }
.bf-tour-btns { display: inline-flex; align-items: center; gap: 14px; }
.bf-tour-skip {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 0.8rem; color: #8a8a8a;
}
.bf-tour-skip:hover { color: #495057; }
.bf-tour-next {
    border: 0; border-radius: 9999px; cursor: pointer;
    background: #e8590c; color: #fff;
    font-size: 0.82rem; font-weight: 600; padding: 7px 16px;
}
.bf-tour-next:hover { background: #d9480f; }
.bf-tour-next:disabled { background: #e9ecef; color: #adb5bd; cursor: default; }
.bf-tour-hint {
    margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1f3f5;
    font-size: 11px; color: #adb5bd; text-align: center;
}

/* Mobile: bubble as a bottom sheet — position math skipped by the engine. */
@media (max-width: 576px) {
    .bf-tour-bubble {
        top: auto !important; left: 12px !important; right: 12px; bottom: 12px;
        width: auto;
    }
}

/* Extra highlight for a step's `ringWith` element (the search chapter's
   history panel beside the clock): outline only — the main ring's shadow
   already dims the page. Drawn above the lifted flyout (z 1081). */
.bf-tour-ring-extra {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 2px #e8590c;
    pointer-events: none;
    z-index: 1082;
    transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
}