/* Fanxing shared modal motion: one interaction language for every popup. */
@keyframes fxModalEnter {
    from { opacity: 0; transform: translateY(14px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fxModalGlow {
    0%, 100% { box-shadow: 0 28px 90px rgba(0, 0, 0, .48), 0 0 0 rgba(34, 211, 238, 0); }
    50% { box-shadow: 0 30px 96px rgba(0, 0, 0, .52), 0 0 28px rgba(34, 211, 238, .08); }
}

@keyframes fxClosePulse {
    from { box-shadow: 0 0 0 0 rgba(248, 113, 113, .24); }
    to { box-shadow: 0 0 0 5px rgba(248, 113, 113, 0); }
}

body.chat-shell .modal-overlay,
body.chat-shell .ms-feedback-overlay,
body.chat-shell .chat-recharge-overlay {
    transition: opacity .28s ease, visibility .28s ease, background-color .28s ease;
}

/* Legacy display:none/flex modals animate their panel when opened. */
body.chat-shell .modal[style*="display: flex"] .modal-content {
    animation: fxModalEnter .34s cubic-bezier(.16, 1, .3, 1) both, fxModalGlow 4.8s ease-in-out .35s infinite;
}

body.chat-shell .modal[style*="display: flex"] .modal-overlay {
    animation: fxOverlayIn .28s ease both;
}

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

/* Small popups and forms use the announcement rhythm without changing layout. */
body.chat-shell .ms-modal-overlay.active .ms-contact-modal,
body.chat-shell .ms-feedback-overlay.active .ms-feedback-modal,
body.chat-shell .chat-recharge-overlay.active .chat-recharge-modal {
    animation: fxModalEnter .34s cubic-bezier(.16, 1, .3, 1) both, fxModalGlow 4.8s ease-in-out .35s infinite;
}

body.chat-shell .action-popover[style*="display: block"] {
    transform-origin: top right;
    animation: fxPopoverEnter .24s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes fxPopoverEnter {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Right-side workbench panels use the same entrance language as the notice. */
body.chat-shell .history-drawer.open,
body.chat-shell .history-panel[style*="display: block"],
body.chat-shell .image-options-popup[style*="display: block"],
body.chat-shell .route-strategy-popup[style*="display: block"],
body.chat-shell .thinking-level-menu[style*="display: block"],
body.chat-shell .action-popover[style*="display: block"] {
    animation: fxPopoverEnter .28s cubic-bezier(.16, 1, .3, 1) both;
}

body.chat-shell .history-drawer.open,
body.chat-shell .history-panel[style*="display: block"] {
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48), 0 0 26px rgba(34, 211, 238, .06);
}

/* Image/video lightboxes and legacy panels are display-toggled by the app. */
body.chat-shell .image-lightbox[style*="display: flex"] .lightbox-content,
body.chat-shell .video-lightbox[style*="display: flex"] .lightbox-content,
body.chat-shell .role-manager-modal[style*="display: flex"] .role-manager-panel,
body.chat-shell .asset-selector-modal[style*="display: flex"] .asset-selector-panel,
body.chat-shell .asset-editor-modal[style*="display: flex"] .asset-editor-panel,
body.chat-shell .modal[style*="display: flex"] .modal-content {
    animation: fxModalEnter .34s cubic-bezier(.16, 1, .3, 1) both, fxModalGlow 4.8s ease-in-out .35s infinite;
}

body.chat-shell .image-lightbox[style*="display: flex"],
body.chat-shell .video-lightbox[style*="display: flex"],
body.chat-shell .role-manager-modal[style*="display: flex"],
body.chat-shell .asset-selector-modal[style*="display: flex"],
body.chat-shell .asset-editor-modal[style*="display: flex"] {
    animation: fxOverlayIn .28s ease both;
}

/* Compact floating controls should feel like part of the same system too. */
body.chat-shell .tts-player[style*="display: block"],
body.chat-shell .video-media-hover-preview.is-visible {
    animation: fxPopoverEnter .24s cubic-bezier(.16, 1, .3, 1) both;
}

/*
 * Modal choreography
 *
 * The announcement modal is the visual anchor of the chat shell. Other
 * dialogs share its glass/halo language, but each one gets a different
 * entrance rhythm so the UI does not feel cloned.
 */
@keyframes fxNoticeEnter {
    from { opacity: 0; transform: translateY(28px) scale(.94) perspective(1000px) rotateX(8deg); }
    to { opacity: 1; transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg); }
}

@keyframes fxContactEnter {
    from { opacity: 0; transform: translateY(18px) scale(.92) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes fxFeedbackEnter {
    from { opacity: 0; transform: translateX(22px) translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@keyframes fxConfirmEnter {
    0% { opacity: 0; transform: translateY(10px) scale(.86); }
    65% { opacity: 1; transform: translateY(-3px) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fxRechargeEnter {
    from { opacity: 0; transform: translateY(24px) scale(.96); clip-path: inset(8% 0 0 round 20px); }
    to { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 round 20px); }
}

@keyframes fxCheckinEnter {
    from { opacity: 0; transform: translateY(18px) scale(.965); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fxSettingsEnter {
    from { opacity: 0; transform: translateY(34px) scale(.965) rotateX(3deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

@keyframes fxLightboxEnter {
    from { opacity: 0; transform: scale(.9) rotate(-1deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes fxModalAccent {
    0%, 100% { box-shadow: 0 28px 90px rgba(0, 0, 0, .46), 0 0 0 rgba(34, 211, 238, 0); }
    50% { box-shadow: 0 30px 96px rgba(0, 0, 0, .5), 0 0 30px rgba(34, 211, 238, .1); }
}

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

@keyframes fxAmbientSweep {
    0%, 24% { opacity: 0; transform: translate3d(-190%, 0, 0) rotate(14deg); }
    34% { opacity: .7; }
    62%, 100% { opacity: 0; transform: translate3d(360%, 0, 0) rotate(14deg); }
}

@keyframes fxFeedbackScan {
    0%, 18% { opacity: 0; transform: translateY(-30px); }
    30% { opacity: .52; }
    76%, 100% { opacity: 0; transform: translateY(430px); }
}

@keyframes fxAuroraDrift {
    0%, 100% { background-position: 0% 35%, 100% 65%; opacity: .42; }
    50% { background-position: 100% 65%, 0% 35%; opacity: .72; }
}

@keyframes fxButtonShimmer {
    0%, 100% { background-position: 0% 50%; filter: brightness(1); }
    50% { background-position: 100% 50%; filter: brightness(1.1); }
}

@keyframes fxContactAvatarFloat {
    0%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 0, 0, .2), 0 0 0 0 rgba(34, 211, 238, 0); }
    50% { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 0 6px rgba(34, 211, 238, .07); }
}

@keyframes fxQrBreathe {
    0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 rgba(129, 102, 255, 0); }
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .34), 0 0 24px rgba(129, 102, 255, .18); }
}

@keyframes fxWarningPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 71, 87, 0)); transform: scale(1); }
    45% { filter: drop-shadow(0 0 10px rgba(255, 71, 87, .46)); transform: scale(1.07); }
}

@keyframes fxRechargeIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 6px 10px rgba(34, 211, 238, .12)); }
    50% { transform: translateY(-4px) rotate(2deg); filter: drop-shadow(0 9px 16px rgba(34, 211, 238, .34)); }
}

@keyframes fxTodayGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 216, 255, .14); transform: translateY(0); }
    50% { box-shadow: 0 0 22px rgba(0, 216, 255, .34); transform: translateY(-2px); }
}

@keyframes fxSettingsRibbon {
    0%, 100% { transform: translate3d(-22%, -20%, 0) scale(.9); opacity: .3; }
    50% { transform: translate3d(30%, 4%, 0) scale(1.16); opacity: .62; }
}

/* Announcement: keep the signature perspective + nebula feel, just smooth
 * the first frame so it lands with the same glass language as the other dialogs. */
body.chat-shell #noticeModalOverlay.active #noticeModal {
    animation: fxNoticeEnter .48s cubic-bezier(.16, 1, .3, 1) both,
        modalNebulaBreathe 4s ease-in-out .48s infinite alternate;
}

