/* skeleton.css - the "fetching" placeholder used by every page that loads its data with JavaScript
   (personal pages, agent portal, admin tables). Put class "skel" on any element: it shows a shimmering grey block and hides its
   text until your script replaces it with the real content. Add "skel-line" (a text line) or "skel-block" (a card) for sizes.
   Pages that use it:  my-profile (KYC card), agent/*, chat widget.  Reduced-motion users get a static block. */
.skel { position: relative; overflow: hidden; background: rgba(148,163,184,.16); border-radius: 8px; min-height: 1em; color: transparent !important; pointer-events: none; }
.skel * { visibility: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); animation: dsh-skel 1.2s infinite; }
@keyframes dsh-skel { 100% { transform: translateX(100%); } }
.skel-line { height: 14px; margin: 9px 0; } .skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; }
.skel-block { height: 84px; margin: 10px 0; border-radius: 12px; }
.skel-circle { width: 44px; height: 44px; border-radius: 50%; }
.dsh-fetching { display: flex; align-items: center; gap: .6rem; color: var(--text-secondary, #94a3b8); font-size: .85rem; padding: .4rem 0; }
.dsh-fetching::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dsh-spin .8s linear infinite; }
@keyframes dsh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skel::after, .dsh-fetching::before { animation: none; } }