/* ==================================================================
   AI API Gateway — Shared Chart Engine
   ==================================================================
   One CSS file (paired with aiapi-charts.js) used everywhere a chart
   appears — the public workspace, the full user panel and every
   wp-admin screen. No pie/donut charts exist in this file on purpose.

   Every color is one of the --aiapi-* design tokens (declared on
   .aiapi-panel for the logged-in area, and bridged onto .aiapi-home
   for public pages — see home.css), so every chart automatically
   repaints when the Theme Settings drawer changes preset/dark-mode —
   no chart re-render needed for color.

   Component inventory:
     .aiapi-spark        -> tiny single-line trend chart used inside
                             stat-card / KPI boxes (30-day window)
     .aiapi-linechart     -> full-size line/area chart, 1 or more series
     .aiapi-barchart      -> full-size animated bar chart

   Named accent palette
   ---------------------------------------------------------------
   Seven accents are available everywhere: primary, blue, teal, amber,
   purple, rose, green. A single-series chart picks one explicitly with
   data-aiapi-color="blue" on the host element (defaults to "primary"
   when omitted, so every chart that predates this attribute keeps its
   old look unchanged). A multi-series chart either names every series
   with data-aiapi-colors="blue,rose,green" or is left to cycle through
   the palette above in order automatically — see colorNameFor() in
   aiapi-charts.js.
   ================================================================== */

.aiapi-chartwrap {
	position: relative;
	width: 100%;
}

.aiapi-chartwrap svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.aiapi-chart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 34px;
	color: var(--aiapi-muted-foreground-soft);
	font-size: 11px;
}

/* ------------------------------------------------------------------ */
/* Sparkline — compact single-line 30-day trend, lives inside a stat  */
/* card / KPI tile. Height is set per-context by the host page.       */
/* ------------------------------------------------------------------ */

.aiapi-spark {
	width: 100%;
	height: 30px;
	display: block;
}

.aiapi-spark-path {
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: stroke-dashoffset 1.05s cubic-bezier(.16,.84,.44,1);
}

.aiapi-spark-area {
	opacity: 0;
	transform: scaleY(.82);
	transform-origin: bottom;
	transition: opacity .6s ease, transform .85s cubic-bezier(.16,.84,.44,1);
}

.aiapi-spark-area.is-in {
	opacity: .16;
	transform: scaleY(1);
}

.aiapi-spark-path--primary { stroke: var(--aiapi-primary); }
.aiapi-spark-path--blue    { stroke: var(--aiapi-accent-blue); }
.aiapi-spark-path--teal    { stroke: var(--aiapi-accent-teal); }
.aiapi-spark-path--amber   { stroke: var(--aiapi-accent-amber); }
.aiapi-spark-path--purple  { stroke: var(--aiapi-accent-purple); }
.aiapi-spark-path--rose    { stroke: var(--aiapi-accent-rose); }
.aiapi-spark-path--green   { stroke: var(--aiapi-accent-green); }

.aiapi-spark-area--primary { fill: var(--aiapi-primary); }
.aiapi-spark-area--blue    { fill: var(--aiapi-accent-blue); }
.aiapi-spark-area--teal    { fill: var(--aiapi-accent-teal); }
.aiapi-spark-area--amber   { fill: var(--aiapi-accent-amber); }
.aiapi-spark-area--purple  { fill: var(--aiapi-accent-purple); }
.aiapi-spark-area--rose    { fill: var(--aiapi-accent-rose); }
.aiapi-spark-area--green   { fill: var(--aiapi-accent-green); }

/* ------------------------------------------------------------------ */
/* Full line / area chart — "Usage Overview", "30-day activity", etc. */
/* ------------------------------------------------------------------ */

.aiapi-linechart {
	width: 100%;
	height: 190px;
}

.aiapi-linechart-grid {
	stroke: var(--aiapi-card-border);
	stroke-width: 1;
	stroke-dasharray: 2.2 2.2;
	shape-rendering: crispEdges;
	opacity: .8;
}

.aiapi-linechart-baseline {
    stroke: var(--aiapi-card-border-strong);
    stroke-width: 0.5px;
    shape-rendering: crispEdges;
}

