/* ==========================================================
   JEANUSTRADE — jt-meter.css
   Medidor % (fio · régua · anel). Só tem efeito quando o JS monta
   o estilo escolhido — desligado, nada disto toca no DOM.
   Cores = as 3 dos dígitos: quente (verde) · neutro (branco) · frio (vermelho suave).
   ========================================================== */
.jtm-fio, .jtm-regua, .jtm-anel{ --jtm-c: var(--neutral-tone); }
.jtm-z-quente{ --jtm-c: var(--accent2); }
.jtm-z-frio{ --jtm-c: #ff5c5c; }
.jtm-z-neutro, .jtm-z-nd{ --jtm-c: var(--neutral-tone); }

/* ── 1 · FIO ─────────────────────────────────────────────── */
.jtm-fio{ position: relative; height: 21px; margin: 0 2px 6px; contain: layout paint; --f: 0; --p: 0; }
.jtm-pop{
  position: absolute; top: 0;
  left: clamp(18px, calc(var(--p) * 1%), calc(100% - 18px));
  transform: translateX(-50%);
  font: 800 10px/15px 'Space Grotesk', sans-serif;
  padding: 0 6px; border-radius: 6px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border2); color: var(--jtm-c);
  transition: left .4s cubic-bezier(.22,1,.36,1), color .25s;
}
.jtm-seg{
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--border2);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 2px), transparent calc(5% - 2px) 5%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 2px), transparent calc(5% - 2px) 5%);
}
.jtm-seg i{
  position: absolute; inset: 0; background: var(--jtm-c);
  clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0);
  transition: clip-path .35s cubic-bezier(.22,1,.36,1), background-color .25s;
}

/* ── 2 · RÉGUA ───────────────────────────────────────────── */
#paneDigits.jtm-has-regua{
  display: grid; grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-rows: auto auto auto; align-content: start;
}
#paneDigits.jtm-has-regua > #pctRow{ grid-column: 1; grid-row: 1; }
#paneDigits.jtm-has-regua > #barsWrap{ grid-column: 1; grid-row: 2; }
#paneDigits.jtm-has-regua > #digitRow{ grid-column: 1; grid-row: 3; }
.jtm-regua{
  grid-column: 2; grid-row: 2; align-self: stretch; position: relative;
  contain: layout paint; --f: 0; --p: 0; --zb: 40; --zh: 20;
}
.jtm-rail{ position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 99px; background: var(--border2); overflow: hidden; }
.jtm-rail b{ position: absolute; left: 0; right: 0; bottom: calc(var(--zb) * 1%); height: calc(var(--zh) * 1%); background: var(--muted); opacity: .35; }
.jtm-rail i{
  position: absolute; inset: 0; background: var(--jtm-c);
  transform-origin: bottom; transform: scaleY(var(--f));
  transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .25s;
}
.jtm-regua u{
  position: absolute; left: -3px; width: 12px; height: 4px; border-radius: 2px; margin-bottom: -2px;
  bottom: calc(var(--p) * 1%); background: var(--jtm-c); text-decoration: none;
  transition: bottom .4s cubic-bezier(.22,1,.36,1), background-color .25s;
}
.jtm-regua s{
  position: absolute; left: 13px; margin-bottom: -6px; bottom: calc(var(--p) * 1%);
  font: 800 10px/12px 'Space Grotesk', sans-serif; color: var(--jtm-c); text-decoration: none;
  transition: bottom .4s cubic-bezier(.22,1,.36,1), color .25s;
}

/* ── 3 · ANEL (6b) ───────────────────────────────────────── */
.jt-main-wrap{ position: relative; display: grid; flex: none; }
.jt-dock.jtm-has-ring{ padding-bottom: 10px; }
.jtm-anel{ position: absolute; inset: -4px; pointer-events: none; transition: opacity .3s; }
.jtm-anel svg{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.jtm-anel circle{ fill: none; stroke-width: 3; }
.jtm-anel .t{ stroke: var(--border2); }
.jtm-anel .f{
  stroke: var(--jtm-c); stroke-linecap: round;
  stroke-dasharray: 157.08; stroke-dashoffset: 157.08;
  transition: stroke-dashoffset .4s cubic-bezier(.22,1,.36,1), stroke .25s;
}
.jtm-halo{ position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--jtm-c); opacity: 0; }
.jtm-anel.jtm-z-quente .jtm-halo{ animation: jtm-pulse 1.3s ease-out infinite; }
.jtm-anel.jtm-z-frio .jtm-halo{ animation: jtm-pulse 2.4s ease-out infinite; }
@keyframes jtm-pulse{
  0%{ transform: scale(.92); opacity: .65; }
  100%{ transform: scale(1.3); opacity: 0; }
}
.jtm-badge{
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font: 800 10px/14px 'Space Grotesk', sans-serif; padding: 0 5px; border-radius: 99px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border2); color: var(--jtm-c); transition: color .25s;
}
/* estados do bot (classes que o jtSetMainBtn já põe no dock):
   idle  → anel + halo ("timing" antes de carregar play)
   run   → anel + badge, halo desligado (o bot decide sozinho)
   stopping → anel esbatido, sem halo */
.jt-dock.is-run .jtm-halo, .jt-dock.is-stopping .jtm-halo{ animation: none; opacity: 0; }
.jt-dock.is-stopping .jtm-anel{ opacity: .35; }

/* ── menu do avatar ──────────────────────────────────────── */
.jtm-chips{ display: flex; gap: 6px; padding: 0 4px 10px; flex-wrap: wrap; }
.jtm-chip{
  font: 700 11px/1 'Space Grotesk', sans-serif; padding: 7px 12px; border-radius: 99px;
  background: transparent; color: var(--muted); border: 1px solid var(--border2); cursor: pointer;
}
.jtm-chip.on{ color: var(--accent3); border-color: var(--accent3); }

@media (prefers-reduced-motion: reduce){
  .jtm-pop, .jtm-seg i, .jtm-rail i, .jtm-regua u, .jtm-regua s, .jtm-anel .f{ transition-duration: .01ms !important; }
  .jtm-anel.jtm-z-quente .jtm-halo, .jtm-anel.jtm-z-frio .jtm-halo{ animation: none; opacity: .45; }
}