/* e'thix — the live balance (W7 usage budgets). Mobile first, RTL by the document's direction (logical properties
   only), the theme's tokens only. The bar's width is the custom property --usage-left, set through the CSSOM by
   usage-live.js (no inline style attribute: the page's CSP). */
.usage-live{display:grid;gap:.6rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--surface,transparent);color:var(--ink)}
.usage-live__head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.usage-live__title{margin:0;font-size:1rem;font-weight:700}
.usage-live__plan{font-size:.85rem;color:var(--muted)}
.usage-live__rows{display:grid;gap:.55rem}
.usage-live__row{display:grid;grid-template-columns:4.5rem 1fr auto;align-items:center;column-gap:.6rem;row-gap:.15rem}
.usage-live__label{font-size:.85rem;color:var(--ink-soft,var(--ink))}
.usage-live__bar{position:relative;block-size:.5rem;border-radius:999px;background:var(--sunken,var(--line));overflow:hidden}
.usage-live__fill{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--usage-left,0%);border-radius:inherit;background:var(--accent-b,var(--gold))}
.usage-live__bar.is-low .usage-live__fill{background:var(--warn,var(--danger))}
.usage-live__pct{font-size:.85rem;font-variant-numeric:tabular-nums;min-inline-size:3ch;text-align:end}
.usage-live__reset{grid-column:2 / -1;font-size:.78rem;color:var(--muted)}
.usage-live__note{margin:.5rem 0 0;font-size:.8rem;color:var(--muted)}
.usage-live--compact .usage-live__note{margin-block-start:.25rem;font-size:.68rem}
/* Beside the composer: one quiet line of three small bars, no titles. */
.usage-live--compact{padding:.35rem .6rem;gap:0;border:0;background:transparent}
.usage-live--compact .usage-live__rows{grid-auto-flow:column;grid-auto-columns:1fr;gap:.6rem}
.usage-live--compact .usage-live__row{grid-template-columns:auto 1fr;column-gap:.35rem}
.usage-live--compact .usage-live__label{font-size:.72rem}
.usage-live--compact .usage-live__pct{grid-column:1 / -1;font-size:.7rem;text-align:start;color:var(--muted)}
.usage-live--compact .usage-live__bar{block-size:.3rem}
/* The honest notice when a request does not fit the balance. */
.usage-notice{display:grid;gap:.35rem;padding:.75rem .9rem;border:1px solid var(--warn,var(--line));border-radius:var(--r-sm,10px);background:var(--surface-2,transparent);color:var(--ink)}
.usage-notice p{margin:0}
.usage-notice__title{font-weight:700}
.usage-notice__detail,.usage-notice__offer{font-size:.9rem;color:var(--ink-soft,var(--ink))}
.usage-notice__use{justify-self:start;min-block-size:44px;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--accent-b,var(--gold));color:var(--on-accent,#fff);font:inherit;cursor:pointer}
.usage-notice__use:focus-visible{outline:2px solid var(--gold-deep,var(--gold));outline-offset:2px}
@media (max-width:640px){
  .usage-live__row{grid-template-columns:3.75rem 1fr auto}
  .usage-live--compact .usage-live__rows{gap:.4rem}
}
@media (max-width:380px){
  .usage-live{padding:.75rem}
  .usage-live--compact .usage-live__label{font-size:.66rem}
}
@media (prefers-reduced-motion:no-preference){
  .usage-live__fill{transition:inline-size var(--t,.25s) ease}
}
/* Integration (chat.js): the notice and the compact bars sit in the composer's wrap, above the form, spaced like its banner. */
.composer-wrap>.usage-refusal,.composer-wrap>.usage-slot{margin-bottom:8px}
/* N20 final: beside a desktop composer each window is ONE line (label, bar, percent): the strip no longer takes a second
   row, so the chat home's last card is not cut under it (01-chat-home-ar-1280). Phones hide the strip (composer-dock.css). */
@media (min-width:641px){
  .usage-live--compact .usage-live__row{grid-template-columns:auto 1fr auto}
  .usage-live--compact .usage-live__pct{grid-column:auto;min-inline-size:0}
  .usage-live--compact .usage-live__note{margin-block-start:.1rem}
}