/* =========================================================================
   AutoParts CRM — custom CSS overrides.
   Most styling is Tailwind utility classes in templates; this file holds
   animations and things Tailwind doesn't express cleanly.
   ========================================================================= */

/* ---------- Custom scrollbar ---------- */
.crm-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.crm-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.crm-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}
.crm-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
}
.dark .crm-scroll::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.55);
}

/* ---------- Message slide-in ---------- */
@keyframes slideInUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.msg-bubble {
  animation: slideInUp 220ms ease-out both;
}

/* ---------- Score pulse (80+) ---------- */
@keyframes scorePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); }
}
.score-hot {
  animation: scorePulse 1.8s infinite;
}

/* ---------- Drag / drop kanban ---------- */
.kanban-card {
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.15);
  border-color: rgb(99 102 241 / 0.5);
}
.kanban-card.dragging {
  transform: scale(1.02) rotate(2deg);
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.25);
  opacity: 0.95;
}
.kanban-column.drop-target {
  background: rgba(99, 102, 241, 0.06);
  outline: 2px dashed rgba(99, 102, 241, 0.45);
  outline-offset: -4px;
}
.dark .kanban-column.drop-target {
  background: rgba(99, 102, 241, 0.12);
}

/* ---------- Typing indicator ---------- */
.typing-dot {
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  display: inline-block;
  animation: typingBlink 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBlink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-2px); }
}

/* ---------- Skeleton shimmer ---------- */
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 400px 100%;
  animation: shimmer 1.2s infinite linear;
  border-radius: 8px;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
}

/* ---------- Toast ---------- */
.toast {
  animation: slideInUp 200ms ease-out;
}

/* ---------- Button active shrink ---------- */
button, .btn {
  transition: transform 80ms ease;
}
button:active, .btn:active {
  transform: scale(0.97);
}

/* ---------- Link row hover ---------- */
.row-hover:hover {
  background-color: rgb(248 250 252);
}
.dark .row-hover:hover {
  background-color: rgb(30 41 59);
}

/* ---------- Active sidebar link gradient ---------- */
.nav-active {
  background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(99,102,241,0));
  color: rgb(79 70 229);
  border-left: 3px solid rgb(99 102 241);
}
.dark .nav-active {
  background: linear-gradient(90deg, rgba(129,140,248,0.18), rgba(129,140,248,0));
  color: rgb(165 180 252);
}

/* ---------- Chat bubble tails ---------- */
.bubble-left::before,
.bubble-right::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
}