/* ============================================================
   charts — стили библиотеки графов. Консумят токены экосистемы
   (:root в styles.css): цвет сетки/осей/курсора берётся из
   --border/--text-*, поэтому графики совпадают с UI и с light/dark.
   Цвета серий задаются инлайном (var(--teal) и т. п.) рендерером.
   ============================================================ */

.lc {
  position: relative;
  width: 100%;
  height: 100%;
}

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

/* Сетка — тонкие линии цвета границ. */
.lc-gridline {
  stroke: var(--border, rgba(0, 0, 0, 0.08));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

/* Линия серии: скругления задаёт рендерер, здесь — сглаживание. */
.lc-line {
  vector-effect: non-scaling-stroke;
}

/* Подписи осей. */
.lc-axis-label {
  fill: var(--text-3, #9a9aa0);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
}

/* Подпись видимого временного диапазона сверху графика. */
.lc-range {
  fill: var(--text-2, #6b6b70);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  opacity: 0.85;
}

/* Курсор времени (playhead) — пунктир поверх плота. */
.lc-cursor {
  stroke: var(--text-2, #6b6b70);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.65;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Область видимого окна логов (playhead-регион вместо линии). */
.lc-viewport {
  fill: var(--accent-soft, rgba(0, 122, 255, 0.12));
  stroke: var(--accent, #007aff);
  stroke-opacity: 0.35;
  stroke-width: 1;
  pointer-events: none;
}

/* Метки событий warn/error по времени — тонкие вертикальные линии. Ненавязчивы
   (низкая непрозрачность), но видно, где на графике был инцидент. */
.lc-anno { stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.lc-anno-warn { stroke: var(--orange, #ff9500); }
.lc-anno-error { stroke: var(--red, #ff3b30); opacity: 0.62; }
/* Событие (напр. рестарт агента) — акцентный пунктир. */
.lc-anno-restart { stroke: var(--accent, #007aff); stroke-width: 1.4; stroke-dasharray: 3 2; opacity: 0.7; }

/* Наведение: вертикальная линия + точки на сериях. */
.lc-hover-line { stroke: var(--text-2, #6b6b70); stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.lc-hover-dot { stroke: var(--panel, #fff); stroke-width: 1.5; }

/* Тултип точки (непрозрачный — для читаемости). */
.lc-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--panel, #fff); border: 1px solid var(--border-strong, rgba(0,0,0,0.14));
  border-radius: 8px; box-shadow: var(--shadow, 0 10px 40px rgba(0,0,0,0.1));
  padding: 5px 8px; font-size: 11px; color: var(--text, #111);
  white-space: nowrap; font-family: var(--font, sans-serif);
}
.lc-tt-time { color: var(--text-3, #999); font-family: var(--mono, monospace); font-size: 10px; margin-bottom: 3px; }
.lc-tt-row { display: flex; align-items: center; gap: 5px; line-height: 1.5; }
.lc-tt-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }