/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

/* ============================================================
   PRISTINE GATEWAY ERP — Microsoft Fluent Design System 2
   Segoe UI Variable · Fluent Tokens · Mica/Acrylic · Fluent Motion
   ============================================================ */

:root {
  /* ── Fluent Brand Colors (Blue ramp) ── */
  --brand-10: #061724;
  --brand-20: #082338;
  --brand-30: #0A2E4A;
  --brand-40: #0C3B5E;
  --brand-50: #0E4775;
  --brand-60: #0F548C;
  --brand-70: #115EA3;
  --brand-80: #0F6CBD;
  --brand-90: #2886DE;
  --brand-100: #479EF5;
  --brand-110: #62ABF5;
  --brand-120: #77B7F7;
  --brand-130: #96C6FA;
  --brand-140: #B4D6FA;
  --brand-150: #CFE4FA;
  --brand-160: #EBF3FC;

  /* ── Fluent Neutral Palette ── */
  --neutral-2: #050505;
  --neutral-4: #0A0A0A;
  --neutral-6: #0F0F0F;
  --neutral-8: #141414;
  --neutral-10: #1A1A1A;
  --neutral-12: #1F1F1F;
  --neutral-14: #242424;
  --neutral-16: #292929;
  --neutral-20: #333333;
  --neutral-24: #3D3D3D;
  --neutral-26: #424242;
  --neutral-30: #525252;
  --neutral-40: #616161;
  --neutral-50: #707070;
  --neutral-60: #8A8A8A;
  --neutral-70: #A3A3A3;
  --neutral-80: #BDBDBD;
  --neutral-84: #C7C7C7;
  --neutral-86: #D1D1D1;
  --neutral-90: #E0E0E0;
  --neutral-92: #EDEDED;
  --neutral-94: #F0F0F0;
  --neutral-96: #F5F5F5;
  --neutral-98: #FAFAFA;
  --neutral-100: #FFFFFF;

  /* ── Fluent Surfaces ── */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F5F5F5;
  --surface-tertiary: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-card-secondary: #F5F5F5;
  --surface-smoke: rgba(0, 0, 0, 0.4);

  /* ── Fluent Text ── */
  --text-primary: #242424;
  --text-secondary: #616161;
  --text-tertiary: #A3A3A3;
  --text-disabled: #BDBDBD;
  --text-on-accent: #FFFFFF;
  --text-brand: #0F6CBD;

  /* ── Fluent Stroke/Border ── */
  --stroke-card: #E0E0E0;
  --stroke-default: #D1D1D1;
  --stroke-subtle: #E0E0E0;
  --stroke-divider: #E0E0E0;
  --stroke-focus: #000000;
  --stroke-focus-outer: #FFFFFF;
  --stroke-brand: #0F6CBD;

  /* ── Fluent Status Colors ── */
  --status-success: #0E700E;
  --status-success-bg: #F1FAF1;
  --status-success-border: #9FD89F;
  --status-warning: #BC4B09;
  --status-warning-bg: #FFF9F5;
  --status-warning-border: #FDCFB4;
  --status-danger: #B10E1C;
  --status-danger-bg: #FDF3F4;
  --status-danger-border: #F1BBBC;
  --status-info: #0F6CBD;
  --status-info-bg: #EBF3FC;
  --status-info-border: #B4D6FA;
  --status-severe: #DA3B01;
  --status-severe-bg: #FDF3F4;

  /* ── Fluent Shared Colors (Semantic) ── */
  --fluent-red: #D13438;
  --fluent-red-bg: #FDF6F6;
  --fluent-green: #107C10;
  --fluent-green-bg: #F1FAF1;
  --fluent-orange: #DA3B01;
  --fluent-orange-bg: #FDF3F4;
  --fluent-yellow: #EAA300;
  --fluent-yellow-bg: #FFF9E8;
  --fluent-blue: #0078D4;
  --fluent-blue-bg: #EBF3FC;
  --fluent-purple: #5C2E91;
  --fluent-purple-bg: #F5F0FA;
  --fluent-teal: #038387;
  --fluent-teal-bg: #F0FAFA;
  --fluent-pink: #E3008C;
  --fluent-pink-bg: #FCF2F8;
  --fluent-navy: #003966;
  --fluent-cyan: #0099BC;

  /* ── Brand mapping ── */
  --brand-primary: var(--brand-80);
  --brand-hover: var(--brand-70);
  --brand-pressed: var(--brand-40);
  --brand-selected: var(--brand-160);
  --brand-subtle: var(--brand-160);

  /* ── Legacy alias (for module compat) ── */
  --navy: var(--neutral-14); --navy-light: var(--neutral-24);
  --blue: var(--brand-80); --blue-light: var(--brand-100); --blue-pale: var(--brand-160); --blue-wash: var(--brand-160);
  --white: #FFFFFF; --snow: var(--neutral-98); --cloud: var(--neutral-96); --mist: var(--neutral-92);
  --stone: var(--neutral-70); --slate: var(--neutral-40); --ink: var(--neutral-14); --charcoal: var(--neutral-14);
  --emerald: var(--fluent-green); --emerald-bg: var(--fluent-green-bg);
  --amber: var(--fluent-orange); --amber-bg: var(--fluent-orange-bg);
  --rose: var(--fluent-red); --rose-bg: var(--fluent-red-bg);
  --violet: var(--fluent-purple); --violet-bg: var(--fluent-purple-bg);

  /* ── Apple compat aliases (used in modules) ── */
  --apple-blue: var(--brand-80);
  --apple-blue-hover: var(--brand-70);
  --apple-blue-pressed: var(--brand-40);
  --apple-blue-light: var(--brand-160);
  --apple-blue-subtle: var(--brand-160);
  --apple-green: var(--fluent-green);
  --apple-orange: var(--fluent-orange);
  --apple-red: var(--fluent-red);
  --apple-purple: var(--fluent-purple);
  --apple-pink: var(--fluent-pink);
  --apple-teal: var(--fluent-teal);
  --apple-indigo: #5B5FC7;
  --apple-yellow: var(--fluent-yellow);
  --apple-mint: var(--fluent-teal);
  --apple-cyan: var(--fluent-cyan);

  /* ── Fluent Corner Radii ── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-circular: 9999px;

  /* ── Fluent Elevation (Shadow) ── */
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-28: 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.12);
  --shadow-64: 0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.12);
  --shadow-brand-2: 0 1px 2px rgba(15, 108, 189, 0.30), 0 0 2px rgba(15, 108, 189, 0.25);
  --shadow-brand-4: 0 2px 4px rgba(15, 108, 189, 0.30), 0 0 2px rgba(15, 108, 189, 0.25);
  --shadow-sm: var(--shadow-2);
  --shadow: var(--shadow-4);
  --shadow-lg: var(--shadow-16);

  /* ── Fluent Motion ── */
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(1, 0, 1, 1);
  --ease-standard: cubic-bezier(0.8, 0, 0.2, 1);
  --ease-linear: linear;
  --spring: cubic-bezier(0.1, 0.9, 0.2, 1);
  --spring-soft: cubic-bezier(0.1, 0.9, 0.2, 1);
  --spring-snappy: cubic-bezier(0.1, 0.9, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.1, 0.9, 0.2, 1);
  --duration-ultra-fast: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-gentle: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;
  --duration-instant: 50ms;
  --transition: var(--duration-normal) var(--ease-decelerate);
}