/* Contact: a soft tilt-in, then reveal the identity and QR content in steps. */
body.chat-shell #contactModalOverlay.active .ms-contact-modal {
    animation: fxContactEnter .42s cubic-bezier(.16, 1, .3, 1) both,
        fxModalAccent 5.6s ease-in-out .42s infinite;
}

body.chat-shell #contactModalOverlay.active .ms-contact-profile,
body.chat-shell #contactModalOverlay.active .ms-contact-qr-section,
body.chat-shell #contactModalOverlay.active .contact-card {
    animation: fxContentRise .34s cubic-bezier(.16, 1, .3, 1) both;
}
body.chat-shell #contactModalOverlay.active .ms-contact-profile { animation-delay: .1s; }
body.chat-shell #contactModalOverlay.active .ms-contact-qr-section { animation-delay: .17s; }
body.chat-shell #contactModalOverlay.active .contact-card:nth-child(1) { animation-delay: .24s; }
body.chat-shell #contactModalOverlay.active .contact-card:nth-child(2) { animation-delay: .3s; }

/* Feedback: slightly lateral, like a focused workspace drawer rather than a
 * celebratory announcement. Form rows cascade only on opening. */
body.chat-shell #feedbackOverlay.active .ms-feedback-modal {
    animation: fxFeedbackEnter .36s cubic-bezier(.16, 1, .3, 1) both;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .48), 0 0 32px rgba(129, 102, 255, .09);
}
body.chat-shell #feedbackOverlay.active .form-group,
body.chat-shell #feedbackOverlay.active .feedback-submit-btn {
    animation: fxContentRise .28s cubic-bezier(.16, 1, .3, 1) both;
}
body.chat-shell #feedbackOverlay.active .form-group:nth-child(1) { animation-delay: .08s; }
body.chat-shell #feedbackOverlay.active .form-group:nth-child(2) { animation-delay: .14s; }
body.chat-shell #feedbackOverlay.active .form-group:nth-child(3) { animation-delay: .2s; }
body.chat-shell #feedbackOverlay.active .feedback-submit-btn { animation-delay: .26s; }

