* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); }

.dark ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.4); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@keyframes float-packet { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes glow-pulse { 0%, 100% { filter: drop-shadow(0 0 3px currentColor); } 50% { filter: drop-shadow(0 0 8px currentColor); } }
@keyframes countUp { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-slide-in { animation: slideIn 0.25s ease-out forwards; }
.animate-slide-in-left { animation: slideInLeft 0.25s ease-out forwards; }
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
.animate-toast-in { animation: toast-in 0.3s ease-out forwards; }
.animate-toast-out { animation: toast-out 0.3s ease-in forwards; }
.animate-count-up { animation: countUp 0.4s ease-out forwards; }

.typing-dot { animation: typing 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

.skeleton-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,0.1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Network visualization */
.network-node { transition: all 0.5s ease; }
.network-edge { transition: all 0.5s ease; }
.glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }

/* Transition helpers */
.sidebar-transition { transition: width 0.2s ease, min-width 0.2s ease; }
.view-transition { transition: opacity 0.15s ease; }