/* Chart attachments. Series colors are paired: the dark palette is a
 * lighter variant of the same six hues used in light mode. */
.chat-chart {
 --chart-1: #3d6f8f;
 --chart-2: #c56a45;
 --chart-3: #3e7d5b;
 --chart-4: #b7893a;
 --chart-5: #6d5b95;
 --chart-6: #3f7f8c;
 --chart-plot: #f6f7f9;
 --chart-grid: #e2e8f0;
 --chart-axis: #677489;
 --chart-marker: #101729;

 position: relative;
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 12px;
 padding: 12px 12px 10px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--background);
 color: var(--foreground);
}

body[data-color-mode='dark']
 .chat-chart,
body.color-mode-dark .chat-chart {
 --chart-1: #9ec3dc;
 --chart-2: #e7b09a;
 --chart-3: #9ed3b4;
 --chart-4: #e6c98a;
 --chart-5: #cbbfe4;
 --chart-6: #9ed0d6;
 --chart-plot: #14120e;
 --chart-grid: #2c2922;
 --chart-axis: #988b76;
 --chart-marker: #efe8d6;
}

@media (prefers-color-scheme: dark) {
 body[data-color-mode='system']
  .chat-chart,
 body.color-mode-system .chat-chart {
  --chart-1: #9ec3dc;
  --chart-2: #e7b09a;
  --chart-3: #9ed3b4;
  --chart-4: #e6c98a;
  --chart-5: #cbbfe4;
  --chart-6: #9ed0d6;
  --chart-plot: #14120e;
  --chart-grid: #2c2922;
  --chart-axis: #988b76;
  --chart-marker: #efe8d6;
 }
}

.chat-chart-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
}

.chat-chart-heading {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}

.chat-chart-title {
 overflow: hidden;
 font-size: var(--text-sm);
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chat-chart-meta,
.chat-chart-description,
.chat-chart-note,
.chat-chart-status {
 margin: 0;
 color: var(--muted-foreground);
 font-size: var(--text-xs);
}

.chat-chart-description,
.chat-chart-note {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chat-chart-status:empty {
 display: none;
}

.chat-chart-actions {
 display: flex;
 flex-shrink: 0;
 gap: 6px;
}

.chat-chart-download {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 5px 8px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--background);
 color: var(--foreground);
 font: inherit;
 font-size: var(--text-xs);
 font-weight: 650;
 cursor: pointer;
}

.chat-chart-download:hover {
 background: var(--accent);
}

.chat-chart-svg {
 display: block;
 width: 100%;
 height: auto;
}

.chat-chart-svg text {
 fill: var(--chart-axis);
 font-family:
  ui-sans-serif, system-ui, sans-serif;
 font-size: 11px;
}

.chat-chart-plot {
 fill: var(--chart-plot);
}

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

.chat-chart-zero {
 stroke: var(--chart-axis);
 stroke-width: 1;
}

.chat-chart-series-1 {
 fill: var(--chart-1);
 stroke: var(--chart-1);
}

.chat-chart-series-2 {
 fill: var(--chart-2);
 stroke: var(--chart-2);
}

.chat-chart-series-3 {
 fill: var(--chart-3);
 stroke: var(--chart-3);
}

.chat-chart-series-4 {
 fill: var(--chart-4);
 stroke: var(--chart-4);
}

.chat-chart-series-5 {
 fill: var(--chart-5);
 stroke: var(--chart-5);
}

.chat-chart-series-6 {
 fill: var(--chart-6);
 stroke: var(--chart-6);
}

.chat-chart-line {
 fill: none;
 stroke-width: 2.25;
 stroke-linejoin: round;
 stroke-linecap: round;
}

.chat-chart-dot {
 stroke: var(--chart-plot);
 stroke-width: 1.5;
}

.chat-chart-slice {
 stroke: var(--chart-plot);
 stroke-width: 2;
}

.chat-chart-bar:hover,
.chat-chart-slice:hover,
.chat-chart-dot:hover {
 opacity: 0.82;
}

.chat-chart-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 14px;
 margin: 0;
 padding: 0;
 list-style: none;
}

.chat-chart-legend li {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-width: 0;
 color: var(--foreground);
 font-size: var(--text-xs);
}

.chat-chart-swatch {
 width: 9px;
 height: 9px;
 flex-shrink: 0;
 border-radius: 999px;
}

.chat-chart-swatch.chat-chart-series-1 {
 background: var(--chart-1);
}

.chat-chart-swatch.chat-chart-series-2 {
 background: var(--chart-2);
}

.chat-chart-swatch.chat-chart-series-3 {
 background: var(--chart-3);
}

.chat-chart-swatch.chat-chart-series-4 {
 background: var(--chart-4);
}

.chat-chart-swatch.chat-chart-series-5 {
 background: var(--chart-5);
}

.chat-chart-swatch.chat-chart-series-6 {
 background: var(--chart-6);
}

.chat-chart-legend-detail {
 color: var(--muted-foreground);
}

.chat-chart-data {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

@media (max-width: 720px) {
 .chat-chart-header {
  flex-wrap: wrap;
 }

 .chat-chart-title,
 .chat-chart-description,
 .chat-chart-note {
  white-space: normal;
 }
}