/* ============================================================
   CHARTS — Donut, Line, Bar chart components
   ============================================================ */

/* --- Emotion Layout (donut + line chart side by side) --- */
.emotion-layout { display: flex; gap: 20px; align-items: flex-start; }

.donut-wrap {
  position: relative; flex-shrink: 0;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.donut-svg {
  position: absolute; top: 0; left: 0;
  width: 160px; height: 160px;
}
.donut-center {
  position: relative; z-index: 1;
  text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-center-num   { font-size: 20px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
.donut-center-label { font-size: 10px; color: var(--text3); line-height: 1.2; }

/* --- Legend --- */
.emotion-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.legend-item    { display: flex; align-items: center; gap: 8px; }
.legend-dot     { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-label   { font-size: 12px; color: var(--text2); }
.legend-val     { font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.legend-pct     { font-size: 11px; color: var(--text3); margin-left: auto; }

/* --- Emotion right panel (line chart) --- */
.emotion-right       { flex: 1; min-width: 0; }
.emotion-chart-title { font-size: 12px; color: var(--text3); margin-bottom: 12px; font-weight: 500; }

/* --- Generic chart wrappers --- */
.line-chart-wrap { width: 100%; }
.bar-chart-wrap  { width: 100%; overflow-x: auto; }
.chart-label     { font-size: 11px; color: var(--text3); margin-bottom: 8px; font-weight: 500; }