/* Persistent usage belongs to the menu bar, never to an app's center pane. */
#appBar .token-meter--topbar {
  position: static;
  flex: 0 1 280px;
  width: clamp(180px, 22vw, 280px);
  min-width: 150px;
  height: 30px;
  margin: 0 0 0 auto;
  padding: 0 10px;
  transform: none;
  display: grid;
  grid-template-columns: auto minmax(32px, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 9px;
  border: 1px solid #273a35;
  border-radius: 8px;
  background: #0a1512;
  pointer-events: auto;
}
#appBar .token-meter__cap {
  writing-mode: horizontal-tb;
  color: #99b0a8;
  font-size: .56rem;
  letter-spacing: .1em;
}
#appBar .token-meter__track {
  width: 100%;
  height: 6px;
  background: #243830;
}
#appBar .token-meter__fill {
  width: 100%;
  height: 100%;
  transform: scaleX(var(--token-usage, 0));
  transform-origin: left center;
  background: #3ee6a0;
  box-shadow: none;
}
#appBar .token-meter__tick { display: none; }
#appBar .token-meter__value {
  color: #cffbe8;
  font-size: .66rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.workspace-page #appBar .app-bar__actions--end { margin-left: 0; }
@media (max-width: 520px) {
  body.workspace-page { --bar-h: 84px; }
  .workspace-page #appBar .app-bar__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 44px 30px;
    gap: 0 8px;
    align-content: center;
  }
  #appBar .brand { grid-column: 1; grid-row: 1; }
  #appBar .workspace-menubar { grid-column: 2; grid-row: 1; }
  #appBar .app-bar__actions--end { grid-column: 3; grid-row: 1; }
  #appBar .token-meter--topbar {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 25px;
    margin: 0;
    background: transparent;
    border-color: #24332e;
  }
}