/* ------------------------------------------------------------------ */
/* "Detailed axes" mode (data-aiapi-axes="1") — the per-model          */
/* analytics charts (latency trend, success-rate trend, tokens         */
/* processed). A denser, finer-dashed grid plus real numeric x/y axis  */
/* strips, so these read as a proper instrument panel rather than the  */
/* lighter-weight sparkline-style charts used elsewhere (dashboard,    */
/* wallet), which keep their original three-line grid untouched.       */
/* ------------------------------------------------------------------ */

.aiapi-linechart-grid--fine {
    stroke-width: .5;
    stroke-dasharray: 0.3 0.8;
    opacity: .55;
}

.aiapi-linechart-baseline--top {
	opacity: .55;
}

.aiapi-linechart-yaxis-line {
    stroke: var(--aiapi-accent-purple);
    stroke-width: 0.1px;
    shape-rendering: crispEdges;
    opacity: 1;
}

.aiapi-chartwrap--axes {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aiapi-linechart.aiapi-chartwrap--axes,
.aiapi-barchart.aiapi-chartwrap--axes {
	height: 232px;
}

/* Dense mode's taller, rotated label track (see .aiapi-linechart-
   xaxis--dense above) needs a bit more total height than the single-
   row thinned axis, so the bar-plot area itself doesn't visibly
   shrink to make room for it. */
.aiapi-barchart.aiapi-chartwrap--axes.aiapi-chartwrap--dense-x {
	height: 252px;
}

/* Inner plot box: everything (svg, dots, y-axis strip) is anchored to
   this box instead of the full host, so the reserved left/right gutter
   for the y-axis numbers never throws off a dot's or the hover
   cursor's position — see renderLine()/renderBar() in aiapi-charts.js.

   These "detailed axes" charts plot time left-to-right and are never
   mirrored for RTL (the underlying <svg> viewBox isn't flipped, and
   never should be — a trend line still runs oldest -> newest, left to
   right, on a Persian page exactly like an English one). All of the
   gutter/axis positioning below is therefore deliberately physical
   (left/right), not logical (inline-start/inline-end): on an RTL page,
   inline-start resolves to the visual right, which would pull the
   y-axis numbers away from the axis line the SVG actually draws at
   x:0 (always the visual left) and leave them stranded on the wrong
   side of the chart. */
.aiapi-linechart-plot {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	/* Y-axis gutter. JS (aiapi-charts.js -> applyYAxisGutter) sets
	   --aiapi-yaxis-w on the chart host to fit the widest y label, so
	   long money values (2,000,000) never spill outside the card. */
	padding-left: var(--aiapi-yaxis-w, 34px);
}

.aiapi-linechart-yaxis {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(var(--aiapi-yaxis-w, 34px) - 4px);
	pointer-events: none;
}

.aiapi-linechart-ytick {
	position: absolute;
	left: 0;
	right: 6px;
	transform: translateY(-50%);
	font-size: 11px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--aiapi-muted-foreground-soft, var(--aiapi-muted-foreground));
	white-space: nowrap;
	text-align: right;
	direction: ltr;
}

.aiapi-linechart-xaxis {
	margin-top: 6px;
	padding-left: var(--aiapi-yaxis-w, 34px);
}

.aiapi-linechart-xaxis-track {
	position: relative;
	height: 13px;
}

/* Dense mode (one label per bar, e.g. the hourly "Tokens processed"
   chart) needs more vertical room for the rotated labels, and each
   label is angled + right-anchored at its tick so it reads down-and-
   left from the bar it belongs to without colliding with its
   neighbors — the standard treatment for a categorical axis with more
   labels than horizontal space (same idea used by Chart.js/ECharts). */
.aiapi-linechart-xaxis--dense .aiapi-linechart-xaxis-track {
	height: 34px;
}

.aiapi-linechart-xtick {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	font-size: 11px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--aiapi-muted-foreground-soft, var(--aiapi-muted-foreground));
	white-space: nowrap;
}

/* First / last label: centring them on the plot edges made half of the
   text stick out of the card. Anchor them inward instead. */
.aiapi-linechart-xaxis:not(.aiapi-linechart-xaxis--dense) .aiapi-linechart-xtick.is-first { transform: none; }
.aiapi-linechart-xaxis:not(.aiapi-linechart-xaxis--dense) .aiapi-linechart-xtick.is-last  { transform: translateX(-100%); }

