/* ═══════════════════════════════════════════════════════════════════════
   Live-refresh mini bar — indicatore "quotazioni in aggiornamento".
   Overlay sotto la OHLC bar / perf bar (stessa famiglia visiva), ma a
   differenza loro è CLICCABILE (pointer-events:auto) → click = refresh ora.
   Gestita interamente da js/live-refresh.js. Default hidden.
   ═══════════════════════════════════════════════════════════════════════ */
.live-bar {
  position: absolute; top: 52px; left: 12px; z-index: 11;
  display: flex; align-items: center; gap: 7px;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--border);
  font-family: var(--font-ui); font-size: .8rem;
  color: var(--text-dim);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, background .15s ease;
}
.live-bar[hidden] { display: none; }
.live-bar:hover { border-color: var(--blue); }

.lv-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green);
  animation: lv-pulse 1.8s ease-out infinite;
}
@keyframes lv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(38, 217, 127, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(38, 217, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 217, 127, 0); }
}

.lv-state { font-weight: 700; letter-spacing: .06em; font-size: .72rem; color: var(--green); }
.lv-price { color: var(--text-bright); font-weight: 600; }
.lv-chg   { font-weight: 600; }
.lv-chg.up   { color: var(--green); }
.lv-chg.down { color: var(--red); }
.lv-sep   { color: var(--text-muted); }
.lv-count { color: var(--text-muted); }

/* Refreshing: il pallino accelera, lo stato segnala l'aggiornamento in corso */
.live-bar.refreshing .lv-dot { animation: lv-pulse .6s ease-out infinite; }

/* Mercato chiuso (non 24h, weekend/after-hours): tutto in grigio, niente pulse */
.live-bar.paused .lv-dot   { background: var(--text-muted); animation: none; box-shadow: none; }
.live-bar.paused .lv-state { color: var(--text-muted); }

/* Flash verde a refresh avvenuto (feedback "ho aggiornato") */
.live-bar.flash { animation: lv-flash .9s ease-out; }
@keyframes lv-flash {
  0%   { background: rgba(38, 217, 127, .30); border-color: var(--green); }
  100% { background: rgba(0, 0, 0, .28); }
}