/* ============================================================ CODSHIPX AI CRM R31-R8-R6 ORIGINAL UI 100% PRESERVED ONLY: 1. Ask Codi background -> white 2. AI Center text -> animated multicolor 3. AI Center icon -> animated color 4. Ask Codi text -> animated multicolor 5. Ask Codi icon -> animated color NO width NO height NO padding NO margin NO font-size NO letter-spacing NO border-radius ============================================================ */ @keyframes cxAiGradientMove { 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } @keyframes cxAiVisibleHue { 0%{ filter: hue-rotate(0deg) saturate(1.6) brightness(1.05); } 25%{ filter: hue-rotate(90deg) saturate(1.8) brightness(1.08); } 50%{ filter: hue-rotate(180deg) saturate(1.8) brightness(1.1); } 75%{ filter: hue-rotate(270deg) saturate(1.8) brightness(1.08); } 100%{ filter: hue-rotate(360deg) saturate(1.6) brightness(1.05); } } /* ============================================================ SHARED TEXT One normal text run; no letter spacing modification. ============================================================ */ .cx-ai-gradient-text{ display: inline-block !important; background-image: linear-gradient( 90deg, #8fe63d 0%, #25d7d0 18%, #3b9cff 38%, #6675ff 56%, #a55fff 72%, #ef65bd 88%, #8fe63d 100% ) !important; background-size: 260% 100% !important; background-repeat: repeat-x !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: cxAiGradientMove 3.4s linear infinite !important; } /* ============================================================ AI CENTER TEXT Geometry intentionally untouched. ============================================================ */ .rail-nav > button[data-nav="AI Center"] .nav-label{ background-image: linear-gradient( 90deg, #8fe63d, #25d7d0, #3b9cff, #6675ff, #a55fff, #ef65bd, #8fe63d ) !important; background-size: 260% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: cxAiGradientMove 3.4s linear infinite !important; } /* ============================================================ AI CENTER ICON Target BOTH: - icon container (covers CSS-background semantic icons) - svg (covers normal AppIcon) Geometry/background definitions are not changed. ============================================================ */ .rail-nav > button[data-nav="AI Center"] .nav-icon{ animation: cxAiVisibleHue 3.2s linear infinite !important; will-change: filter !important; } .rail-nav > button[data-nav="AI Center"] .nav-icon svg{ animation: cxAiVisibleHue 3.2s linear infinite !important; will-change: filter !important; } /* Avoid applying filter twice when SVG exists. SVG receives reverse-neutral shell by keeping its own animation; visible color change remains guaranteed. */ /* ============================================================ ASK CODI BACKGROUND ONLY requested visual structural change. ============================================================ */ button.codi-mini, button.cxr30-top-ask-codi{ background: #ffffff !important; background-image: none !important; } /* remove previous experimental green pseudo layers only */ button.codi-mini::before, button.codi-mini::after, button.cxr30-top-ask-codi::before, button.cxr30-top-ask-codi::after{ content: none !important; display: none !important; } /* ============================================================ ASK CODI TEXT Geometry/font inherited exactly from button. ============================================================ */ button.codi-mini > .cx-ai-live-label, button.cxr30-top-ask-codi > .cx-ai-live-label{ display: inline-block !important; font: inherit !important; background-image: linear-gradient( 90deg, #8fe63d, #25d7d0, #3b9cff, #6675ff, #a55fff, #ef65bd, #8fe63d ) !important; background-size: 260% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: cxAiGradientMove 3.4s linear infinite !important; } /* ============================================================ ASK CODI ICON ============================================================ */ button.codi-mini > svg, button.cxr30-top-ask-codi > svg, button.codi-mini > span:not(.cx-ai-live-label) svg, button.cxr30-top-ask-codi > span:not(.cx-ai-live-label) svg{ animation: cxAiVisibleHue 3s linear infinite !important; will-change: filter !important; } /* CODSHIPX_AI_CRM_R31_R8_R6_EXACT_ORIGINAL_UI_END */ /* ============================================================ CODSHIPX AI CRM R31-R9-R1 ASK CODI WHITE SINGLE AUTHORITY Exact current DOM: .app-main .topbar .topbar-right button.codi-mini High specificity intentionally defeats historical R30 .topbar/.topbar-right Ask Codi rules. NO geometry properties. ============================================================ */ html body .app-main .topbar .topbar-right > button.codi-mini, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi, html body .app-main .topbar .topbar-right > button.codi-mini.cxr30-top-ask-codi, html body .app-main .topbar .topbar-right > button.codi-mini:hover, html body .app-main .topbar .topbar-right > button.codi-mini:focus, html body .app-main .topbar .topbar-right > button.codi-mini:focus-visible, html body .app-main .topbar .topbar-right > button.codi-mini:active, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi:hover, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi:focus, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi:focus-visible, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi:active{ background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border-color: #dbe4ee !important; box-shadow: 0 8px 18px rgba(15,23,42,.055) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* No historical green pseudo tint */ html body .app-main .topbar .topbar-right > button.codi-mini::before, html body .app-main .topbar .topbar-right > button.codi-mini::after, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi::before, html body .app-main .topbar .topbar-right > button.cxr30-top-ask-codi::after{ content: none !important; display: none !important; background: none !important; background-image: none !important; box-shadow: none !important; } /* Deliberately DO NOT touch: width / height / padding / margin / radius / font size / gap / position. AI text + icon animation above remains authoritative. */ /* CODSHIPX_AI_CRM_R31_R9_R1_ASK_CODI_WHITE_AUTHORITY_END */