/* ============================================
   ANIMATIONS/NUDGE.CSS - Interactive Attention-Grabbing Animations
   ============================================ */

/* Button Magnetic Field Effects - TRUE GLOW APPROACH (no rings/borders) */
@keyframes magneticPulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.5));
        transform: scale(1.02);
    }
}

@keyframes magneticLoadingSequence {
    0% {
        filter: drop-shadow(0 0 4px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.4));
        transform: scale(1);
    }
    25% {
        filter: drop-shadow(0 0 8px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.5));
        transform: scale(1.03);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.6));
        transform: scale(1.06);
    }
    75% {
        filter: drop-shadow(0 0 16px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.7));
        transform: scale(1.09);
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.8));
        transform: scale(1.12);
    }
}

/* Transition from magnetic to processing - TRUE GLOW APPROACH */
@keyframes magneticToProcessing {
    0% {
        filter: drop-shadow(0 0 20px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.8));
        transform: scale(1.12);
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.5));
        transform: scale(1.06);
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0));
        transform: scale(1);
    }
}

/* Magnetic field line effect - subtle particles */
@keyframes magneticFieldLines {
    0% {
        background-image:
            radial-gradient(circle at 20% 20%, rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.1) 1px, transparent 1px),
            radial-gradient(circle at 80% 80%, rgba(var(--magnetic-secondary-rgb, 59, 130, 246), 0.1) 1px, transparent 1px),
            radial-gradient(circle at 40% 60%, rgba(var(--magnetic-accent-rgb, 236, 72, 153), 0.1) 1px, transparent 1px);
        background-size: 60px 60px, 80px 80px, 70px 70px;
        background-position: 0 0, 0 0, 0 0;
    }
    50% {
        background-image:
            radial-gradient(circle at 20% 20%, rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.15) 1px, transparent 1px),
            radial-gradient(circle at 80% 80%, rgba(var(--magnetic-secondary-rgb, 59, 130, 246), 0.15) 1px, transparent 1px),
            radial-gradient(circle at 40% 60%, rgba(var(--magnetic-accent-rgb, 236, 72, 153), 0.15) 1px, transparent 1px);
        background-size: 60px 60px, 80px 80px, 70px 70px;
        background-position: 30px 30px, -40px -40px, 35px -35px;
    }
    100% {
        background-image:
            radial-gradient(circle at 20% 20%, rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.1) 1px, transparent 1px),
            radial-gradient(circle at 80% 80%, rgba(var(--magnetic-secondary-rgb, 59, 130, 246), 0.1) 1px, transparent 1px),
            radial-gradient(circle at 40% 60%, rgba(var(--magnetic-accent-rgb, 236, 72, 153), 0.1) 1px, transparent 1px);
        background-size: 60px 60px, 80px 80px, 70px 70px;
        background-position: 0 0, 0 0, 0 0;
    }
}

/* Energy wave effect for enhanced magnetic pulling */
@keyframes energyWave {
    0% {
        box-shadow:
            inset 0 0 0 0 rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.1),
            inset 0 0 0 0 rgba(var(--magnetic-secondary-rgb, 59, 130, 246), 0.1);
    }
    50% {
        box-shadow:
            inset 0 0 0 2px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.2),
            inset 0 0 0 4px rgba(var(--magnetic-secondary-rgb, 59, 130, 246), 0.15);
    }
    100% {
        box-shadow:
            inset 0 0 0 0 rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.1),
            inset 0 0 0 0 rgba(var(--magnetic-secondary-rgb, 59, 130, 246), 0.1);
    }
}

/* Moving colored segments around button with matching glows */
@keyframes processingBorderSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Creative pulsing wave pattern for processing states */
@keyframes processingWavePulse {
    0% {
        opacity: 0.6;
        transform: scale(0.8);
    }
    50% {
        opacity: 1.0;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.6;
        transform: scale(0.8);
    }
}

