/* Resume Check AI — global styles */

html { scroll-behavior: smooth; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.animate-fade-in     { animation: fade-in .6s ease forwards; }
.animate-fade-in-up  { animation: fade-in-up .7s ease forwards; }
.animate-bounce-slow { animation: bounce-slow 2.5s ease-in-out infinite; }
.animate-delay-100   { animation-delay: .1s; opacity: 0; }
.animate-delay-200   { animation-delay: .2s; opacity: 0; }
.animate-delay-300   { animation-delay: .3s; opacity: 0; }
.animate-delay-400   { animation-delay: .4s; opacity: 0; }

/* Drag-drop dropzone */
.dropzone {
  border: 2px dashed #cbd5e1;
  transition: all .25s ease;
  background: #fafbfc;
}
.dropzone.dragover {
  border-color: #0A66C2;
  background: #E7F3FF;
  transform: scale(1.01);
}

/* Loading shimmer for score circle */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Circular score ring */
.score-ring { transform: rotate(-90deg); }
.score-ring circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}
.score-ring .bg-ring { stroke: #e5e7eb; }
.score-ring .fg-ring {
  stroke: #0A66C2;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s ease;
}

/* Pretty scrollbar for JD textarea */
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Print styling for results */
@media print {
  .no-print { display: none !important; }
  body { background: white; }
}

/* Keyword chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 500;
  margin: .2rem;
}
.chip-missing { background: #FEF3C7; color: #92400E; }
.chip-found   { background: #D1FAE5; color: #065F46; }

/* Tab buttons */
.tab-btn {
  padding: .75rem 1.25rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all .2s;
}
.tab-btn:hover { color: #0A66C2; }
.tab-btn.active {
  color: #0A66C2;
  border-bottom-color: #0A66C2;
}

/* Progress bars */
.progress-bar { height: 8px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #0A66C2, #3B82F6);
  border-radius: 9999px;
  transition: width 1.2s ease;
}