/* =========================================================================
   Post-call — Customer Emotion chart card
   Card chrome (surface / border / radius / padding / title) comes from the
   shared .card + .card-padded + .card-title classes; this file only styles
   the SVG chart internals.
   ========================================================================= */

#emotion-chart {
  margin-top: 0.4rem;
}

.emotion-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Cap the visual height on wide screens so the chart doesn't balloon —
     the viewBox aspect (600:220) is the visual target. */
  max-height: 260px;
}

/* Gridlines — faint dashed horizontals per emotion row. */
.emotion-chart-gridline {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.6;
}

/* Y-axis row dots — match the live-call gauge dot size. */
.emotion-chart-row-dot {
  /* fill is set inline per emotion */
}

/* Y-axis labels — uppercase, tight letter-spacing, muted. Mirrors the
   .metric-label / .speaking-label pattern from analytics.css so the chart
   reads as part of the same family. */
.emotion-chart-row-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--text-muted);
  font-family: inherit;
}

/* Segment lines — actual stroke comes from a per-segment linearGradient
   set via the `stroke` attribute on the element. */
.emotion-chart-segment {
  /* stroke set inline via url(#emotion-grad-i) */
}

/* Points — small filled circles. */
.emotion-chart-point {
  /* fill set inline */
}

.emotion-chart-point.is-last {
  /* Subtle pulse so the eye lands on the final emotion. */
  animation: emotionLastPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes emotionLastPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.emotion-chart-point-ring {
  /* stroke set inline */
}

/* X-axis turn labels — same style as Y-axis labels; last turn brightened. */
.emotion-chart-turn-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--text-muted);
  font-family: inherit;
}

.emotion-chart-turn-label.is-last {
  fill: var(--text);
}

/* Empty state — centered muted message when no emotion frames recorded. */
.emotion-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}