/* ══════════════════════════════════════════════════════════════════════════
   UI POLISH — Transitions, Dark Mode, Skeleton, Card Animations
══════════════════════════════════════════════════════════════════════════ */

/* ── 1. View transition keyframes ───────────────────────────────────────── */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. Skeleton loading ────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #2A3050 25%, #353D60 50%, #2A3050 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── 3. Stagger card animations ─────────────────────────────────────────── */
.trainer-grid .trainer-card {
  opacity: 0;
  animation: cardEnter .4s cubic-bezier(.4, 0, .2, 1) forwards;
}
.trainer-grid .trainer-card:nth-child(1)  { animation-delay: .05s; }
.trainer-grid .trainer-card:nth-child(2)  { animation-delay: .10s; }
.trainer-grid .trainer-card:nth-child(3)  { animation-delay: .15s; }
.trainer-grid .trainer-card:nth-child(4)  { animation-delay: .20s; }
.trainer-grid .trainer-card:nth-child(5)  { animation-delay: .25s; }
.trainer-grid .trainer-card:nth-child(6)  { animation-delay: .30s; }
.trainer-grid .trainer-card:nth-child(n+7){ animation-delay: .35s; }
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── 4. Dark mode — app is always dark, no light mode ──────────────────── */
/* Legacy data-theme overrides removed — design-tokens.css is the source of truth */

/* Dark mode toggle button */
.btn-dark-toggle {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  transition: background var(--trans), color var(--trans);
}
.btn-dark-toggle:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* ── Component overrides for dark cinematic theme ─────────────────────── */
.ai-chat-panel {
  background: var(--night-card, #2A3050);
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
}
.ai-msg-bot {
  background: var(--night-elevated, #353D60);
  color: var(--cream, #FAFAF6);
}
.ai-msg-bot a { color: var(--emerald-light, #6EE7B7); }
.ai-msg-typing,
.ai-typing { background: var(--night-elevated, #353D60); }
.ai-msg-typing span,
.ai-typing span { background: var(--cream-muted, #A09888); }
.ai-chat-input-wrap { border-top-color: rgba(245, 240, 232, 0.10); }
.ai-chat-input {
  background: var(--night-elevated, #353D60);
  border-color: rgba(245, 240, 232, 0.10);
  color: var(--cream, #FAFAF6);
}
.ai-chat-input:focus { border-color: var(--gold, #C6A44E); }
.modal-panel { background: var(--night, #1E2235); }
.modal-topbar { background: var(--night-card, #2A3050); }
.interest-trainer-chip { background: var(--night-elevated, #353D60); color: var(--cream, #FAFAF6); border-color: rgba(245, 240, 232, 0.10); }

/* ── 5. Category nav active indicator ──────────────────────────────────── */
.cat-tab { position: relative; }
.cat-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 20%; right: 20%;
  height: 2px;
  background: rgba(255,255,255,.6);
  border-radius: 2px;
  animation: slideIn .2s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}