/* ── Base Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--surface-secondary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

a { color: var(--brand-80); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--brand-70); }

/* ── Fluent Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--neutral-80);
  border-radius: var(--radius-circular);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--neutral-60); }

/* ============================================================
   LAYOUT
   ============================================================ */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px;
  background: var(--surface-primary);
  border-right: 1px solid var(--stroke-subtle);
  color: var(--text-primary);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

/* ── Fluent Dark Sidebar (lighter tone) ── */
.sidebar.sidebar-dark {
  background: #3E3E42;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}
.sidebar-dark::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }
.sidebar-dark::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
.sidebar-dark nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }
.sidebar-dark nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.main-content {
  margin-left: 260px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  max-width: 100%;
}

.header {
  height: 48px;
  background: var(--surface-primary);
  border-bottom: 1px solid var(--stroke-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-content {
  padding: 24px 24px;
  flex: 1 1;
  min-width: 0;
  overflow-x: hidden;
}

/* ============================================================
   BUTTONS — Fluent Design 2
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--duration-faster) var(--ease-standard),
              border-color var(--duration-faster) var(--ease-standard);
  border: 1px solid var(--stroke-default);
  background: var(--surface-primary);
  color: var(--text-primary);
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-height: 32px;
}
.btn:hover { background: var(--neutral-96); }
.btn:active { background: var(--neutral-94); }
.btn:focus-visible {
  border-color: var(--stroke-focus);
  box-shadow: 0 0 0 1px var(--stroke-focus);
  outline: 2px solid var(--stroke-focus-outer);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--brand-80);
  color: var(--text-on-accent);
  border-color: transparent;
}
.btn-primary:hover {
  background: var(--brand-70);
  color: var(--text-on-accent);
}
.btn-primary:active {
  background: var(--brand-40);
  color: var(--text-on-accent);
}

.btn-sm { padding: 3px 8px; font-size: 12px; min-height: 24px; }

.btn-danger {
  background: var(--fluent-red);
  color: var(--text-on-accent);
  border-color: transparent;
}
.btn-danger:hover { background: #C62828; }
.btn-danger:active { background: #B71C1C; }

/* Fluent Subtle button */
.btn-subtle {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
}
.btn-subtle:hover { background: var(--neutral-96); }
.btn-subtle:active { background: var(--neutral-94); }

/* ============================================================
   CARDS — Fluent Design 2
   ============================================================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--stroke-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--duration-normal) var(--ease-decelerate),
              border-color var(--duration-normal) var(--ease-decelerate);
}
.card:hover {
  box-shadow: var(--shadow-4);
  border-color: var(--stroke-default);
}

/* ============================================================
   FORMS — Fluent Design 2
   ============================================================ */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.form-input {
  width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--stroke-default);
  border-bottom: 2px solid var(--neutral-60);
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface-primary);
  transition: border-color var(--duration-faster) var(--ease-standard);
  outline: none;
  min-height: 32px;
}
.form-input:hover { border-bottom-color: var(--neutral-40); }
.form-input:focus {
  border-bottom-color: var(--brand-80);
  border-bottom-width: 2px;
}