/* Subtle pulsing wave pattern for smooth processing */
@keyframes processingWavePulseSmooth {
    0% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

/* Smooth fade out from processing */
@keyframes processingBorderFadeOut {
    0% {
        box-shadow: 0 -3px 0 0 #a855f7,
                   3px -2px 0 0 #3b82f6,
                   3px 0 0 0 #ec4899,
                   3px 2px 0 0 #10b981,
                   0 3px 0 0 #f59e0b,
                   -3px 2px 0 0 #ef4444,
                   -3px 0 0 0 #a855f7,
                   -3px -2px 0 0 #3b82f6,
                   0 -8px 8px 0 rgba(168, 85, 247, 0.6),
                   8px -5px 8px 0 rgba(59, 130, 246, 0.6),
                   8px 0 8px 0 rgba(236, 72, 153, 0.6),
                   8px 5px 8px 0 rgba(16, 185, 129, 0.6),
                   0 8px 8px 0 rgba(245, 158, 11, 0.6),
                   -8px 5px 8px 0 rgba(239, 68, 68, 0.6),
                   -8px 0 8px 0 rgba(168, 85, 247, 0.6),
                   -8px -5px 8px 0 rgba(59, 130, 246, 0.6);
    }
    100% {
        box-shadow: none;
    }
}

/* Circling dots animation for processing */
@keyframes processingDotsCircle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Rotating border animation */
@keyframes rotatingBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Rainbow glowing border animation */
@keyframes processingGlowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Rainbow glowing edge effect using animated box-shadow */
@keyframes processingRainbowGlow {
    0% {
        box-shadow:
            0 0 20px #ff0000,
            0 0 30px #ff0000,
            0 0 40px #ff0000;
    }
    14.3% {
        box-shadow:
            0 0 20px #ff7300,
            0 0 30px #ff7300,
            0 0 40px #ff7300;
    }
    28.6% {
        box-shadow:
            0 0 20px #fffb00,
            0 0 30px #fffb00,
            0 0 40px #fffb00;
    }
    42.9% {
        box-shadow:
            0 0 20px #48ff00,
            0 0 30px #48ff00,
            0 0 40px #48ff00;
    }
    57.1% {
        box-shadow:
            0 0 20px #00ffd5,
            0 0 30px #00ffd5,
            0 0 40px #00ffd5;
    }
    71.4% {
        box-shadow:
            0 0 20px #002bff,
            0 0 30px #002bff,
            0 0 40px #002bff;
    }
    85.7% {
        box-shadow:
            0 0 20px #7a00ff,
            0 0 30px #7a00ff,
            0 0 40px #7a00ff;
    }
    100% {
        box-shadow:
            0 0 20px #ff00c8,
            0 0 30px #ff00c8,
            0 0 40px #ff00c8;
    }
}

/* Subtle rainbow glowing edge effect for smooth processing */
@keyframes processingRainbowGlowSubtle {
    0% {
        box-shadow:
            0 0 15px rgba(255, 0, 0, 0.6),
            0 0 25px rgba(255, 0, 0, 0.4);
    }
    14.3% {
        box-shadow:
            0 0 15px rgba(255, 115, 0, 0.6),
            0 0 25px rgba(255, 115, 0, 0.4);
    }
    28.6% {
        box-shadow:
            0 0 15px rgba(255, 251, 0, 0.6),
            0 0 25px rgba(255, 251, 0, 0.4);
    }
    42.9% {
        box-shadow:
            0 0 15px rgba(72, 255, 0, 0.6),
            0 0 25px rgba(72, 255, 0, 0.4);
    }
    57.1% {
        box-shadow:
            0 0 15px rgba(0, 255, 213, 0.6),
            0 0 25px rgba(0, 255, 213, 0.4);
    }
    71.4% {
        box-shadow:
            0 0 15px rgba(0, 43, 255, 0.6),
            0 0 25px rgba(0, 43, 255, 0.4);
    }
    85.7% {
        box-shadow:
            0 0 15px rgba(122, 0, 255, 0.6),
            0 0 25px rgba(122, 0, 255, 0.4);
    }
    100% {
        box-shadow:
            0 0 15px rgba(255, 0, 200, 0.6),
            0 0 25px rgba(255, 0, 200, 0.4);
    }
}

/* Smooth processing animation for question transitions (no glowing shadows) */
@keyframes processingBorderSpinSmooth {
    0% {
        box-shadow: 0 -3px 0 0 var(--magnetic-primary, #a855f7),
                   3px -2px 0 0 var(--magnetic-secondary, #3b82f6),
                   3px 0 0 0 var(--magnetic-accent, #ec4899),
                   3px 2px 0 0 var(--magnetic-glow, #10b981),
                   0 3px 0 0 var(--magnetic-extra, #06b6d4),
                   -3px 2px 0 0 var(--magnetic-special, #ec4899),
                   -3px 0 0 0 var(--magnetic-primary, #a855f7),
                   -3px -2px 0 0 var(--magnetic-secondary, #3b82f6);
    }
    12.5% {
        box-shadow: 3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   3px 0 0 0 var(--magnetic-glow, #10b981),
                   3px 2px 0 0 var(--magnetic-extra, #06b6d4),
                   0 3px 0 0 var(--magnetic-special, #ec4899),
                   -3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   -3px 0 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981);
    }
    25% {
        box-shadow: 3px 0 0 0 var(--magnetic-glow, #10b981),
                   3px 2px 0 0 var(--magnetic-extra, #06b6d4),
                   0 3px 0 0 var(--magnetic-special, #ec4899),
                   -3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   -3px 0 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981),
                   3px -2px 0 0 var(--magnetic-extra, #06b6d4);
    }
    37.5% {
        box-shadow: 3px 2px 0 0 var(--magnetic-extra, #06b6d4),
                   0 3px 0 0 var(--magnetic-special, #ec4899),
                   -3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   -3px 0 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981),
                   3px -2px 0 0 var(--magnetic-extra, #06b6d4),
                   3px 0 0 0 var(--magnetic-special, #ec4899);
    }
    50% {
        box-shadow: 0 3px 0 0 var(--magnetic-special, #ec4899),
                   -3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   -3px 0 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981),
                   3px -2px 0 0 var(--magnetic-extra, #06b6d4),
                   3px 0 0 0 var(--magnetic-special, #ec4899),
                   3px 2px 0 0 var(--magnetic-primary, #a855f7);
    }
    62.5% {
        box-shadow: -3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   -3px 0 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981),
                   3px -2px 0 0 var(--magnetic-extra, #06b6d4),
                   3px 0 0 0 var(--magnetic-special, #ec4899),
                   3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   0 3px 0 0 var(--magnetic-secondary, #3b82f6);
    }
    75% {
        box-shadow: -3px 0 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981),
                   3px -2px 0 0 var(--magnetic-extra, #06b6d4),
                   3px 0 0 0 var(--magnetic-special, #ec4899),
                   3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   0 3px 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px 2px 0 0 var(--magnetic-accent, #ec4899);
    }
    87.5% {
        box-shadow: -3px -2px 0 0 var(--magnetic-accent, #ec4899),
                   0 -3px 0 0 var(--magnetic-glow, #10b981),
                   3px -2px 0 0 var(--magnetic-extra, #06b6d4),
                   3px 0 0 0 var(--magnetic-special, #ec4899),
                   3px 2px 0 0 var(--magnetic-primary, #a855f7),
                   0 3px 0 0 var(--magnetic-secondary, #3b82f6),
                   -3px 2px 0 0 var(--magnetic-accent, #ec4899),
                   -3px 0 0 0 var(--magnetic-glow, #10b981);
    }
    100% {
        box-shadow: 0 -3px 0 0 var(--magnetic-primary, #a855f7),
                   3px -2px 0 0 var(--magnetic-secondary, #3b82f6),
                   3px 0 0 0 var(--magnetic-accent, #ec4899),
                   3px 2px 0 0 var(--magnetic-glow, #10b981),
                   0 3px 0 0 var(--magnetic-extra, #06b6d4),
                   -3px 2px 0 0 var(--magnetic-special, #ec4899),
                   -3px 0 0 0 var(--magnetic-primary, #a855f7),
                   -3px -2px 0 0 var(--magnetic-secondary, #3b82f6);
    }
}

/* Processing glow flow animation */
@keyframes processingGlowFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ============================================
   NUDGE ANIMATION CLASSES - SELF-CONTAINED
   ============================================ */

/* Nudge Absorb Animation - Self-contained with all magnetic + processing effects */
.nudge-absorb {
    /* This class enables the complete magnetic + processing animation sequence */
    /* No need for animation-1 class - everything is self-contained here */
}

/* Allow clicks on button during entire absorb animation sequence */
#aiButton.nudge-absorb {
    /* Button should always be clickable to show panel */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Button State Classes - Applied when button has both nudge-absorb and magnetic state classes */
#aiButton.nudge-absorb.magnetic-gentle {
    /* Use transforms and filters instead of replacing animation */
    transform: scale(1.02);
    filter: drop-shadow(0 0 8px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.5));
    border: none !important;
    outline: none !important;
    /* Allow clicks during magnetic animation - button should always be clickable */
    pointer-events: auto !important;
    cursor: pointer !important;
}

#aiButton.nudge-absorb.magnetic-pulling {
    /* Use zoom effect with transform scale */
    transform: scale(1.15);
    filter: drop-shadow(0 0 25px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.9));
    border: none !important;
    outline: none !important;
    /* Smooth transition using same approach as processing animation */
    transition: transform 0.3s ease-out, filter 0.3s ease-out, box-shadow 0.3s ease-out !important;
    /* Allow clicks during magnetic animation */
    pointer-events: auto !important;
    cursor: pointer !important;
}

#aiButton.nudge-absorb.magnetic-to-processing {
    /* Use transforms and filters instead of replacing animation */
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(var(--magnetic-primary-rgb, 168, 85, 247), 0.5));
    border: none !important;
    outline: none !important;
    /* Allow clicks during magnetic animation - button should always be clickable */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Rotating border processing animation */
#aiButton.nudge-absorb.processing {
    /* Keep the gradient animation flowing - don't interfere with it */
    transform: scale(1);
    /* filter: none; - Removed to allow glow effects */
    /* Remove border to preserve rounded corners */
    border: none !important;
    outline: none !important;
    /* Allow clicks during processing - button should always be clickable */
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Smooth transition for processing state */
    transition: transform 0.3s ease-out, filter 0.3s ease-out, box-shadow 0.3s ease-out;
    /* Position relative for pseudo-element positioning */
    position: relative;
    /* Keep the original gradient animation running */
    animation: var(--current-gradient-animation, lava-lamp) 12s ease-in-out infinite;
}

/* Rotating border effect using border and box-shadow */
#aiButton.nudge-absorb.processing::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px solid transparent;
    border-top: 2px solid #00d4ff;
    border-right: 2px solid #ff6b6b;
    border-radius: inherit;
    z-index: -1;
    animation: rotatingBorder 2s linear infinite;
}

/* No masking needed with border approach */
#aiButton.nudge-absorb.processing::after {
    display: none;
}

/* Animated horizontal gradient glow for processing-smooth */
#aiButton.nudge-absorb.processing-smooth {
    /* Force normal size, override any magnetic expansion */
    transform: scale(1) !important;
    /* Remove border to preserve rounded corners */
    border: none !important;
    outline: none !important;
    /* Allow clicks during processing - button should always be clickable */
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Smooth transition for processing state */
    transition: transform 0.3s ease-out, background 0.3s ease-out;
    /* Position relative for layering */
    position: relative;
    /* Keep theme background but allow box-shadow animation on top */
    /* JavaScript will handle the color animation via box-shadow */
    /* Allow JavaScript to set box-shadow for glow effect */
}

/* Removed conflicting transition override - smooth transitions are now handled properly */

/* Animated horizontal gradient glow using pseudo-element for processing-smooth */
#aiButton.nudge-absorb.processing-smooth::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(90deg,
        #ff6400,    /* Red-orange */
        #ffc800,    /* Yellow */
        #64ff00,    /* Lime green */
        #00ffff,    /* Cyan */
        #0096ff,    /* Blue */
        #ff6400     /* Red-orange (repeat for seamless loop) */
    );
    background-size: 300% 100%;
    border-radius: inherit;
    z-index: -1;
    animation: processingGlowFlow 2s linear infinite;
    opacity: 0.8;
}

/* No masking needed with border approach for processing-smooth */
#aiButton.nudge-absorb.processing-smooth::after {
    display: none;
}

#aiButton.nudge-absorb.processing-fadeout {
    /* Use transforms and filters instead of replacing animation */
    transform: scale(1);
    /* filter: none; - Removed to allow glow effects */
    box-shadow: none; /* Reset to allow animation to work */
    /* Allow clicks during processing fadeout - button should always be clickable */
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Smooth transition for processing-fadeout state */
    transition: transform 0.3s ease-out, filter 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Force processing-smooth to override any magnetic expansion classes */
#aiButton.nudge-absorb.processing-smooth {
    /* Override any magnetic expansion with !important */
    transform: scale(1) !important;
    filter: none !important;
}

/* Processing animation - theme-specific overrides with higher specificity */
#aiButton.nudge-absorb.theme-purple.processing-smooth,
#aiButton.nudge-absorb.theme-green.processing-smooth,
#aiButton.nudge-absorb.theme-blue.processing-smooth,
#aiButton.nudge-absorb.theme-red.processing-smooth {
    /* Keep theme background but allow box-shadow animation on top */
    /* JavaScript will handle the color animation via box-shadow */
}

/* Smooth processing animation for question transitions (no glowing shadows) */
/* Box-shadow glow effect for processing-smooth state */
#aiButton.nudge-absorb.processing-smooth {
    /* Force normal size, override any magnetic expansion */
    transform: scale(1) !important;
    /* Remove border to preserve rounded corners */
    border: none !important;
    outline: none !important;
    /* Allow clicks during processing - button should always be clickable */
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Smooth transition for processing state */
    transition: transform 0.3s ease-out, background 0.3s ease-out;
    /* Position relative for layering */
    position: relative;
    /* Keep theme background but allow box-shadow animation on top */
    /* JavaScript will handle the color animation via box-shadow */
}

/* No pseudo-elements needed with box-shadow approach */
#aiButton.nudge-absorb.processing-smooth::before,
#aiButton.nudge-absorb.processing-smooth::after {
    display: none;
}

/* Nudge Bounce Animation - Placeholder for future implementation */
.nudge-bounce {
    /* Future implementation for bounce animation */
    /* Placeholder for future nudge animation option */
}

/* Document wiggle animation for absorb effect */
@keyframes documentWiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
    75% {
        transform: rotate(-2deg);
    }
}

/* Floating wiggle animation for document icons */
.document-icon.wiggle {
    animation: documentWiggle 1.5s ease-in-out infinite;
}

/* ============================================
   QUESTION DISPLAY STYLES
   ============================================ */

#questionDisplay.show {
    opacity: 1;
    transform: translateY(-10px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

#questionDisplay.permanent {
    opacity: 1;
    transform: translateY(-10px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Base state for question display */
#questionDisplay {
    opacity: 0;
    transform: translateY(0px);
    transition: opacity 0.7s ease-in, transform 0.7s ease-in;
}

/* ============================================
   MODAL AND UI STYLES
   ============================================ */

/* Modal Styles */
#animationModal.show {
    display: block !important;
}

/* Active animation choice styling */
.animation-choice.active {
    background-color: #e5e7eb;
    border-left: 3px solid #3b82f6;
}

/* New Widget Animation System Classes */

/* Custom gradient active class - used for identification only */
/* The actual background is set via JavaScript inline styles */
.custom-gradient-active {
    /* This class is used to identify custom gradients for animation selection */
}

/* Typing animation styles for notifications */
#notificationText {
    position: relative;
    transition: all 0.1s ease-out;
}

#notificationText.typing::after {
    content: '|';
    animation: blink 1s infinite;
    color: currentColor;
    font-weight: bold;
    margin-left: 1px;
    opacity: 1;
}

/* Smooth text transitions for typing effects */
#notificationText {
    min-height: 1.2em;
    display: inline-block;
}

#notificationText.typing {
    position: relative;
}

/* Clear button styling */
#clearQueryBtn {
    transition: all 0.2s ease-in-out;
}

#clearQueryBtn:hover {
    background-color: #d1d5db;
}