/* ════════════════════════════════════════════════════════════════════════════
   css/skeleton.css — the one and only loading system.

   Every fetch in the app shows a skeleton from this file, injected by
   js/skeleton.js (window.Skeleton). There are no other loading indicators:
   no spinners, no "Loading…" text, no per-page shimmer keyframes.

   Structure
     1. Tokens            — theme-aware colors and timing
     2. Core shimmer      — the .sk block every skeleton is built from
     3. Primitives        — shape helpers (circle, pill, field, avatar…)
     4. Layout helpers    — .sk-row / .sk-stack / .sk-group
     5. Action states     — .sk-dots (busy buttons + pull-to-refresh)
     6. Live status       — .sk-live (waiting-for-SMS / live-price dot)

   Templates in js/skeleton.js reuse the real component chrome classes
   (.list-item, .session-card, .acct-card, .smm-card, .notif-item …) so a
   skeleton is pixel-shaped like the data it is replaced by — zero jump.
════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --sk-base: rgba(255, 255, 255, 0.055);
  --sk-hi: rgba(255, 255, 255, 0.13);
  --sk-radius: 6px;
  --sk-speed: 1.5s;
}
[data-theme="light"] {
  --sk-base: rgba(15, 23, 42, 0.07);
  --sk-hi: rgba(15, 23, 42, 0.13);
}

/* ── 2. Core shimmer ───────────────────────────────────────────────────────── */
.sk {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  display: block;
  width: var(--sk-w, 100%);
  height: var(--sk-h, 1rem);
  border-radius: var(--sk-radius);
  background: var(--sk-base);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-hi), transparent);
  animation: sk-sweep var(--sk-speed) infinite;
}
@keyframes sk-sweep {
  100% { transform: translateX(100%); }
}

/* Reduced motion: no sweep — a slow breathe keeps the state readable. */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; opacity: .6; }
  .sk { animation: sk-breathe 2s ease infinite; }
  @keyframes sk-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  .sk-dots i, .sk-live { animation: none !important; }
}

/* ── 3. Primitives ─────────────────────────────────────────────────────────── */
.sk-inline { display: inline-block; vertical-align: middle; }
.sk-circle { border-radius: 50%; }
.sk-pill   { border-radius: 999px; }
.sk-field  { --sk-h: 48px; --sk-radius: 12px; }
/* Full-cover circle for avatar hosts (.avatar-xl, .drawer-avatar — both
   position:relative): fills the host, then textContent wipes it away. */
.sk-avatar-fill { position: absolute; inset: 0; --sk-w: auto; --sk-h: auto; border-radius: 50%; }

/* ── 4. Layout helpers (used by the templates in js/skeleton.js) ───────────── */
.sk-row   { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.sk-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sk-group { display: inline-flex; align-items: center; gap: 8px; }

/* ── 5. Action states — busy buttons and the pull-to-refresh indicator ─────── */
.sk-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sk-dots { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.sk-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: sk-dot 1s ease-in-out infinite;
}
.sk-dots i:nth-child(2) { animation-delay: .15s; }
.sk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sk-dot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-2px); }
}

/* ── 6. Live status dot (waiting for SMS, live prices) ─────────────────────── */
.sk-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  display: inline-block;
  animation: sk-live 1.5s ease infinite;
}
@keyframes sk-live {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}