/* Painel de estatísticas da conexão (stats.js). Fica no canto superior direito do palco. */

.stats-panel {
  --stats-gap: 0.75rem;
  position: absolute; z-index: 2;
  top: var(--stats-gap); right: var(--stats-gap);
  width: 18rem; max-width: calc(100% - 2 * var(--stats-gap));
  /* deixa livre a barra de controles embaixo */
  max-height: calc(100% - var(--stats-gap) - 5.25rem);
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  font: 400 0.8125rem/1.35 var(--font, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  /* mais denso que --glass: o painel é só texto e costuma ficar sobre telas claras */
  background: rgba(13, 19, 46, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px var(--line), 0 16px 40px -12px rgba(0,0,0,0.6);
  transform-origin: top right;
  animation: stats-in 260ms var(--ease-out) both;
}
@keyframes stats-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

.stats-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.375rem 0.375rem 0 0.875rem;
}
.stats-title { font-weight: 600; color: var(--muted); letter-spacing: -0.005em; }
.stats-close {
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease-out;
}
.stats-close:hover { background: rgba(200, 212, 255, 0.12); color: var(--text); }
.stats-close:active { transform: scale(0.92); transition-duration: 60ms; }
.stats-close svg { width: 1rem; height: 1rem; }

.stats-list {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0.875rem 0.625rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 0.75rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 0.75rem), transparent);
  scrollbar-width: thin; scrollbar-color: rgba(200, 212, 255, 0.2) transparent;
}
.stats-empty { margin: 0; padding: 0.25rem 0.875rem 0.875rem; color: var(--muted); }

.stats-block { padding: 0.625rem 0 0.5rem; }
.stats-block + .stats-block { border-top: 1px solid var(--line); }

.stats-head { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.stats-dir { width: 0.875rem; height: 0.875rem; color: var(--muted); }
.stats-block[data-dir="out"] .stats-dir { color: var(--tally); }
.stats-who {
  margin: 0; min-width: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stats-verb { font-weight: 400; color: var(--muted); }

.stats-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem;
  margin: 0.5rem 0 0.5rem;
}
.stats-hero-main { display: grid; gap: 0.125rem; min-width: 0; }
.stats-hero-label { color: var(--muted); font-size: 0.75rem; }
.stats-hero-value {
  font-size: 1.75rem; line-height: 1; font-weight: 650; letter-spacing: -0.03em;
  color: var(--phosphor);
}
.stats-hero-value[data-empty] { color: var(--muted); font-weight: 400; }
.stats-hero-unit { margin-left: 0.2em; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }

/* Caminho: direta ou pelo repasse (TURN). O repasse ganha um tom âmbar, sem alarme. */
.stats-path {
  display: inline-flex; align-items: center; gap: 0.375rem; flex: none;
  max-width: 60%; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: rgba(200, 212, 255, 0.08); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stats-path::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; flex: none;
  background: currentColor; opacity: 0.8;
}
.stats-path[data-kind="direct"] { color: #b8f0d2; background: rgba(110, 220, 160, 0.12); box-shadow: inset 0 0 0 1px rgba(110, 220, 160, 0.22); }
.stats-path[data-kind="relay"]  { color: #ffd9a6; background: rgba(255, 190, 110, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 190, 110, 0.3); }
.stats-path[data-kind="unknown"] { background: none; box-shadow: none; }
.stats-path[data-kind="unknown"]::before, .stats-path[data-kind="off"]::before { display: none; }

.stats-grid {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; row-gap: 0.1875rem;
  margin: 0;
}
.stats-grid dt { color: var(--muted); white-space: nowrap; }
.stats-grid dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.stats-unit { color: var(--muted); }

/* No celular o número do canal ocupa o canto esquerdo: o painel desce e usa a largura toda. */
@media (max-width: 760px) {
  .stats-panel {
    top: 3.5rem; left: var(--stats-gap); width: auto;
    max-height: calc(100% - 3.5rem - 5.25rem);
  }
  .stage:fullscreen .stats-panel { top: var(--stats-gap); max-height: calc(100% - var(--stats-gap) - 5.25rem); }
}

@media (prefers-reduced-transparency: reduce) {
  .stats-panel { background: #18214a; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-panel { animation: none; }
}