/* Лоадеры: скелетон (.skeleton + ширины .w-40/.w-70, обёртка .skeleton-box в core.js:skeleton), полоски .meter/.bar,
   @keyframes spin (крутящаяся иконка в .btn[aria-busy] и .notice[role=status]).
   Исправлено при переносе из claude-me: правила .w-40/.w-70 стояли внутри комментария и не действовали. */

.meter { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden;
  border: var(--border-w) solid var(--border); }
.meter i { display: block; height: 100%; background: var(--accent); }
.skeleton { height: 14px; border-radius: var(--r-xs); background: var(--surface-2); margin: 8px 0;
  border: var(--border-w) solid var(--border); }   /* рамка — чтобы заглушка читалась и без анимации (тема «Контраст», reduced-motion) */
.skeleton.w-40 { width: 40%; }
.skeleton.w-70 { width: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { background: linear-gradient(90deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
    animation: shimmer 1.4s var(--ease) infinite; }
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.bar { height: 6px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar i.warm { background: var(--warn); }
.bar i.hot { background: var(--danger); }

@keyframes spin { to { transform: rotate(360deg); } }