/* Confirm: compact, tactile, with a small rebound instead of the notice's 3D
 * perspective. */
body.chat-shell #confirmModal.active .ms-modal {
    animation: fxConfirmEnter .34s cubic-bezier(.16, 1, .3, 1) both;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .5), 0 0 24px rgba(248, 113, 113, .07);
}
body.chat-shell #confirmModal.active #confirmIcon {
    animation: fxContentRise .24s ease-out .1s both,
        fxWarningPulse 2.25s ease-in-out .36s infinite;
}
body.chat-shell #confirmModal.active #confirmMessage,
body.chat-shell #confirmModal.active #confirmCancelBtn,
body.chat-shell #confirmModal.active #confirmOkBtn {
    animation: fxContentRise .24s ease-out .16s both;
}

/* Recharge: a vertical reveal matches the wallet flow and makes the card
 * redemption hero arrive before the action buttons. */
body.chat-shell .chat-recharge-overlay.active .chat-recharge-modal {
    animation: fxRechargeEnter .4s cubic-bezier(.16, 1, .3, 1) both,
        fxModalAccent 5.2s ease-in-out .4s infinite;
}
body.chat-shell .chat-recharge-overlay.active .card-redeem-hero,
body.chat-shell .chat-recharge-overlay.active .card-redeem-store-link,
body.chat-shell .chat-recharge-overlay.active .card-redeem-field,
body.chat-shell .chat-recharge-overlay.active .chat-recharge-footer {
    animation: fxContentRise .28s cubic-bezier(.16, 1, .3, 1) both;
}
body.chat-shell .chat-recharge-overlay.active .card-redeem-hero { animation-delay: .1s; }
body.chat-shell .chat-recharge-overlay.active .card-redeem-store-link { animation-delay: .16s; }
body.chat-shell .chat-recharge-overlay.active .card-redeem-field { animation-delay: .22s; }
body.chat-shell .chat-recharge-overlay.active .chat-recharge-footer { animation-delay: .28s; }

/* Check-in: calm upward reveal with a sequential calendar/task rhythm. */
body.chat-shell .checkin-overlay.active .checkin-modal {
    animation: fxCheckinEnter .4s cubic-bezier(.16, 1, .3, 1) both,
        fxModalAccent 5.8s ease-in-out .4s infinite;
}
body.chat-shell .checkin-overlay.active .checkin-stats-bar,
body.chat-shell .checkin-overlay.active .checkin-calendar,
body.chat-shell .checkin-overlay.active .checkin-action,
body.chat-shell .checkin-overlay.active .checkin-task-group {
    animation: fxContentRise .3s cubic-bezier(.16, 1, .3, 1) both;
}
body.chat-shell .checkin-overlay.active .checkin-stats-bar { animation-delay: .09s; }
body.chat-shell .checkin-overlay.active .checkin-calendar { animation-delay: .15s; }
body.chat-shell .checkin-overlay.active .checkin-action { animation-delay: .21s; }
body.chat-shell .checkin-overlay.active .checkin-task-group { animation-delay: .27s; }

