/* FasterDocs Modern Stylesheet */

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #10b981;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

/* Glassmorphism Card Effect */
.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.85);
}

.dark .glass-card {
  background: rgba(30, 41, 59, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(51, 65, 85, 0.75);
}

/* Dropzone dragover glowing pulse */
.dropzone-active {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.08) !important;
  transform: scale(1.01);
}

.dark .dropzone-active {
  border-color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.15) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Route Tile Hover Effects */
.route-card {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.route-card:hover {
  transform: translateY(-3px);
  border-color: #3b82f6;
  box-shadow: 0 10px 25px -8px rgba(59, 130, 246, 0.18);
}
.dark .route-card:hover {
  border-color: #60a5fa;
  box-shadow: 0 10px 25px -8px rgba(37, 99, 235, 0.35);
}
.route-card:hover .route-arrow {
  transform: translateX(3px);
  color: #3b82f6;
}

.route-arrow {
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Active Nav Pill */
.nav-tab-active {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Category Filter Chips */
.filter-chip-active {
  background: #2563eb;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Floating Toast */
#toast {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#toast.hidden-toast {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
}
#toast.visible-toast {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Document Paper Mockup in Viewer */
.doc-paper {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.25);
  min-height: 500px;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 8px;
  position: relative;
}

/* Checkered Background for Transparent Images */
.checkered-bg {
  background-image: 
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.dark .checkered-bg {
  background-image: 
    linear-gradient(45deg, #1e293b 25%, transparent 25%), 
    linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #1e293b 75%), 
    linear-gradient(-45deg, transparent 75%, #1e293b 75%);
}

/* FasterDocs Modern Micro-Interactions */
.tool-card {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.2s ease;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.4);
}
.tool-card:active {
  transform: translateY(0) scale(0.99);
}

/* Glowing Live Badges */
@keyframes glowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}
.live-pulse {
  animation: glowPulse 2s infinite ease-in-out;
}

/* Shimmer Progress bar */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-progress {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite linear;
}

/* =============================================================
 * MOBILE & TELEGRAM WEBAPP OPTIMIZATIONS
 * ============================================================= */
/* Smooth Touch Scrolling on iOS & Android */

/* Smooth Touch Scrolling on iOS & Android */
.overflow-y-auto, .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for horizontal chip bars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile Safe Areas */
.safe-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.safe-top {
  padding-top: max(0.5rem, env(safe-area-inset-top));
}

/* Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
  button:active, .route-card:active, .tool-card:active {
    transform: scale(0.97);
  }
}

/* Drag and drop & Card styling */

/* Drag and Drop Visual Feedback & Cross-browser Drag Fix */
.file-item-card {
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.file-item-card:active {
  cursor: grabbing;
}
.file-item-card * {
  pointer-events: none;
}
.file-item-card button,
.file-item-card input,
.file-item-card a,
.file-item-card .clickable-interactive {
  pointer-events: auto;
}
.file-item-card.dragging-item {
  opacity: 0.35 !important;
  transform: scale(0.98);
}
.file-item-card.drag-over-target {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.15) !important;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}