.usage-dropdown { position: relative; }
body .chat-header .chat-title {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.025em;
}
body .chat-header .usage-dropdown #credit-count { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.chat-header:has(.usage-dropdown[open]) { z-index: 500; overflow: visible; }
.usage-panel { pointer-events: auto; }
.usage-retry { margin-top: 8px; padding: 5px 9px; border: 1px solid currentColor; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.usage-retry[hidden] { display: none; }
body .chat-header #open-memory-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--conversation-ink);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}
body .chat-header #open-memory-quick-btn svg { color: var(--conversation-muted); flex-shrink: 0; }
body .chat-header #open-memory-quick-btn:hover { background: var(--conversation-bubble); }
body .chat-header #open-memory-quick-btn:focus-visible { outline: 2px solid #8fa8c6; outline-offset: 3px; }
body .chat-header .usage-dropdown > .credit-counter {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--conversation-ink);
  box-shadow: none;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.usage-dropdown summary::-webkit-details-marker { display: none; }
body .chat-header .usage-dropdown > .credit-counter:hover,
body .chat-header .usage-dropdown[open] > .credit-counter { background: var(--conversation-bubble); }
body .chat-header .usage-dropdown #credit-count { position: static; font-size: 12px; font-weight: 600; color: var(--conversation-ink); -webkit-text-fill-color: currentColor; background: none; }
.usage-chevron { color: var(--conversation-muted); transition: transform 160ms; }
.usage-dropdown[open] .usage-chevron { transform: rotate(180deg); }
.usage-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 320px; max-width: calc(100vw - 24px); padding: 20px; border: 1px solid #e4e5e9; border-radius: 18px; background: #ffffff; color: #282a30; box-shadow: 0 12px 40px rgba(0,0,0,.12); z-index: 300; }
body.dark-mode .usage-panel { background: #282a30; color: #eceef3; border-color: #3a3d46; box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.usage-panel-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.usage-panel-heading strong { font-size: 14px; font-weight: 600; }
.usage-panel-heading > span { font-size: 11px; color: var(--conversation-muted); }
.usage-section + .usage-section { border-top: 1px solid rgba(128,128,140,.18); margin-top: 18px; padding-top: 18px; }
.usage-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.usage-row strong { font-weight: 550; white-space: nowrap; }
.usage-beta { margin-left: 3px; font-size: 10px; color: var(--conversation-muted); }
.usage-panel progress { appearance: none; display: block; width: 100%; height: 5px; margin: 12px 0 9px; border: 0; border-radius: 99px; overflow: hidden; background: #e5e7ec; color: #7f99b9; }
.usage-panel progress::-webkit-progress-bar { background: #e5e7ec; border-radius: 99px; }
.usage-panel progress::-webkit-progress-value { background: #7f99b9; border-radius: 99px; }
.usage-panel progress::-moz-progress-bar { background: #7f99b9; border-radius: 99px; }
body.dark-mode .usage-panel progress,
body.dark-mode .usage-panel progress::-webkit-progress-bar { background: #424650; }
.usage-panel progress[hidden] { display: none; }
body .usage-panel p.credit-reset,
.usage-panel p { margin: 9px 0 0; color: var(--conversation-muted); font-size: 11px; line-height: 1.6; white-space: normal; }
.usage-plan-link { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(128,128,140,.18); color: inherit; text-decoration: none; font-size: 12px; font-weight: 500; }
.usage-plan-link:hover { text-decoration: underline; }
.usage-dropdown summary:focus-visible,.usage-plan-link:focus-visible { outline: 2px solid #8fa8c6; outline-offset: 3px; }
@media (max-width:600px) { .usage-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 96px); overflow-y: auto; } }
@media (prefers-reduced-motion:reduce) { .usage-chevron { transition: none; } }

.credit-exhausted-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 auto 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 16px;
  color: var(--text-primary, #eee);
  background: var(--message-bg, #252527);
  font-size: 13px;
  line-height: 1.5;
}
.credit-exhausted-notice[hidden] { display: none; }
.credit-exhausted-notice p { margin: 3px 0 0; }
.credit-exhausted-notice a { color: inherit; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .credit-exhausted-notice { align-items: flex-start; flex-direction: column; gap: 8px; } }

.credit-reset-actions { margin-top: 12px; }
.credit-reset-actions[hidden], #claim-free-reset[hidden], #modal-reset-note[hidden], .credit-refill-preview[hidden] { display: none; }
.usage-reset-button { width: 100%; padding: 10px 12px; border: 1px solid rgba(128,128,140,.3); border-radius: 10px; background: var(--conversation-bubble, #f1f3f5); color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.usage-reset-button:hover:not(:disabled) { border-color: #7f99b9; }
.usage-reset-button:disabled, #claim-free-reset:disabled { opacity: .5; cursor: not-allowed; }
.usage-reset-button:focus-visible { outline: 2px solid #8fa8c6; outline-offset: 3px; }
.credit-refill-preview { width: 100%; margin: 16px 0; font-variant-numeric: tabular-nums; }
.credit-refill-preview progress { appearance: none; display: block; width: 100%; height: 7px; border: 0; border-radius: 99px; margin-top: 12px; overflow: hidden; background: #e5e7ec; color: #7f99b9; }
.credit-refill-preview progress::-webkit-progress-bar { background: #e5e7ec; border-radius: 99px; }
.credit-refill-preview progress::-webkit-progress-value { background: #7f99b9; border-radius: 99px; }
.credit-refill-preview progress::-moz-progress-bar { background: #7f99b9; border-radius: 99px; }
#modal-reset-note, #modal-reset-status { font-size: 12px; line-height: 1.6; }
#usage-credit-value, #modal-credit-value { font-variant-numeric: tabular-nums; }
#usage-reset-status:empty, #modal-reset-status:empty { display: none; }