/* Settings and editors are work surfaces: slower lift, no breathing halo. */
body.chat-shell .modal[style*="display: flex"] .settings-modal-content,
body.chat-shell .modal[style*="display: flex"] .ultra-premium-modal,
body.chat-shell .modal[style*="display: flex"] .extend-video-content,
body.chat-shell .role-manager-modal[style*="display: flex"] .role-manager-panel,
body.chat-shell .asset-selector-modal[style*="display: flex"] .asset-selector-panel,
body.chat-shell .asset-editor-modal[style*="display: flex"] .asset-editor-panel {
    animation: fxSettingsEnter .4s cubic-bezier(.16, 1, .3, 1) both;
}

/* Lightboxes are content-first: quick zoom, then let the image/video settle. */
body.chat-shell .image-lightbox[style*="display: flex"] .lightbox-content,
body.chat-shell .video-lightbox[style*="display: flex"] .lightbox-content {
    animation: fxLightboxEnter .3s cubic-bezier(.16, 1, .3, 1) both;
}

/* Persistent motion after the entrance has finished. These are deliberately
 * different from the announcement's bell/metal-shine animation. */
body.chat-shell #contactModal,
body.chat-shell #feedbackDrawer,
body.chat-shell .chat-recharge-modal,
body.chat-shell .checkin-modal,
body.chat-shell #confirmModal .ms-modal,
body.chat-shell .settings-modal-content,
body.chat-shell .ultra-premium-modal,
body.chat-shell .extend-video-content {
    position: relative;
    isolation: isolate;
}

body.chat-shell #contactModal > *,
body.chat-shell #feedbackDrawer > *,
body.chat-shell .chat-recharge-modal > *,
body.chat-shell .checkin-modal > *,
body.chat-shell #confirmModal .ms-modal > *,
body.chat-shell .settings-modal-content > *,
body.chat-shell .ultra-premium-modal > *,
body.chat-shell .extend-video-content > * {
    position: relative;
    z-index: 1;
}

/* Customer service: a diagonal aurora reflection plus gently floating identity. */
body.chat-shell #contactModal::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -28%;
    left: -30%;
    width: 26%;
    height: 160%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .08), rgba(129, 140, 248, .18), transparent);
    filter: blur(3px);
    opacity: 0;
    animation: fxAmbientSweep 5.8s cubic-bezier(.4, 0, .2, 1) .7s infinite;
}
body.chat-shell #contactModalOverlay.active .contact-avatar {
    animation: fxContactAvatarFloat 3.6s ease-in-out .45s infinite;
}
body.chat-shell #contactModalOverlay.active .ms-contact-qr-wrapper {
    animation: fxQrBreathe 4.2s ease-in-out .65s infinite;
}

/* Feedback: a quiet violet aurora with one scanning line moving through the form. */
body.chat-shell #feedbackDrawer::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -35% -20% 42%;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 50%, rgba(124, 92, 255, .22), transparent 42%),
        radial-gradient(circle at 84% 35%, rgba(34, 211, 238, .12), transparent 38%);
    background-size: 145% 145%, 135% 135%;
    animation: fxAuroraDrift 7s ease-in-out infinite;
}
body.chat-shell #feedbackDrawer::after {
    content: '';
    position: absolute;
    z-index: 2;
    left: 7%;
    right: 7%;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(139, 116, 255, .58), rgba(34, 211, 238, .42), transparent);
    box-shadow: 0 0 14px rgba(139, 116, 255, .28);
    opacity: 0;
    animation: fxFeedbackScan 5.4s ease-in-out 1s infinite;
}
body.chat-shell #feedbackOverlay.active .feedback-submit-btn {
    background-size: 180% 100%;
    animation: fxContentRise .28s cubic-bezier(.16, 1, .3, 1) .26s both,
        fxButtonShimmer 4.8s ease-in-out .54s infinite;
}

