/* ══════════════════════════════════════════
   Search Loading Overlay — shared component
   Branded splash with spinner + rotating phrases.
   Used on: dashboard, search-home, search-results
   ══════════════════════════════════════════ */

.sl-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slFadeIn 0.3s ease;
}
.sl-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.sl-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Gradient spinner ring */
.sl-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--slate-100, #F1F5F9);
  border-top-color: #38BDF8;
  border-right-color: #818CF8;
  animation: slSpin 1s linear infinite;
  position: relative;
}
.sl-spinner::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #8B5CF6;
  animation: slSpin 1.6s linear infinite reverse;
}
.sl-brand {
  font-family: var(--font-logo, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-primary, #0F172A);
}
.sl-brand-ai {
  background: linear-gradient(135deg, #38BDF8 0%, #818CF8 50%, #8B5CF6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slLogoShift 4s ease infinite;
  font-weight: 700;
}
.sl-dots {
  display: flex;
  gap: 4px;
}
.sl-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: slDotBounce 1.2s ease-in-out infinite;
}
.sl-dots span:nth-child(1) { background: #38BDF8; }
.sl-dots span:nth-child(2) { background: #818CF8; animation-delay: .2s; }
.sl-dots span:nth-child(3) { background: #8B5CF6; animation-delay: .4s; }

.sl-status {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary, #0F172A);
}
.sl-phrase {
  font-size: 0.8125rem;
  color: var(--text-tertiary, #94A3B8);
  font-style: italic;
  min-height: 1.4em;
  transition: opacity 0.4s ease;
}

@keyframes slFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slDotBounce {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.2); }
}
@keyframes slLogoShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes slSpin {
  to { transform: rotate(360deg); }
}