:root {
  /* Good (attention): cyan (hue 180º) */
  --chart-color-good: #00e0ff;
  /* Bad (error): red (hue 0º) */
  --chart-color-bad: #ff2d2d;
  /* Greys */
  --chart-color-grey-dark: #222;
  --chart-color-grey: #888;
  --chart-color-grey-light: #ccc;
  --chart-color-bg: transparent;
  /* Tooltip */
  --chart-tooltip-bg: rgba(0, 0, 0, 0.95); /* Increased opacity */
  --chart-tooltip-text: #ffffff;
  --chart-tooltip-border: #444;
  /* Additional colors for event types */
  --chart-color-warning: #ffd700; /* Yellow/Gold */
  --chart-color-purple: #a0f;    /* Purple */
  --chart-color-green: #0f0;     /* Green */
  --chart-color-orange: #f90;    /* Orange */
  --chart-color-pink: #f0f;      /* Pink */
}

#xp-analytics-chart-area {
  position: relative;
  overflow: hidden;
  transition: height 0.2s ease;
}

.xp-analytics-svg {
  display: block;
  width: 100%;
}

.chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.chart-tooltip-bg {
  fill: var(--chart-tooltip-bg);
  stroke: var(--chart-tooltip-border);
  stroke-width: 1px;
  rx: 4px;
  ry: 4px;
}

.chart-tooltip-text {
  fill: var(--chart-tooltip-text);
  font-size: 12px;
  font-family: monospace; /* For better alignment of separators */
  pointer-events: none;
}

.chart-tooltip tspan {
}

/* Use monospace for separator lines */
.chart-tooltip tspan:nth-child(2),
.chart-tooltip tspan:nth-child(6) {
  font-family: monospace;
  opacity: 0.5;
}