feedBack/static/tour-engine.css

/* ── Consolidated tour menu — one floating button + popover for all tours ── */
/* Palette aligned with the app's dark theme: #4080e0 accent, #e8c040 gold,
   #181830 dark background, #cbd5e1 / #94a3b8 / #64748b text scale. Per
   CLAUDE.md → Frontend Conventions. */

.slopsmith-tour-menu-btn {
    position: fixed;
    bottom: 12px;
    right: 12px;
    /* #player is z-index:100 and fixed inset:0; the menu must sit above
       it (and above the controls bar at z:10 inside #player), but below
       transient modals like Shepherd tooltips. */
    z-index: 200;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #181830;
    border: 1.5px solid #4080e0;
    color: #cbd5e1;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 6px #4080e066;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, transform 0.15s;
}
.slopsmith-tour-menu-btn:hover {
    box-shadow: 0 0 12px #4080e0aa;
    transform: translateY(-1px);
}
.slopsmith-tour-menu-btn.has-unseen {
    animation: tour-pulse 2s ease-in-out infinite;
}
.slopsmith-tour-menu-btn.has-unseen::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #e8c040;
    border: 2px solid #181830;
    border-radius: 50%;
}
@keyframes tour-pulse {
    0%, 100% { box-shadow: 0 0 6px #4080e066; }
    50% { box-shadow: 0 0 16px #4080e0cc; }
}

.slopsmith-tour-menu-popover {
    position: fixed;
    bottom: 56px;
    right: 12px;
    z-index: 201;
    min-width: 220px;
    max-width: 320px;
    /* Keep the list scrollable when many tour-enabled plugins are
       relevant — without this the popover would grow past the
       viewport top as the plugin ecosystem expands. 80px reserves
       room for the trigger button + its bottom inset. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #181830;
    border: 1px solid #4080e044;
    border-radius: 8px;
    padding: 6px;
    font-size: 13px;
    color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.slopsmith-tour-menu-popover .tour-menu-header {
    padding: 4px 10px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    border-bottom: 1px solid #1e1e3a;
    margin-bottom: 4px;
}
.slopsmith-tour-menu-popover .tour-menu-empty {
    padding: 10px;
    color: #64748b;
    font-style: italic;
    text-align: center;
}
.slopsmith-tour-menu-popover .tour-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.slopsmith-tour-menu-popover .tour-menu-item:hover {
    background: #1a1a30;
    color: #fff;
}
/* Keyboard focus gets an explicit ring instead of relying on the hover
   background — matches the :focus-visible treatment elsewhere in the
   app (style.css). Pointer focus is left alone. */
.slopsmith-tour-menu-popover .tour-menu-item:focus-visible {
    background: #1a1a30;
    color: #fff;
    outline: 2px solid #4080e0;
    outline-offset: -2px;
}
.slopsmith-tour-menu-popover .tour-menu-item-label {
    flex: 1;
}
.slopsmith-tour-menu-popover .tour-menu-item-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 14px;
    text-align: center;
}
.slopsmith-tour-menu-popover .tour-menu-item-status.is-new {
    background: #e8c040;
    color: #181830;
}
.slopsmith-tour-menu-popover .tour-menu-item-status.is-seen {
    background: #1e1e3a;
    color: #64748b;
}

/* ── First-visit toast — anchored above the menu button ── */

.slopsmith-tour-prompt {
    position: fixed;
    bottom: 56px;
    right: 12px;
    z-index: 202;
    background: #181830;
    border: 1px solid #4080e044;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #cbd5e1;
    max-width: 240px;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: opacity 0.5s;
}
.slopsmith-tour-prompt.fading {
    opacity: 0;
    pointer-events: none;
}
.slopsmith-tour-prompt .tour-prompt-more {
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
}
.slopsmith-tour-prompt .tour-prompt-buttons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.slopsmith-tour-prompt button {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}
.slopsmith-tour-prompt button:hover {
    opacity: 0.85;
}
.slopsmith-tour-prompt button[data-action="start"] {
    background: #4080e0;
    color: #fff;
    font-weight: 600;
}
.slopsmith-tour-prompt button[data-action="dismiss"] {
    background: #1e1e3a;
    color: #94a3b8;
}