.chat-credit-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-bg-card);
}
.chat-credit-summary strong { color: var(--color-text); }
.chat-credit-summary span { color: var(--color-text-muted); text-align: right; }
.chat-credit-summary.active { border-color: color-mix(in srgb, var(--color-brand) 38%, var(--color-border)); }
.chat-credit-summary.expired,
.chat-credit-summary.exhausted { background: var(--color-bg-soft); }
.chat-credit-skeleton { display: grid; gap: 8px; margin-top: 12px; }
.chat-credit-skeleton span {
  display: block;
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-bg-soft), var(--color-border), var(--color-bg-soft));
  background-size: 200% 100%;
  animation: chat-credit-loading 1.2s ease-in-out infinite;
}
.chat-credit-skeleton span:last-child { width: 62%; }
.chat-credit-readiness-error { margin-top: 12px; color: var(--color-error); font-size: 14px; }
@keyframes chat-credit-loading { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .chat-credit-skeleton span { animation: none; }
}

@media (max-width: 640px) {
  .chat-credit-summary { flex-direction: column; }
  .chat-credit-summary span { text-align: left; }
}