@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Placeholder text styling - ensure clear distinction from actual input values */
/* Uses lower opacity and italic to clearly indicate placeholder state */
input::placeholder,
textarea::placeholder {
  opacity: 0.35;
  font-style: italic;
}

/* Custom scrollbar styles - subtle by default, brighter on hover */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Scrollbar with highlight color when actively scrolling */
.scrollbar-thin.scrolling::-webkit-scrollbar-thumb {
  background: var(--highlight-color, var(--accent-color, rgba(99, 102, 241, 0.8)));
  transition: background-color 0.15s ease;
}

.scrollbar-thin.scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--highlight-color, var(--accent-color, rgba(99, 102, 241, 1)));
}

/* Scrollbar fading out state - gradual transition to transparent */
.scrollbar-thin.fading::-webkit-scrollbar-thumb {
  background: transparent;
  transition: background-color 0.5s ease;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color, rgba(99, 102, 241, 0.4));
  }
  70% {
    box-shadow: 0 0 0 6px var(--pulse-color, rgba(99, 102, 241, 0));
  }
  100% {
    box-shadow: 0 0 0 0 var(--pulse-color, rgba(99, 102, 241, 0));
  }
}

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

@keyframes token-update {
  0% {
    color: var(--token-highlight, rgba(99, 102, 241, 1));
    transform: scale(1.1);
  }
  100% {
    color: inherit;
    transform: scale(1);
  }
}

@keyframes progress-stripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

/* Usage Dashboard - New data indicator animations */
@keyframes pulse-fade {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Usage Dashboard - Skeleton loading animation */
@keyframes skeleton-shimmer {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
  }
}

/* Usage Dashboard - View mode transition animations */
@keyframes dashboard-content-enter {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboard-content-exit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Usage Dashboard - Staggered card entrance animation */
@keyframes dashboard-card-enter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Usage Dashboard - Chart section enter animation */
@keyframes dashboard-section-enter {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Usage Dashboard animation utility classes */
.dashboard-content-enter {
  animation: dashboard-content-enter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dashboard-card-enter {
  animation: dashboard-card-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.dashboard-section-enter {
  animation: dashboard-section-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-in {
  animation: fade-in 0.2s ease-in;
}

.animate-slide-up {
  animation: slide-up 0.25s ease-out;
}

.animate-slide-down {
  animation: slide-down 0.2s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

.animate-highlight-pulse {
  animation: highlight-pulse 0.6s ease-out;
}

.animate-check-pop {
  animation: check-pop 0.3s ease-out;
}

.animate-token-update {
  animation: token-update 0.4s ease-out;
}

/* Animated progress bar with stripes for indeterminate state */
.progress-bar-animated {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  animation: progress-stripe 1s linear infinite;
}

/* Shimmer effect for drag-and-drop */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Restore list styling for markdown preview prose containers */
.prose ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
}

.prose ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
}

.prose li {
  display: list-item !important;
}

/* Fix bullet alignment when first element is bold/styled */
.prose li > strong:first-child,
.prose li > b:first-child,
.prose li > em:first-child,
.prose li > code:first-child,
.prose li > a:first-child {
  vertical-align: baseline;
  line-height: inherit;
}

.prose li::marker {
  font-weight: normal;
}

/* Nested lists */
.prose ul ul {
  list-style-type: circle !important;
}

.prose ul ul ul {
  list-style-type: square !important;
}

.prose ol ol {
  list-style-type: lower-alpha !important;
}

.prose ol ol ol {
  list-style-type: lower-roman !important;
}

/* Modal overlay - solid background without GPU-intensive blur */
/* Replaces backdrop-blur-sm for better performance */
/* Old: bg-black/60 backdrop-blur-sm or bg-black/70 backdrop-blur-sm */
/* New: bg-black/85 (solid, no blur) */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.85);
}

/* Document Graph - Search highlight animation for matching nodes */
@keyframes search-highlight-glow {
  0% {
    box-shadow: 0 0 0 3px var(--search-highlight-color, rgba(99, 102, 241, 0.4)), 0 4px 12px var(--search-shadow-color, rgba(99, 102, 241, 0.2));
  }
  50% {
    box-shadow: 0 0 0 5px var(--search-highlight-color, rgba(99, 102, 241, 0.25)), 0 4px 16px var(--search-shadow-color, rgba(99, 102, 241, 0.3));
  }
  100% {
    box-shadow: 0 0 0 3px var(--search-highlight-color, rgba(99, 102, 241, 0.4)), 0 4px 12px var(--search-shadow-color, rgba(99, 102, 241, 0.2));
  }
}

.search-highlight {
  animation: search-highlight-glow 2s ease-in-out infinite;
}

/* React Flow - Document Graph edge hover styling */
/* Subtle glow effect on edge hover */
.react-flow__edge-path {
  transition: stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
}

.react-flow__edge:hover .react-flow__edge-path {
  filter: drop-shadow(0 0 3px var(--edge-hover-color, currentColor));
  stroke-width: 2.5;
}

/* Edge path styling for better visibility */
.react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 3;
}

/* Smooth step edge marker hover effect */
.react-flow__edge:hover .react-flow__edge-textwrapper {
  opacity: 1;
}

/* Reduced motion preference - accessibility best practice */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse,
  .animate-spin,
  .animate-bounce {
    animation: none !important;
  }

  .transition-all,
  .transition-colors,
  .transition-opacity,
  .transition-transform {
    transition: none !important;
  }

  /* Disable React Flow edge animations */
  .react-flow__edge-path {
    transition: none !important;
  }

  /* Disable new data indicator animations */
  [data-testid="new-data-indicator"],
  [data-testid="new-data-indicator"] span {
    animation: none !important;
  }

  /* Disable skeleton loading animations */
  [data-testid="skeleton-box"],
  [data-testid="skeleton-circle"] {
    animation: none !important;
  }

  /* Disable Usage Dashboard state transition animations */
  .dashboard-content-enter,
  .dashboard-card-enter,
  .dashboard-section-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable Document Graph search highlight animations */
  .search-highlight {
    animation: none !important;
  }
}