/* ============================================================
   STATUS BADGES — Fluent Design 2
   ============================================================ */
.badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}
.badge-active { background: var(--status-success-bg); color: var(--status-success); border: 1px solid var(--status-success-border); }
.badge-tender { background: var(--status-warning-bg); color: var(--status-warning); border: 1px solid var(--status-warning-border); }
.badge-dlp { background: var(--fluent-purple-bg); color: var(--fluent-purple); border: 1px solid #D3BFEA; }
.badge-closed { background: var(--neutral-96); color: var(--neutral-40); border: 1px solid var(--neutral-90); }

/* ============================================================
   FLUENT MOTION — Entrance & Interaction Animations
   ============================================================ */

/* ── Bounce (subtle, no spring overshoot in Fluent) ── */
@keyframes sfBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.sf-bounce { animation: sfBounce 0.25s var(--ease-standard) 1; }

/* ── Wiggle — subtle shake ── */
@keyframes sfWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
  75%      { transform: rotate(-3deg); }
}
.sf-wiggle { animation: sfWiggle 0.4s var(--ease-standard) 1; transform-origin: top center; }

/* ── Breathe — alive indicator ── */
@keyframes sfBreathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.sf-breathe { animation: sfBreathe 3s ease-in-out infinite; }

/* ── Pulse ── */
@keyframes sfPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.sf-pulse { animation: sfPulse 2s ease-in-out infinite; }

/* ── Rotate — loading spinner ── */
@keyframes sfRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sf-rotate { animation: sfRotate 1s linear infinite; }

/* ── Scale ── */
@keyframes sfScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.sf-scale { animation: sfScale 0.3s var(--ease-decelerate) 1; }