/* Recharge: cyan/indigo energy drifts behind the card while the card icon floats. */
body.chat-shell .chat-recharge-modal::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -32%;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 26%, rgba(34, 211, 238, .14), transparent 27%),
        radial-gradient(circle at 80% 70%, rgba(99, 102, 241, .14), transparent 28%);
    background-size: 130% 130%, 145% 145%;
    animation: fxAuroraDrift 6.4s ease-in-out infinite reverse;
}
body.chat-shell .chat-recharge-overlay.active .card-redeem-hero-icon {
    animation: fxRechargeIconFloat 3s ease-in-out .5s infinite;
}

/* Check-in: the current day remains alive, while the panel receives a slow
 * moving field of tiny cyan/gold highlights. */
body.chat-shell .checkin-modal::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(34, 211, 238, .22) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 214, 110, .16) 0 1px, transparent 1.5px);
    background-position: 16px 24px, 74px 68px;
    background-size: 96px 96px, 132px 132px;
    opacity: .18;
    animation: fxAuroraDrift 9s linear infinite;
}

/* Check-in uses a clean backdrop; keep motion on the clock, not on dotted fields. */
body.chat-shell .checkin-modal::after,
body.chat-shell.theme-light .checkin-modal::after {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
}
body.chat-shell .checkin-overlay.active .checkin-day.today,
body.chat-shell .checkin-overlay.active .checkin-day.today-done {
    animation: fxTodayGlow 2.6s ease-in-out .45s infinite;
}

/* Settings/editors: a slow violet/cyan ribbon travels behind the header. */
body.chat-shell .settings-modal-content::after,
body.chat-shell .ultra-premium-modal::after,
body.chat-shell .extend-video-content::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -90px;
    left: -20%;
    width: 92%;
    height: 190px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(124, 92, 255, .18), rgba(34, 211, 238, .08) 42%, transparent 70%);
    filter: blur(12px);
    animation: fxSettingsRibbon 7.2s ease-in-out infinite;
}

body.chat-shell.theme-light #contactModal::after,
body.chat-shell.theme-light #feedbackDrawer::after,
body.chat-shell.theme-light .checkin-modal::after {
    opacity: .12;
}

/* Close controls share the same tactile hover, press and focus feedback. */
body.chat-shell :is(
    .close-modal,
    .ms-modal-close,
    .chat-recharge-close,
    .history-drawer-close,
    .history-panel-close,
    .asset-selector-close,
    .asset-editor-close,
    .role-manager-close,
    .role-status-close,
    .lightbox-close,
    .video-lightbox .lightbox-close,
    .up-close-btn,
    .tts-close,
    .checkin-close,
    .notice-panel-close,
    .works-asset-editor-close,
    .preview-close
) {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
        box-shadow .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
    transform: translateZ(0) scale(1);
}

body.chat-shell :is(
    .close-modal,
    .ms-modal-close,
    .chat-recharge-close,
    .history-drawer-close,
    .history-panel-close,
    .asset-selector-close,
    .asset-editor-close,
    .role-manager-close,
    .role-status-close,
    .lightbox-close,
    .video-lightbox .lightbox-close,
    .up-close-btn,
    .tts-close,
    .checkin-close,
    .notice-panel-close,
    .works-asset-editor-close,
    .preview-close
):hover {
    transform: translateY(-1px) scale(1.08) rotate(4deg);
    color: #fef2f2;
    border-color: rgba(248, 113, 113, .44);
    background: rgba(248, 113, 113, .13);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, .08), 0 8px 22px rgba(248, 113, 113, .14);
}

body.chat-shell :is(
    .close-modal,
    .ms-modal-close,
    .chat-recharge-close,
    .history-drawer-close,
    .history-panel-close,
    .asset-selector-close,
    .asset-editor-close,
    .role-manager-close,
    .role-status-close,
    .lightbox-close,
    .video-lightbox .lightbox-close,
    .up-close-btn,
    .tts-close,
    .checkin-close,
    .notice-panel-close,
    .works-asset-editor-close,
    .preview-close
):active {
    transform: scale(.9) rotate(-8deg);
    animation: fxClosePulse .35s ease-out;
}

