/* Zero-balance notice: a small card in the bottom corner, above the content and below dialogs. Never modal. */
.credit-notice { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(360px, calc(100% - 32px)); }
.credit-notice[hidden] { display: none; }
.credit-notice-card { position: relative; padding: 18px 18px 16px; border: 1px solid #3a3346; border-radius: var(--radius, 12px); background: #1c1924; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); color: var(--text); }
.credit-notice-card h2 { margin: 0 34px 6px 0; font: 500 16px/1.3 var(--display); letter-spacing: -.01em; }
.credit-notice-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.credit-notice-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; }
.credit-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.credit-notice-actions .button { min-height: 40px; }
/* On a phone the open panel and its generate button sit at the bottom: the notice goes under the top bar, beside the rail. */
@media (max-width: 760px) {
  .credit-notice { top: 70px; right: 8px; bottom: auto; left: calc(var(--rail-offset, 82px) + 4px); width: auto; }
  .credit-notice-actions .button { flex: 1 1 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .credit-notice-card { animation: credit-notice-in .22s var(--ease, ease-out); }
  @keyframes credit-notice-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}