.aiapi-linechart-xaxis--dense .aiapi-linechart-xtick {
	top: 4px;
	font-size: 9px;
	letter-spacing: -.01em;
	/* Pivoted on its own top-left corner — which, with no translateX,
	   sits exactly at the `left: X%` tick position set in JS — so each
	   label hangs straight down-and-right from the bar it belongs to
	   without a compound transform shifting that anchor point. */
	transform-origin: left top;
	transform: rotate(46deg);
}

.aiapi-linechart-path {
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: stroke-dashoffset 1.15s cubic-bezier(.16,.84,.44,1);
}

.aiapi-linechart-area {
	opacity: 0;
	transform: scaleY(.85);
	transform-origin: bottom;
	transition: opacity .65s ease, transform .9s cubic-bezier(.16,.84,.44,1);
}

.aiapi-linechart-area.is-in { opacity: .16; transform: scaleY(1); }

.aiapi-linechart-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px; /* centers the dot on its left/top point */
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--aiapi-card);
	border: 2px solid;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* Named accent variants — shared by the path, area fill, dot border and
   legend swatch of every series, whichever chart it appears in. */
.aiapi-linechart-path--primary, .aiapi-linechart-dot--primary { border-color: var(--aiapi-primary); stroke: var(--aiapi-primary); }
.aiapi-linechart-path--blue,    .aiapi-linechart-dot--blue    { border-color: var(--aiapi-accent-blue); stroke: var(--aiapi-accent-blue); }
.aiapi-linechart-path--teal,    .aiapi-linechart-dot--teal    { border-color: var(--aiapi-accent-teal); stroke: var(--aiapi-accent-teal); }
.aiapi-linechart-path--amber,   .aiapi-linechart-dot--amber   { border-color: var(--aiapi-accent-amber); stroke: var(--aiapi-accent-amber); }
.aiapi-linechart-path--purple,  .aiapi-linechart-dot--purple  { border-color: var(--aiapi-accent-purple); stroke: var(--aiapi-accent-purple); }
.aiapi-linechart-path--rose,    .aiapi-linechart-dot--rose    { border-color: var(--aiapi-accent-rose); stroke: var(--aiapi-accent-rose); }
.aiapi-linechart-path--green,   .aiapi-linechart-dot--green   { border-color: var(--aiapi-accent-green); stroke: var(--aiapi-accent-green); }

.aiapi-linechart-area--primary { fill: var(--aiapi-primary); }
.aiapi-linechart-area--blue    { fill: var(--aiapi-accent-blue); }
.aiapi-linechart-area--teal    { fill: var(--aiapi-accent-teal); }
.aiapi-linechart-area--amber   { fill: var(--aiapi-accent-amber); }
.aiapi-linechart-area--purple  { fill: var(--aiapi-accent-purple); }
.aiapi-linechart-area--rose    { fill: var(--aiapi-accent-rose); }
.aiapi-linechart-area--green   { fill: var(--aiapi-accent-green); }

.aiapi-linechart-hit {
	fill: transparent;
	cursor: crosshair;
}

.aiapi-linechart-cursor {
	stroke: var(--aiapi-card-border-strong);
	stroke-width: 1;
	opacity: 0;
	transition: opacity .12s ease;
	shape-rendering: crispEdges;
}

.aiapi-linechart-cursor.is-visible,
.aiapi-linechart-dot.is-visible { opacity: 1; }

.aiapi-linechart-legend {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 11px;
	font-weight: 600;
	color: var(--aiapi-muted-foreground);
}

.aiapi-linechart-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.aiapi-linechart-legend i {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	display: inline-block;
}

.aiapi-linechart-legend i.aiapi-linechart-swatch--primary { background: var(--aiapi-primary); }
.aiapi-linechart-legend i.aiapi-linechart-swatch--blue    { background: var(--aiapi-accent-blue); }
.aiapi-linechart-legend i.aiapi-linechart-swatch--teal    { background: var(--aiapi-accent-teal); }
.aiapi-linechart-legend i.aiapi-linechart-swatch--amber   { background: var(--aiapi-accent-amber); }
.aiapi-linechart-legend i.aiapi-linechart-swatch--purple  { background: var(--aiapi-accent-purple); }
.aiapi-linechart-legend i.aiapi-linechart-swatch--rose    { background: var(--aiapi-accent-rose); }
.aiapi-linechart-legend i.aiapi-linechart-swatch--green   { background: var(--aiapi-accent-green); }

