/* ChatFlirt Skeleton Loading Screens */
@keyframes skeleton-shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #1A1A25 25%, #252535 50%, #1A1A25 75%);
  background-size: 2000px 100%;
  animation: skeleton-shimmer 1.8s infinite linear;
  border-radius: 8px;
}

.skeleton-circle { border-radius: 50%; }
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-text.sm { height: 0.75em; width: 60%; }
.skeleton-text.lg { height: 1.5em; }
.skeleton-avatar { width: 48px; height: 48px; flex-shrink: 0; }
.skeleton-card {
  background: #12121A; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 1.5rem;
}
.skeleton-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.skeleton-lines { flex: 1; }

/* Skeleton profile card */
.skeleton-profile-card .skeleton-avatar { width: 80px; height: 80px; }
.skeleton-profile-card .skeleton-name { height: 1.2em; width: 40%; margin-bottom: 0.5rem; }
.skeleton-profile-card .skeleton-sub { height: 0.85em; width: 25%; }

/* Discover page skeleton */
.skeleton-discover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .skeleton-discover-grid { grid-template-columns: repeat(3, 1fr); } }
.skeleton-discover-card { aspect-ratio: 3/4; border-radius: 16px; }

/* Chat skeleton */
.skeleton-chat-msg { max-width: 70%; height: 2.5rem; margin-bottom: 0.75rem; border-radius: 12px; }
.skeleton-chat-msg.received { margin-right: auto; border-radius: 4px 12px 12px 12px; }
.skeleton-chat-msg.sent { margin-left: auto; border-radius: 12px 4px 12px 12px; }

/* Empty states */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 2rem; gap: 1rem;
}
.empty-state-icon { font-size: 3rem; opacity: 0.4; }
.empty-state h3 { color: #E8E4EC; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; }
.empty-state p { color: #9B8FA8; font-size: 0.95rem; max-width: 300px; line-height: 1.5; }
.empty-state .empty-cta {
  padding: 0.65rem 1.75rem; background: linear-gradient(135deg, #FF3366, #7C3AED);
  color: white; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: 0.9rem;
  border: none; cursor: pointer; transition: all 0.2s;
}
.empty-state .empty-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }