/* Daily usage chart (usage-chart.js). Series colors are the validated
   categorical slots 1 (blue) and 2 (orange), stepped separately for dark and
   light surfaces; text stays in ink, never series color. */
.usage-chart {
  --usage-ai: #3987e5;
  --usage-code: #d95926;
  --usage-surface: #121317;
  --usage-ink: rgba(255, 255, 255, 0.92);
  --usage-muted: #898781;
  --usage-grid: rgba(255, 255, 255, 0.08);
  --usage-baseline: rgba(255, 255, 255, 0.2);
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--usage-ink);
}

:root[data-theme="light"] .usage-chart {
  --usage-ai: #2a78d6;
  --usage-code: #eb6834;
  --usage-surface: #ffffff;
  --usage-ink: rgba(0, 0, 0, 0.88);
  --usage-muted: #6d6b66;
  --usage-grid: #e1e0d9;
  --usage-baseline: #c3c2b7;
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.015);
}

.usage-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.usage-chart-head strong {
  font-size: 0.82rem;
  font-weight: 650;
}

.usage-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 0.74rem;
  color: var(--usage-muted);
}

.usage-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.usage-chart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--usage-ai);
}

.usage-chart-swatch.is-code {
  background: var(--usage-code);
}

.usage-chart-plot {
  position: relative;
}

.usage-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.usage-chart-grid {
  stroke: var(--usage-grid);
  stroke-width: 1;
}

.usage-chart-baseline {
  stroke: var(--usage-baseline);
  stroke-width: 1;
}

.usage-chart-axis {
  fill: var(--usage-muted);
  font-size: 11px;
  font-family: inherit;
}

.usage-chart-bar.is-ai {
  fill: var(--usage-ai);
}

.usage-chart-bar.is-code {
  fill: var(--usage-code);
}

.usage-chart-highlight {
  fill: currentColor;
  fill-opacity: 0.06;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.usage-chart-hit {
  fill: transparent;
  cursor: default;
  outline: none;
}

.usage-chart-hit:focus-visible {
  stroke: var(--usage-ai);
  stroke-width: 2;
}

.usage-chart-tooltip {
  position: absolute;
  top: -6px;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #1d1e24;
  color: #f2f3f7;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  font-size: 0.74rem;
  pointer-events: none;
  transform: translateY(-100%);
}

.usage-chart-tooltip[hidden] {
  display: none;
}

.usage-chart-tooltip strong {
  font-size: 0.76rem;
  font-weight: 700;
}

.usage-chart-tooltip span {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

:root[data-theme="light"] .usage-chart-tooltip {
  border-color: rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: #14161c;
  box-shadow: 0 10px 28px rgba(20, 40, 70, 0.16);
}

.usage-chart-empty {
  margin: 0;
  padding: 26px 8px;
  color: var(--usage-muted);
  font-size: 0.78rem;
  text-align: center;
}

.usage-chart-table {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Usage insights (usage-insights.js) */
.settings-usage-insights { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.settings-usage-insights[hidden] { display: none; }
.usage-insights-title { margin: 0; font-size: 0.92rem; font-weight: 650; }
.usage-insights-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.usage-insights-bar span { display: block; height: 100%; }
.usage-insights-list, .usage-insights-chats { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
.usage-insights-list li, .usage-insights-chats li { display: flex; align-items: center; gap: 8px; }
.usage-insights-list .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.usage-insights-list .name, .usage-insights-chats .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-insights-list .value, .usage-insights-chats .value { color: rgba(224, 226, 234, 0.62); font-variant-numeric: tabular-nums; }
.settings-usage-insights h4 { margin: 6px 0 0; font-size: 0.84rem; font-weight: 650; color: rgba(224, 226, 234, 0.82); }
.usage-insights-chats { counter-reset: rank; }
.usage-insights-chats li::before { counter-increment: rank; content: counter(rank); width: 18px; color: rgba(224, 226, 234, 0.5); font-size: 0.78rem; }
.usage-insights-tip { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(88, 161, 255, 0.08); color: rgba(224, 230, 246, 0.86); font-size: 0.84rem; line-height: 1.45; }