/* vedika-playground-usage-board.css
 *
 * Self-contained styling for the standalone AI Playground usage board
 * (vedika-playground-usage-board.mjs). All custom properties are namespaced
 * --vpu-* so this file never collides with a host page's own tokens; it
 * ships real light/dark values of its own rather than assuming an ambient
 * theme stylesheet is loaded (this module is not wired into a page yet).
 *
 * Palette lineage: card shape/spacing and the chart-1..8 hues are taken from
 * the Xalen UI source's ChartCard/ChartHeader/ChartLegend components
 * (xalen-ui@feat--standalone-20260912/
 * library/runtime-source/ChartCard-459ca6eb7536.js) and its token sheet
 * (library/styles/theme.css: --color-chart-1..8, --color-text-*,
 * --color-background-*, --color-border-*). Xalen keeps the SAME chart hues
 * in light and dark (only track/cursor/neutral shift) — this file mirrors
 * that rather than inventing a separate dark palette.
 */

.vpu-board {
  --vpu-text-primary: #18181b;
  --vpu-text-secondary: #52525b;
  --vpu-text-tertiary: #71717a;
  --vpu-bg-full: #ffffff;
  --vpu-bg-secondary: #f7f7f7;
  --vpu-bg-inner: #ffffff;
  --vpu-border: #ebebeb;
  --vpu-border-focus: #3392ff;
  --vpu-chart-track: #ebebeb;
  --vpu-chart-cursor: #d4d4d8;
  --vpu-chart-1: #2dd4bf; /* teal — server processing time */
  --vpu-chart-2: #a3e635; /* lime — cost */
  --vpu-chart-4: #38bdf8; /* sky — round-trip time */
  --vpu-chart-5: #c084fc; /* purple — tokens */
  --vpu-rose: #f43f5e;
  --vpu-lime: #65a30d;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 350px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--vpu-border);
  border-radius: 20px;
  background: var(--vpu-bg-full);
  color: var(--vpu-text-primary);
  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.vpu-board *,
.vpu-board *::before,
.vpu-board *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
  .vpu-board:not([data-theme="light"]) {
    --vpu-text-primary: #fafafa;
    --vpu-text-secondary: #a1a1aa;
    --vpu-text-tertiary: #71717a;
    --vpu-bg-full: #121212;
    --vpu-bg-secondary: #1c1c1c;
    --vpu-bg-inner: color-mix(in srgb, #262626 60%, transparent);
    --vpu-border: #404040;
    --vpu-chart-track: #262626;
    --vpu-chart-cursor: #404040;
  }
}
.vpu-board[data-theme="dark"] {
  --vpu-text-primary: #fafafa;
  --vpu-text-secondary: #a1a1aa;
  --vpu-text-tertiary: #71717a;
  --vpu-bg-full: #121212;
  --vpu-bg-secondary: #1c1c1c;
  --vpu-bg-inner: color-mix(in srgb, #262626 60%, transparent);
  --vpu-border: #404040;
  --vpu-chart-track: #262626;
  --vpu-chart-cursor: #404040;
}

.vpu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--vpu-border);
}
.vpu-title-wrap { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.vpu-title { font-weight: 600; font-size: 13px; color: var(--vpu-text-primary); white-space: nowrap; }
.vpu-total {
  font-size: 12px;
  color: var(--vpu-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpu-total.vpu-total-value { color: var(--vpu-text-secondary); }

.vpu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--vpu-border);
  border-radius: 8px;
  background: transparent;
  color: var(--vpu-text-secondary);
  cursor: pointer;
}
.vpu-toggle:hover { background: var(--vpu-bg-secondary); }
.vpu-toggle:focus-visible { outline: 2px solid var(--vpu-border-focus); outline-offset: 2px; }
.vpu-toggle-icon {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
}
.vpu-toggle-icon::before {
  content: "";
  position: absolute;
  top: -1.5px;
  bottom: -1.5px;
  left: 4px;
  width: 0;
  border-left: 1.5px solid currentColor;
  transition: transform 180ms ease;
}
.vpu-collapsed .vpu-toggle-icon::before { transform: translateX(2px) scaleX(0.4); }

.vpu-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 260ms cubic-bezier(0.34, 1, 0.64, 1), opacity 180ms ease, padding 260ms ease;
}
.vpu-collapsed .vpu-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.vpu-collapsed { width: 46px; }
.vpu-collapsed .vpu-title,
.vpu-collapsed .vpu-total { display: none; }

.vpu-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: var(--vpu-bg-secondary);
}
.vpu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vpu-card-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--vpu-text-secondary); }

.vpu-legend { display: flex; align-items: center; gap: 10px; }
.vpu-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--vpu-text-secondary); white-space: nowrap; }
.vpu-legend-swatch { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }

.vpu-chart-wrap { position: relative; height: 64px; }
.vpu-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vpu-bar { rx: 1.5; }
.vpu-bar-unreported { fill: none; stroke: var(--vpu-chart-track); stroke-width: 2; stroke-dasharray: 2 2; }
.vpu-hit { fill: transparent; cursor: pointer; }
.vpu-hit:focus-visible { outline: 1.5px solid var(--vpu-border-focus); outline-offset: -1px; }

.vpu-tooltip {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--vpu-text-primary);
  color: var(--vpu-bg-full);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
  z-index: 2;
}
.vpu-tooltip[hidden] { display: none; }

.vpu-empty {
  margin: 6px 0 2px;
  padding: 10px;
  border: 1px dashed var(--vpu-border);
  border-radius: 10px;
  color: var(--vpu-text-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
}

.vpu-timeline-caption { margin: -4px 0 0; font-size: 11px; color: var(--vpu-text-tertiary); }
.vpu-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vpu-timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--vpu-bg-inner);
  font-size: 12px;
}
.vpu-timeline-label { color: var(--vpu-text-primary); }
.vpu-timeline-time { color: var(--vpu-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Narrower than ~700px, a right-hand rail no longer makes sense: the board
 * becomes a full-width block and collapsing hides the charts in place
 * instead of shrinking to a 46px sliver (which would be unreadable and
 * pointless to keep visible at phone width). */
@media (max-width: 700px) {
  .vpu-board { width: 100%; }
  .vpu-collapsed { width: 100%; }
  .vpu-collapsed .vpu-title,
  .vpu-collapsed .vpu-total { display: flex; }
  .vpu-body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vpu-board { transition: none; }
  .vpu-body { transition: none; }
  .vpu-toggle-icon::before { transition: none; }
}
.vpu-board.vpu-no-motion,
.vpu-board.vpu-no-motion .vpu-body,
.vpu-board.vpu-no-motion .vpu-toggle-icon::before { transition: none; }