/* /account/agent — the agent-credit bar.
 *
 * The track is full at the credit the user held right after their last purchase
 * or renewal (AgentCredit#bar_capacity_micros); agent_credit_controller.js sets
 * each segment's share as --agent-credit-width. */

.agent-credit-bar { min-width: 0; }
.agent-credit-bar-track { display: flex; position: relative; height: var(--spacing-8); overflow: hidden; border-radius: var(--corner-radius-xs); background: var(--background-surface-2); }
.agent-credit-bar-segment { height: 100%; width: var(--agent-credit-width, 0%); background: var(--background-hover); }
.agent-credit-bar-segment--promo-trial { background: var(--background-warning); }
.agent-credit-bar-segment--plan-one-time { background: var(--background-surface-1); }
.agent-credit-bar-segment--top-up { background: var(--background-base); }
.agent-credit-bar-estimate, .agent-credit-bar-last-turn { position: absolute; top: 0; bottom: 0; min-width: var(--spacing-2); }
.agent-credit-bar-estimate { width: var(--agent-credit-width, 0%); background: var(--text-primary); opacity: .45; }
.agent-credit-bar-last-turn { right: 0; width: var(--spacing-4); background: var(--text-primary); opacity: .15; }
.agent-credit-bar-copy { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-4); color: var(--text-tertiary); font-size: var(--font-size-12); }
.agent-credit-bar-copy strong, .agent-credit-bar-link { color: var(--text-secondary); }

/* Inside the composer the bar is a thin rule flush on the typing area's top
   edge, with its copy the quiet line above it — no divider, same grey. */
.agent-composer .agent-credit-bar-copy { padding-inline: var(--spacing-12); margin-bottom: var(--spacing-4); }
.agent-composer .agent-credit-bar-track { height: var(--spacing-4); border-radius: 0; background: var(--background-surface-1); }