/* ------------------------------------------------------------------ */
/* Bar chart — animated, gradient-filled, rounded top corners.        */
/* ------------------------------------------------------------------ */

.aiapi-barchart {
	width: 100%;
	height: 190px;
}

.aiapi-barchart-bar {
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .75s cubic-bezier(.16,.84,.44,1);
}

.aiapi-barchart-bar.is-in { transform: scaleY(1); }

.aiapi-barchart-bar-fill { fill: url(#aiapi-bar-grad); }

.aiapi-barchart-grad-stop-a--primary { stop-color: var(--aiapi-primary); stop-opacity: 1; }
.aiapi-barchart-grad-stop-a--blue    { stop-color: var(--aiapi-accent-blue); stop-opacity: 1; }
.aiapi-barchart-grad-stop-a--teal    { stop-color: var(--aiapi-accent-teal); stop-opacity: 1; }
.aiapi-barchart-grad-stop-a--amber   { stop-color: var(--aiapi-accent-amber); stop-opacity: 1; }
.aiapi-barchart-grad-stop-a--purple  { stop-color: var(--aiapi-accent-purple); stop-opacity: 1; }
.aiapi-barchart-grad-stop-a--rose    { stop-color: var(--aiapi-accent-rose); stop-opacity: 1; }
.aiapi-barchart-grad-stop-a--green   { stop-color: var(--aiapi-accent-green); stop-opacity: 1; }

.aiapi-barchart-grad-stop-b--primary { stop-color: var(--aiapi-primary); stop-opacity: .32; }
.aiapi-barchart-grad-stop-b--blue    { stop-color: var(--aiapi-accent-blue); stop-opacity: .32; }
.aiapi-barchart-grad-stop-b--teal    { stop-color: var(--aiapi-accent-teal); stop-opacity: .32; }
.aiapi-barchart-grad-stop-b--amber   { stop-color: var(--aiapi-accent-amber); stop-opacity: .32; }
.aiapi-barchart-grad-stop-b--purple  { stop-color: var(--aiapi-accent-purple); stop-opacity: .32; }
.aiapi-barchart-grad-stop-b--rose    { stop-color: var(--aiapi-accent-rose); stop-opacity: .32; }
.aiapi-barchart-grad-stop-b--green   { stop-color: var(--aiapi-accent-green); stop-opacity: .32; }

.aiapi-barchart-baseline {
    /* Neutral axis line: it used to be hard-coded purple, which clashed
       with every non-purple bar and looked different in dark mode. */
    stroke: var(--aiapi-card-border-strong, var(--aiapi-card-border));
    stroke-width: 0.3;
    shape-rendering: crispEdges;
}

/* ------------------------------------------------------------------ */
/* Shared floating tooltip (line + bar charts)                        */
/* ------------------------------------------------------------------ */

.aiapi-chart-tip {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 20;
	background: var(--aiapi-foreground);
	color: var(--aiapi-card);
	font-size: 11px;
	line-height: 1.5;
	padding: 6px 9px;
	border-radius: var(--aiapi-radius-xs, 6px);
	white-space: nowrap;
	opacity: 0;
	/* Clamped horizontally and flipped vertically in JS (showTip) so the
	   tooltip stays fully visible even when the hovered point sits right
	   at a corner of the chart. */
	transform: translate(-50%, -120%);
	transition: opacity .12s ease;
	box-shadow: var(--aiapi-shadow-sm, 0 4px 12px rgba(0,0,0,.18));
}

/* Not enough room above the point (near the top edge) — render below it instead. */
.aiapi-chart-tip.aiapi-chart-tip--flip {
	transform: translate(-50%, 20%);
}

.aiapi-chart-tip.is-visible { opacity: 1; }
.aiapi-chart-tip b { font-weight: 700; }
.aiapi-chart-tip small { opacity: .7; display: block; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
	.aiapi-spark-path,
	.aiapi-linechart-path,
	.aiapi-spark-area,
	.aiapi-linechart-area,
	.aiapi-barchart-bar {
		transition-duration: .01ms !important;
	}
}

/* ================================================================== */
/* "Pro" line / area chart  (data-aiapi-pro="1")                       */
/* Pixel-accurate SVG + HTML labels. Theme-aware (light/dark/preset)   */
/* because every colour is a --aiapi-* token.                          */
/* ================================================================== */

.aiapi-linechart.aiapi-pc {
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 18px 16px;
	min-width: 0;
}
.aiapi-linechart.aiapi-pc--flush { padding: 14px 0 0; }

/* ---- legend chips ---------------------------------------------------- */
.aiapi-pc-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.aiapi-pc-chip {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	font: inherit;
	font-size: 12px;
	line-height: 1.3;
	color: var(--aiapi-foreground);
	background: var(--aiapi-card);
	border: 1px solid var(--aiapi-card-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.aiapi-pc-chip:hover { border-color: var(--pc); }
.aiapi-pc-chip:focus-visible { outline: none; box-shadow: var(--aiapi-focus-ring); }
.aiapi-pc-chip-dot {
	width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
	background: var(--pc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent);
}
.aiapi-pc-chip-name { font-weight: 700; }
.aiapi-pc-chip-val { color: var(--aiapi-muted-foreground); font-variant-numeric: tabular-nums; }
.aiapi-pc-chip-val small { font-size: 10.5px; }
.aiapi-pc-chip-val b { color: var(--aiapi-foreground); font-weight: 700; }
.aiapi-pc-chip[aria-pressed="false"] { opacity: .5; background: var(--aiapi-muted); }
.aiapi-pc-chip[aria-pressed="false"] .aiapi-pc-chip-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--pc); }
.aiapi-pc-chip[aria-pressed="false"] .aiapi-pc-chip-name { text-decoration: line-through; }

/* ---- stage ------------------------------------------------------------ */
.aiapi-pc-stage {
	position: relative;
	width: 100%;
	direction: ltr;
	outline: none;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.aiapi-pc-stage:focus-visible { border-radius: calc(var(--aiapi-radius, 1rem) * 0.5); box-shadow: var(--aiapi-focus-ring); }
.aiapi-pc-svg { display: block; overflow: visible; }

.aiapi-pc-grid { stroke: var(--aiapi-card-border); stroke-width: 1; stroke-dasharray: 2 5; opacity: .9; shape-rendering: crispEdges; }
.aiapi-pc-base { stroke: var(--aiapi-card-border-strong, var(--aiapi-card-border)); stroke-width: 1; shape-rendering: crispEdges; }

.aiapi-pc-stop { stop-color: var(--pc); }
.aiapi-pc-line {
	fill: none;
	stroke: var(--pc);
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--pc) 28%, transparent));
}

