/* ══════════════════════════════════════════
   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: var(--z-topbar);
  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, var(--slate-100));
  border-top-color: var(--color-accent-sky);
  border-right-color: var(--color-brand-400);
  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: var(--text-xl);
  color: var(--color-text, var(--color-text));
}
.sl-brand-ai {
  background: linear-gradient(135deg, var(--color-accent-sky) 0%, var(--color-brand-400) 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: var(--color-accent-sky); }
.sl-dots span:nth-child(2) { background: var(--color-brand-400); animation-delay: .2s; }
.sl-dots span:nth-child(3) { background: #8b5cf6; animation-delay: .4s; }

.sl-status {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text, var(--color-text));
}
.sl-phrase {
  font-size: var(--text-base);
  color: var(--color-text-subtle, var(--color-text-subtle));
  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); }
}