body.chat-shell :is(
    .close-modal,
    .ms-modal-close,
    .chat-recharge-close,
    .history-drawer-close,
    .history-panel-close,
    .asset-selector-close,
    .asset-editor-close,
    .role-manager-close,
    .role-status-close,
    .lightbox-close,
    .video-lightbox .lightbox-close,
    .up-close-btn,
    .tts-close,
    .checkin-close,
    .notice-panel-close,
    .works-asset-editor-close,
    .preview-close
):focus-visible {
    outline: 2px solid rgba(34, 211, 238, .72);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body.chat-shell .modal[style*="display: flex"] .modal-content,
    body.chat-shell .ms-modal-overlay.active .ms-contact-modal,
    body.chat-shell .ms-feedback-overlay.active .ms-feedback-modal,
    body.chat-shell .chat-recharge-overlay.active .chat-recharge-modal,
    body.chat-shell .action-popover[style*="display: block"],
    body.chat-shell .history-drawer.open,
    body.chat-shell .history-panel[style*="display: block"],
    body.chat-shell .image-options-popup[style*="display: block"],
    body.chat-shell .route-strategy-popup[style*="display: block"],
    body.chat-shell .thinking-level-menu[style*="display: block"],
    body.chat-shell .image-lightbox[style*="display: flex"],
    body.chat-shell .video-lightbox[style*="display: flex"],
    body.chat-shell .role-manager-modal[style*="display: flex"],
    body.chat-shell .asset-selector-modal[style*="display: flex"],
    body.chat-shell .asset-editor-modal[style*="display: flex"],
    body.chat-shell .tts-player[style*="display: block"],
    body.chat-shell .video-media-hover-preview.is-visible,
    body.chat-shell #noticeModalOverlay.active #noticeModal,
    body.chat-shell #contactModalOverlay.active .ms-contact-modal,
    body.chat-shell #contactModalOverlay.active .ms-contact-profile,
    body.chat-shell #contactModalOverlay.active .ms-contact-qr-section,
    body.chat-shell #contactModalOverlay.active .contact-card,
    body.chat-shell #feedbackOverlay.active .ms-feedback-modal,
    body.chat-shell #feedbackOverlay.active .form-group,
    body.chat-shell #feedbackOverlay.active .feedback-submit-btn,
    body.chat-shell #confirmModal.active .ms-modal,
    body.chat-shell #confirmModal.active #confirmIcon,
    body.chat-shell #confirmModal.active #confirmMessage,
    body.chat-shell #confirmModal.active #confirmCancelBtn,
    body.chat-shell #confirmModal.active #confirmOkBtn,
    body.chat-shell .chat-recharge-overlay.active .chat-recharge-modal,
    body.chat-shell .chat-recharge-overlay.active .card-redeem-hero,
    body.chat-shell .chat-recharge-overlay.active .card-redeem-store-link,
    body.chat-shell .chat-recharge-overlay.active .card-redeem-field,
    body.chat-shell .chat-recharge-overlay.active .chat-recharge-footer,
    body.chat-shell .checkin-overlay.active .checkin-modal,
    body.chat-shell .checkin-overlay.active .checkin-stats-bar,
    body.chat-shell .checkin-overlay.active .checkin-calendar,
    body.chat-shell .checkin-overlay.active .checkin-action,
    body.chat-shell .checkin-overlay.active .checkin-task-group,
    body.chat-shell .modal[style*="display: flex"] .settings-modal-content,
    body.chat-shell .modal[style*="display: flex"] .ultra-premium-modal,
    body.chat-shell .modal[style*="display: flex"] .extend-video-content,
    body.chat-shell .role-manager-modal[style*="display: flex"] .role-manager-panel,
    body.chat-shell .asset-selector-modal[style*="display: flex"] .asset-selector-panel,
    body.chat-shell .asset-editor-modal[style*="display: flex"] .asset-editor-panel,
    body.chat-shell .image-lightbox[style*="display: flex"] .lightbox-content,
    body.chat-shell .video-lightbox[style*="display: flex"] .lightbox-content,
    body.chat-shell #contactModalOverlay.active .contact-avatar,
    body.chat-shell #contactModalOverlay.active .ms-contact-qr-wrapper,
    body.chat-shell .chat-recharge-overlay.active .card-redeem-hero-icon,
    body.chat-shell .checkin-overlay.active .checkin-day.today,
    body.chat-shell .checkin-overlay.active .checkin-day.today-done {
        animation: none !important;
    }

    body.chat-shell #contactModal::after,
    body.chat-shell #feedbackDrawer::before,
    body.chat-shell #feedbackDrawer::after,
    body.chat-shell .chat-recharge-modal::before,
    body.chat-shell .checkin-modal::after,
    body.chat-shell .settings-modal-content::after,
    body.chat-shell .ultra-premium-modal::after,
    body.chat-shell .extend-video-content::after {
        display: none;
    }
}