/* ======================== */
/* FF — Skeleton Loading    */
/* Premium shimmer loaders  */
/* ======================== */

/* ── Base Shimmer Animation ── */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: var(--r-sm, 12px);
  position: relative;
  overflow: hidden;
}

:root {
  --skeleton-base: rgba(0, 0, 0, 0.06);
  --skeleton-shine: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  --skeleton-base: rgba(255, 255, 255, 0.06);
  --skeleton-shine: rgba(255, 255, 255, 0.12);
}

[data-theme="telegram"] {
  --skeleton-base: rgba(255, 255, 255, 0.04);
  --skeleton-shine: rgba(255, 255, 255, 0.08);
}

/* ── Skeleton Shapes ── */
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; border-radius: 6px; }
.skeleton-avatar { border-radius: 50%; flex-shrink: 0; }
.skeleton-thumbnail { width: 100%; border-radius: var(--r-md, 20px); }
.skeleton-button { border-radius: var(--r-full, 9999px); }
.skeleton-circle { border-radius: 50%; }

/* ── Feed Post Skeleton ── */
.skeleton-post {
  padding: 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.skeleton-post-header {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: center;
}

.skeleton-post-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.skeleton-post-actions {
  display: flex;
  gap: 12px;
}

/* ── Chat List Skeleton ── */
.skeleton-chat-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
}

.skeleton-chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-chat-content-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Profile Skeleton ── */
.skeleton-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  gap: 12px;
}

.skeleton-profile-stats {
  display: flex;
  gap: 32px;
  margin-top: 12px;
}

.skeleton-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ── Story Row Skeleton ── */
.skeleton-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
}

/* ── Notification Skeleton ── */
.skeleton-notification {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.skeleton-notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Group Card Skeleton ── */
.skeleton-group-card {
  padding: 16px;
  border-radius: var(--r-md, 20px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: center;
}

.skeleton-group-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Discover Card Skeleton ── */
.skeleton-discover-card {
  padding: 16px;
  border-radius: var(--r-md, 20px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Connection Status Banner ── */
.connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
  transition: transform 0.3s var(--ease-spring), opacity 0.3s;
  transform: translateY(-100%);
  opacity: 0;
}

.connection-banner.visible {
  transform: translateY(0);
  opacity: 1;
}

.connection-banner.connecting {
  background: linear-gradient(90deg, #f59e0b, #f97316);
  color: white;
}

.connection-banner.error {
  background: linear-gradient(90deg, #ef4444, #f97316);
  color: white;
}

.connection-banner.offline {
  background: linear-gradient(90deg, #6b7280, #9ca3af);
  color: white;
}

.connection-banner.connected {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: white;
}

/* ── Skeleton Builder Helpers ── */
.skeleton-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.skeleton-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Animation delay for staggered loading */
.skeleton-stagger > *:nth-child(1) { animation-delay: 0s; }
.skeleton-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.skeleton-stagger > *:nth-child(3) { animation-delay: 0.2s; }
.skeleton-stagger > *:nth-child(4) { animation-delay: 0.3s; }
.skeleton-stagger > *:nth-child(5) { animation-delay: 0.4s; }

/* ── Empty State Improvements ── */
.empty-state-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.empty-state-modern .empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: pulse-glow 2s ease-in-out infinite;
}

.empty-state-modern h3 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}

.empty-state-modern p {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.empty-state-modern .btn {
  min-width: 160px;
}

/* ── Error State ── */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.error-state .error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-state h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.error-state p {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 300px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.error-state .btn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}