/* The usage circle (usage-circle.js, docs/design-system.md §6.4, Appendix A)
   and its tooltip (§6.2), for the web Chat's composer. Every class
   starts with lc-, every color is a token. Sizes come from the composer's
   tokens (theme.css's v1 block: --cmp-ctl, --cmp-ring) with the design's
   values as fallbacks; a compact composer (under 480 px) sets them smaller. */
.lc-usage {
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--cmp-ctl, 32px); height: var(--cmp-ctl, 32px); padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--usage-low, var(--dim)); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.lc-usage:hover { background: var(--hover); }
.lc-usage:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lc-usage[data-level="half"] { color: var(--usage-half, var(--accent)); }
.lc-usage[data-level="high"] { color: var(--usage-high, var(--amber)); }
.lc-usage[data-level="full"] { color: var(--usage-full, var(--danger)); }
.lc-usage[data-blocked] { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.lc-usage-ring { display: block; width: var(--cmp-ring, 20px); height: var(--cmp-ring, 20px); transform: rotate(-90deg); overflow: visible; }
.lc-usage-ring circle { fill: none; stroke-width: 3; }
.lc-usage-track { stroke: var(--usage-track, var(--overlay-5)); }
/* Flat (butt) ends, not round: a little use with round caps was a short rounded stub at 12 o'clock that read as a
   loading spinner (the design review of 2026-10-26); flat, any amount reads as a gauge's segment. */
.lc-usage-arc {
  stroke: currentColor; stroke-linecap: butt; stroke-dasharray: 53.41; stroke-dashoffset: 53.41;
  transition: stroke-dashoffset var(--dur-4) var(--ease-out), stroke var(--dur-3) var(--ease-out);
}
/* a new level: one spring pulse; "See usage": two halo pulses */
.lc-usage.lc-bump { animation: lc-usage-bump var(--dur-4) var(--ease-spring, var(--ease-out)); }
@keyframes lc-usage-bump { 50% { transform: scale(1.12); } }
.lc-usage.lc-pointed { animation: lc-usage-point 1.2s var(--ease-out) 2; }
@keyframes lc-usage-point {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  to { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-usage.lc-pointed { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 45%, transparent); }
}

/* the tooltip: 8 px above its control, right-aligned with it (the circle sits at the row's end) */
.lc-tip {
  position: absolute; z-index: var(--z-tooltip, 70); bottom: calc(100% + 8px); right: -6px;
  width: max-content; max-width: 260px; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-row, 10px); background: var(--popover); box-shadow: var(--shadow-md);
  color: var(--dim); font: 400 12px/1.4 var(--font); text-align: left; white-space: normal; letter-spacing: normal;
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.lc-tip.lc-on { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.lc-tip b { display: block; color: var(--text); font-weight: 600; }
.lc-tip span { display: block; }