/* latest-value marker */
.aiapi-pc-endpt { fill: var(--aiapi-card); stroke: var(--pc); stroke-width: 2.25; }
.aiapi-pc-pulse {
	fill: var(--pc);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: aiapi-pc-pulse 2.4s ease-out 1.2s infinite;
}
@keyframes aiapi-pc-pulse {
	0%   { transform: scale(1);   opacity: .35; }
	70%  { transform: scale(3.2); opacity: 0; }
	100% { transform: scale(3.2); opacity: 0; }
}

/* crosshair + hover dots */
.aiapi-pc-cross { stroke: var(--aiapi-muted-foreground-soft, var(--aiapi-muted-foreground)); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .12s ease; shape-rendering: crispEdges; pointer-events: none; }
.aiapi-pc-cross.is-on { opacity: .8; }
.aiapi-pc-hdot { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.aiapi-pc-hdot.is-on { opacity: 1; }
.aiapi-pc-halo { fill: var(--pc); opacity: .16; }
.aiapi-pc-dot { fill: var(--aiapi-card); stroke: var(--pc); stroke-width: 2.5; }
.aiapi-pc-hit { fill: transparent; cursor: crosshair; }
.aiapi-pc-stage.is-hover .aiapi-pc-pulse { opacity: 0; animation: none; }

/* y-axis labels */
.aiapi-pc-ylabels { position: absolute; inset: 0; pointer-events: none; }
.aiapi-pc-ytick {
	position: absolute;
	transform: translateY(-50%);
	font-size: 10.5px;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--aiapi-muted-foreground);
}
.aiapi-pc-ytick--l { text-align: right; }
.aiapi-pc-ytick--r { text-align: left; }
/* dual axes: each axis is tinted with the colour of its own series */
.aiapi-pc-legend + .aiapi-pc-stage .aiapi-pc-ytick[style*="--pc"] { color: color-mix(in srgb, var(--pc) 72%, var(--aiapi-muted-foreground)); font-weight: 600; }

