/* ── Ai Chat tab spark ───────────────────────────────────────────────────────
   Draws attention to the "Ai Chat" tab in the top nav so users notice the old
   AI section was replaced by the Inline widget. The sparkle element is created
   by spark.js; nothing here applies until the .inline-sparking class is on. */

#pills-ai-chat-tab {
    position: relative;
    overflow: visible;
}

#pills-ai-chat-tab .inline-spark {
    position: absolute;
    top: -7px;
    right: -11px;
    width: 13px;
    height: 13px;
    color: #008FE9;
    opacity: 0;
    transform: scale(.4) rotate(-25deg);
    pointer-events: none;
}

#pills-ai-chat-tab.inline-sparking {
    color: #008FE9;
    animation: inlineSparkGlow 1.2s ease-in-out 2;
}

#pills-ai-chat-tab.inline-sparking .inline-spark {
    animation: inlineSparkTwinkle 1.2s ease-in-out 2;
}

@keyframes inlineSparkGlow {
    0%, 100% { text-shadow: none;                          border-bottom-color: transparent; }
    45%      { text-shadow: 0 0 12px rgba(0,143,233,.75);  border-bottom-color: rgba(0,143,233,.6); }
}

@keyframes inlineSparkTwinkle {
    0%, 100% { opacity: 0;  transform: scale(.4) rotate(-25deg); }
    40%      { opacity: 1;  transform: scale(1.15) rotate(10deg); }
    70%      { opacity: .5; transform: scale(.9) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    #pills-ai-chat-tab.inline-sparking,
    #pills-ai-chat-tab.inline-sparking .inline-spark { animation: none; }
}