/* ── Appear — Fluent surface entrance (fade + slide up) ── */
@keyframes sfAppear {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.sf-appear {
  animation: sfAppear 0.25s var(--ease-decelerate) forwards;
  opacity: 0;
}

/* ── Variable Color ── */
@keyframes sfVariableColor {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.sf-variable-color { animation: sfVariableColor 3s ease-in-out infinite; }

/* ── Replace In ── */
@keyframes sfReplaceIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.sf-replace-in { animation: sfReplaceIn 0.2s var(--ease-decelerate) forwards; }

/* ============================================================
   PAGE ENTRANCE — Fluent Fade + Slide
   ============================================================ */
@keyframes pageSlideUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-in {
  animation: pageSlideUp 0.35s var(--ease-decelerate) forwards;
  opacity: 0;
}
.delay-1  { animation-delay: 50ms; }
.delay-2  { animation-delay: 100ms; }
.delay-3  { animation-delay: 150ms; }
.delay-4  { animation-delay: 200ms; }
.delay-5  { animation-delay: 250ms; }
.delay-6  { animation-delay: 300ms; }
.delay-7  { animation-delay: 350ms; }
.delay-8  { animation-delay: 400ms; }

/* ============================================================
   CARD ENTRANCE — Fluent stagger
   ============================================================ */
@keyframes cardPop {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.card-enter {
  animation: cardPop 0.3s var(--ease-decelerate) forwards;
  opacity: 0;
}

/* ============================================================
   SHIMMER — Skeleton loading
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--neutral-94) 0%,
    var(--neutral-92) 20%,
    var(--neutral-96) 40%,
    var(--neutral-96) 60%,
    var(--neutral-92) 80%,
    var(--neutral-94) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
@keyframes progressFill {
  from { width: 0; }
}
.progress-bar-fill {
  animation: progressFill 0.8s var(--ease-decelerate) forwards;
  transition: width 0.6s var(--ease-decelerate);
}

/* ============================================================
   CHAT BUBBLE — Fluent message entrance
   ============================================================ */
@keyframes bubbleInLeft {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes bubbleInRight {
  0%   { opacity: 0; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.bubble-bot  { animation: bubbleInLeft 0.25s var(--ease-decelerate) forwards; }
.bubble-user { animation: bubbleInRight 0.25s var(--ease-decelerate) forwards; }

/* ============================================================
   TYPING INDICATOR
   ============================================================ */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.typing-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-tertiary);
  display: inline-block;
}
.typing-dot:nth-child(1) { animation: typingDot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation: typingDot 1.2s ease-in-out 0.15s infinite; }
.typing-dot:nth-child(3) { animation: typingDot 1.2s ease-in-out 0.3s infinite; }

/* ============================================================
   ROW / LIST ITEM
   ============================================================ */
@keyframes rowSlideIn {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
.row-enter {
  animation: rowSlideIn 0.25s var(--ease-decelerate) forwards;
  opacity: 0;
}

/* ============================================================
   BADGE POP
   ============================================================ */
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.badge-pop {
  animation: badgePop 0.25s var(--ease-decelerate) forwards;
  opacity: 0;
}

/* ============================================================
   NUMBER COUNTER
   ============================================================ */
@keyframes numberReveal {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.number-reveal {
  animation: numberReveal 0.35s var(--ease-decelerate) forwards;
  opacity: 0;
}

/* ============================================================
   GLOW RING — Focus
   ============================================================ */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 108, 189, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(15, 108, 189, 0.15); }
}
.glow-ring { animation: glowPulse 2s ease-in-out infinite; }

/* ============================================================
   INSIGHT CARD
   ============================================================ */
@keyframes insightSlide {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.insight-enter {
  animation: insightSlide 0.3s var(--ease-decelerate) forwards;
  opacity: 0;
}

/* ============================================================
   HOVER GLOW
   ============================================================ */
@keyframes hoverGlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

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

/* ============================================================
   APPLE SPINNER — 12-segment rotating loader
   ============================================================ */
.apple-spinner {
  width: 28px;
  height: 28px;
  position: relative;
  display: inline-block;
}
.apple-spinner .tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.4px;
  height: 8px;
  margin-left: -1.2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center 14px;
  animation: apple-spinner-fade 1s linear infinite;
}
@keyframes apple-spinner-fade {
  0%, 39%, 100% { opacity: 0.15; }
  40% { opacity: 1; }
}

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-in, .card-enter, .sf-appear, .bubble-bot, .bubble-user,
  .row-enter, .badge-pop, .number-reveal, .insight-enter, .skeleton {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}