/* peak tag */
.aiapi-pc-peak {
	position: absolute;
	padding: 3px 8px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--pc);
	background: var(--aiapi-card);
	border: 1px solid color-mix(in srgb, var(--pc) 35%, var(--aiapi-card-border));
	border-radius: 999px;
	box-shadow: var(--aiapi-shadow-xs);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}
.aiapi-pc-peak.is-on.is-in { opacity: 1; }
.aiapi-pc-stage.is-hover .aiapi-pc-peak.is-on.is-in { opacity: 0; }

.aiapi-pc-emptymsg {
	position: absolute; inset: 0; display: none;
	align-items: center; justify-content: center;
	font-size: 12.5px; color: var(--aiapi-muted-foreground);
	pointer-events: none;
}
.aiapi-pc-emptymsg.is-on { display: flex; }

/* tooltip card */
.aiapi-pc-tip {
	position: absolute;
	z-index: 20;
	min-width: 168px;
	padding: 9px 11px 10px;
	background: var(--aiapi-card);
	color: var(--aiapi-foreground);
	border: 1px solid var(--aiapi-card-border);
	border-radius: calc(var(--aiapi-radius, 1rem) * 0.625);
	box-shadow: var(--aiapi-shadow-md, 0 10px 30px -8px rgba(15, 23, 42, .25));
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity .12s ease, transform .12s ease;
}
.aiapi-pc-tip.is-on { opacity: 1; transform: none; }
.aiapi-pc-tip-h {
	margin-bottom: 6px; padding-bottom: 6px;
	font-size: 11.5px; font-weight: 700;
	color: var(--aiapi-muted-foreground);
	border-bottom: 1px solid var(--aiapi-card-border);
}
.aiapi-pc-tip-r { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.aiapi-pc-tip-r i { width: 8px; height: 8px; border-radius: calc(var(--aiapi-radius, 1rem) * 0.1875); background: var(--pc); flex-shrink: 0; }
.aiapi-pc-tip-r span { color: var(--aiapi-muted-foreground); }
.aiapi-pc-tip-r b { margin-inline-start: auto; padding-inline-start: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aiapi-pc-tip-r em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--aiapi-muted-foreground); font-variant-numeric: tabular-nums; }
.aiapi-pc-tip-r em.is-up { color: var(--aiapi-accent-green, #16a34a); }
.aiapi-pc-tip-r em.is-down { color: var(--aiapi-accent-rose, #e11d48); }

/* x-axis labels */
.aiapi-pc-xaxis { position: relative; height: 16px; direction: ltr; }
.aiapi-pc-xtick {
	position: absolute;
	top: 0;
	font-size: 10.5px;
	line-height: 16px;
	white-space: nowrap;
	color: var(--aiapi-muted-foreground);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	.aiapi-linechart.aiapi-pc { padding: 12px 12px 14px; }
	.aiapi-pc-chip { padding: 5px 10px; }
	.aiapi-pc-chip-val small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.aiapi-pc-pulse { animation: none; }
	.aiapi-pc-tip, .aiapi-pc-peak { transition: none; }
}


/* ------------------------------------------------------------------ */
/* Chart groups placed inside cards (Usage, Overview health, Profile) */
/* ------------------------------------------------------------------ */

.aiapi-ov-health { margin-top: 14px; align-items: stretch; }
.aiapi-ov-health > .aiapi-card-block { margin: 0; min-width: 0; }
.aiapi-ulogs-charts { margin-bottom: 14px; }
.aiapi-mr-chartbox.aiapi-barchart { min-height: 150px; }

@media (max-width: 720px) {
	.aiapi-ov-health { grid-template-columns: 1fr; }
}