/* Customer emotion gauge — horizontal valence meter in the metrics-row.
 *
 * Replaces the previous pill badge. The handle's left% encodes intensity
 * within a label's zone; the gradient bar encodes valence positionally.
 * Active label (via [data-label] on the root) bolds in the scale row and
 * colors the summary dot — single source of truth for "current emotion".
 */

.metrics-row .metric-emotion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.75rem 1rem;
}

/* 6-bucket palette — composed so the bar gradient and the dot/text color
   for any active label come from the same hue ramp. */
.emotion-gauge {
  --c-happy:      #22c55e;
  --c-positive:   #84cc16;
  --c-neutral:    #eab308;
  --c-concerned:  #f59e0b;
  --c-frustrated: #f97316;
  --c-angry:      #ef4444;
  --active: var(--c-neutral);

  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
  font-size: 0.75rem;
}

.emotion-gauge[data-label="happy"]      { --active: var(--c-happy); }
.emotion-gauge[data-label="positive"]   { --active: var(--c-positive); }
.emotion-gauge[data-label="neutral"]    { --active: var(--c-neutral); }
.emotion-gauge[data-label="concerned"]  { --active: var(--c-concerned); }
.emotion-gauge[data-label="frustrated"] { --active: var(--c-frustrated); }
.emotion-gauge[data-label="angry"]      { --active: var(--c-angry); }

.emotion-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.emotion-gauge-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rta-fg3);
}

.emotion-gauge-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--active);
  font-weight: 600;
}

.emotion-gauge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--active);
  flex-shrink: 0;
}

/* The bar uses the 6 palette colors as gradient stops so the handle's
   position on the bar visually matches the active color downstream.
   Axis: worst (angry) on the left → best (happy) on the right. The further
   right the handle sits, the more "good colour" is to its left — i.e. the
   bar reads as "more full = agent is doing well". */
.emotion-gauge-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--c-angry)       0%,
    var(--c-frustrated) 20%,
    var(--c-concerned)  40%,
    var(--c-neutral)    60%,
    var(--c-positive)   80%,
    var(--c-happy)     100%
  );
  transition: background var(--dur-comp) var(--ease);
}

.emotion-gauge-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--active);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: left 250ms ease-out, border-color 250ms ease-out;
}

/* Labels are absolutely positioned at the same percentages as the gauge
   buckets in emotion-badge.js (BUCKET_CENTERS). One source of truth — if
   the bucket centers ever change, update both. */
.emotion-gauge-scale {
  position: relative;
  height: 1em;
  font-size: 0.7rem;
  color: var(--rta-fg3);
}

.emotion-gauge-scale span {
  position: absolute;
  top: 0;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 150ms ease-out, font-weight 150ms ease-out;
}

.emotion-gauge-scale span[data-bucket="frustrated"] { left: 20%; }
.emotion-gauge-scale span[data-bucket="concerned"]  { left: 40%; }
.emotion-gauge-scale span[data-bucket="neutral"]    { left: 60%; }
.emotion-gauge-scale span[data-bucket="positive"]   { left: 80%; }

/* First and last anchor to the bar edges so they don't fall off the
   container at narrow widths (e.g., PiP). */
.emotion-gauge-scale span:first-child {
  left: 0;
  transform: none;
}
.emotion-gauge-scale span:last-child {
  left: auto;
  right: 0;
  transform: none;
}

.emotion-gauge-scale span.is-active {
  color: var(--rta-fg);
  font-weight: 700;
}

/* ---- Empty state -------------------------------------------------------
   Active until the first customer utterance is processed (first
   `customer_emotion` WS frame). JS toggles `.is-empty` and removes
   `data-label`. The bar drains to a flat muted track; the handle hides;
   the summary dot greys out so the gauge clearly reads as "no signal yet"
   rather than "neutral". */
.emotion-gauge.is-empty .emotion-gauge-bar {
  background: var(--rta-rule-strong);
}
.emotion-gauge.is-empty .emotion-gauge-handle {
  opacity: 0;
  pointer-events: none;
}
.emotion-gauge.is-empty .emotion-gauge-dot {
  background: var(--rta-fg3);
}
.emotion-gauge.is-empty .emotion-gauge-summary {
  color: var(--rta-fg3);
}