/* ===========================================
   Consolidated Shared Keyframes
   =========================================== */

@keyframes admin-chat-message-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes assistant-thinking-shimmer {
    0%, 100% {
        background-position: 200% center;
    }
    50% {
        background-position: -200% center;
    }
}

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

@keyframes attachment-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes badge-pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes context-menu-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dictation-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes emoji-picker-appear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDrop {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp10 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp4 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes filesSlideUp {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes filesPreviewCloseFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes function-call-live-dot {
    0%,
    100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 18%, transparent);
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color) 0%, transparent);
    }
}

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

@keyframes imageGenShimmer {
    0% {
        background-position: -600px 0;
    }
    100% {
        background-position: 600px 0;
    }
}

@keyframes keywordPopIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes message-appear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes message-highlight {
    0%, 100% { background: inherit; }
    25% { background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.15); }
    75% { background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.1); }
}

@keyframes modal-card-appear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes ms-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes notes-no-notes-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes notes-no-notes-shimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes notes-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes notification-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*
 * The data-control banner is centered with translateX(-50%). Its entrance
 * animation must retain that translation at every frame so the banner does not
 * appear to the right of center and snap into place when the animation ends.
 */
@keyframes dataControlStatusSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progressIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

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

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 0 8px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 0 16px rgba(34, 197, 94, 0.5); }
}

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

@keyframes pulseSoft {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.7; }
}

@keyframes realtime-call-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.72; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes skeleton-pulse {
    0% { opacity: 0.4; }
    50% { opacity: 0.7; }
    100% { opacity: 0.4; }
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes skillImportSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes skillsErrorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-presentation-GenIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
}

@keyframes slide-presentation-SkelShimmer {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.12; }
}

@keyframes slide-presentation-StepDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
}

@keyframes slide-presentation-preview-crossfade-in {
    0% {
        opacity: 0;
        filter: blur(3px);
    }
    45% {
        opacity: 0.72;
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slide-presentation-slideshow-crossfade-in {
    0% {
        opacity: 0;
        filter: blur(4px);
    }
    45% {
        opacity: 0.78;
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spinTo360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes thinking-dropdown-enter {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes thinking-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

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

@keyframes wh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}