/* BOTZ LIVE — painel público da Home. Isolado em .botz-live para não afetar
   menus, rankings ou outros componentes compartilhados. */

.botz-live {
  --bz-bg: #050b14;
  --bz-panel: #081321;
  --bz-panel-2: #0a1929;
  --bz-line: rgba(71, 180, 225, 0.2);
  --bz-cyan: #53d3ff;
  --bz-green: #31efa0;
  --bz-green-rgb: 49, 239, 160;
  --bz-red: #ff527d;
  width: min(500px, 100%);
  margin: 18px auto 0;
  color: #e7f6ff;
  text-align: left;
  border: 1px solid rgba(78, 190, 234, 0.28);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(20, 110, 146, 0.15), transparent 38%),
    linear-gradient(155deg, rgba(8, 21, 35, 0.98), rgba(3, 9, 17, 0.99));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.botz-live *, .botz-live *::before, .botz-live *::after { box-sizing: border-box; }

.botz-live__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bz-line);
  background: linear-gradient(180deg, rgba(12, 31, 50, 0.78), rgba(6, 17, 29, 0.4));
}

.botz-live__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.botz-live__mark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--bz-green);
  border: 1px solid rgba(var(--bz-green-rgb), 0.35);
  border-radius: 10px;
  background: rgba(var(--bz-green-rgb), 0.055);
  box-shadow: inset 0 0 18px rgba(var(--bz-green-rgb), 0.06), 0 0 22px rgba(var(--bz-green-rgb), 0.08);
}
.botz-live__mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.35; opacity: 0.9; }
.botz-live__mark-dot { fill: currentColor; stroke: none; }
.botz-live__eyebrow { color: #75a4bb; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.19em; }
.botz-live h2 { margin: 3px 0 1px; color: #fff; font-size: clamp(20px, 2vw, 24px); line-height: 1; letter-spacing: 0.035em; }
.botz-live h2 span { color: var(--bz-green); text-shadow: 0 0 20px rgba(var(--bz-green-rgb), 0.32); }

.botz-live__controls { display: flex; align-items: center; align-self: flex-start; flex: 0 0 auto; gap: 7px; }
.botz-live__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 5px 9px;
  color: #b6cad4;
  border: 1px solid rgba(160, 188, 201, 0.22);
  border-radius: 999px;
  background: rgba(7, 15, 24, 0.8);
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.11em;
}
.botz-live__badge i { width: 7px; height: 7px; border-radius: 50%; background: #80929b; box-shadow: 0 0 0 4px rgba(128, 146, 155, 0.1); }
.botz-live__badge.is-live { color: var(--bz-green); border-color: rgba(var(--bz-green-rgb), 0.34); background: rgba(var(--bz-green-rgb), 0.06); }
.botz-live__badge.is-live i { background: var(--bz-green); box-shadow: 0 0 0 4px rgba(var(--bz-green-rgb), 0.1), 0 0 14px rgba(var(--bz-green-rgb), 0.8); animation: botzLivePulse 1.5s ease-in-out infinite; }
.botz-live__badge.is-error { color: #ffb66f; border-color: rgba(255, 182, 111, 0.32); }
.botz-live__badge.is-error i { background: #ff9d48; }

.botz-live__sound {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #afc8d6;
  border: 1px solid rgba(107, 169, 197, 0.24);
  border-radius: 50%;
  background: rgba(3, 12, 20, 0.82);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), 0 0 10px rgba(var(--bz-green-rgb), 0.08);
  font: 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.botz-live__sound:hover, .botz-live__sound:focus-visible { color: #fff; border-color: rgba(var(--bz-green-rgb), 0.48); outline: none; }
.botz-live__sound[aria-pressed="true"] { color: var(--bz-green); border-color: rgba(var(--bz-green-rgb), 0.42); }

.botz-live__radar-shell { position: relative; padding: 10px 12px 12px; background: rgba(2, 9, 16, 0.42); }
.botz-live__radar-topline {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 24px;
  color: #66899c;
  font: 700 9px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.09em;
}
.botz-live__radar-topline strong { margin-left: auto; color: #8fb5c8; font-weight: 700; }
.botz-live__legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; vertical-align: 1px; background: #7893a0; }
.botz-live__legend-dot.is-bot { background: var(--bz-green); box-shadow: 0 0 6px rgba(var(--bz-green-rgb), 0.6); }
.botz-live__legend-dot.is-target { width: 7px; height: 7px; border-radius: 1px; background: var(--bz-red); transform: rotate(45deg); }
.botz-live__radar-wrap {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 1;
  margin: 6px auto;
  overflow: hidden;
  border: 1px solid rgba(65, 199, 244, 0.52);
  border-radius: 50%;
  background: #020b12;
  box-shadow: 0 0 0 7px rgba(7, 31, 45, 0.72), 0 0 0 8px rgba(74, 187, 228, 0.12), 0 0 48px rgba(17, 144, 177, 0.14), inset 0 0 55px rgba(0, 0, 0, 0.75);
  isolation: isolate;
}
.botz-live__radar-wrap canvas { display: block; width: 100%; height: 100%; }
.botz-live__radar-vignette { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(98, 218, 255, 0.18); }
.botz-live__radar-empty {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  padding: 6px 10px;
  color: #668898;
  border: 1px solid rgba(92, 139, 159, 0.17);
  border-radius: 6px;
  background: rgba(2, 10, 17, 0.72);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
  pointer-events: none;
}
.botz-live__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--bz-line); border-bottom: 1px solid var(--bz-line); background: var(--bz-line); }
.botz-live__metric { position: relative; min-width: 0; padding: 10px 11px; background: rgba(7, 20, 33, 0.97); text-align: center; }
.botz-live__metric::before { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 1px; background: var(--bz-green); opacity: 0.55; transform: translateX(-50%); }
.botz-live__metric > span { display: block; color: #7191a3; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.13em; }
.botz-live__metric strong { display: block; margin-top: 5px; color: #fff; font: 750 20px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.botz-live__metric small { display: block; margin-top: 4px; color: #557384; font-size: 9px; }
.botz-live__metric.is-changed strong { animation: botzMetricChange 650ms ease-out; }
.botz-live__metric--targets { z-index: 5; cursor: pointer; }
.botz-live__metric--targets:focus-visible { outline: 2px solid rgba(var(--bz-green-rgb), 0.72); outline-offset: -3px; }
.botz-live__target-list {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 1px);
  width: 230px;
  max-width: calc(100vw - 32px);
  padding: 10px 11px;
  color: #b7d0dc;
  border: 1px solid rgba(var(--bz-green-rgb), 0.3);
  border-radius: 10px;
  background: rgba(3, 13, 22, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
.botz-live__metric--targets:hover .botz-live__target-list,
.botz-live__metric--targets:focus-visible .botz-live__target-list,
.botz-live__metric--targets.is-open .botz-live__target-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.botz-live__target-list > span { display: block; margin-bottom: 7px; color: #6f97a9; font: 800 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-align: left; }
.botz-live__target-list ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.botz-live__target-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: center; min-width: 0; color: #dcecf4; font-size: 10px; text-align: left; }
.botz-live__target-list b { color: var(--bz-green); font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.botz-live__target-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.botz-live__target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 11px 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 82, 125, 0.2);
  border-radius: 13px;
  background: linear-gradient(100deg, rgba(255, 82, 125, 0.065), rgba(8, 22, 35, 0.72) 55%);
}
.botz-live__target-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #ff6689; border: 1px solid rgba(255, 82, 125, 0.34); border-radius: 10px; background: radial-gradient(circle, rgba(255, 82, 125, 0.14), rgba(255, 82, 125, 0.035) 68%); box-shadow: inset 0 0 12px rgba(255, 82, 125, 0.045), 0 0 15px rgba(255, 82, 125, 0.08); }
.botz-live__target-icon svg { width: 23px; height: 23px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 82, 125, 0.62)); }
.botz-live__target-icon .botz-live__target-core { fill: #ff8aa5; stroke: none; filter: drop-shadow(0 0 3px rgba(255, 82, 125, 0.9)); }
.botz-live__target-copy { min-width: 0; }
.botz-live__target-copy > span { display: block; color: #b4778a; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.13em; }
.botz-live__target-copy strong { display: block; overflow: hidden; margin-top: 4px; color: #f4fbff; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.botz-live__target-copy small { display: block; margin-top: 4px; color: #718e9d; font-size: 11px; }
.botz-live__target-state { display: grid; justify-items: center; }
.botz-live__target-status { max-width: 150px; padding: 6px 7px; color: #8ba6b3; border: 1px solid rgba(118, 156, 174, 0.2); border-radius: 6px; font: 800 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; text-align: center; }
.botz-live__target-status.is-active { color: var(--bz-green); border-color: rgba(var(--bz-green-rgb), 0.3); background: rgba(var(--bz-green-rgb), 0.05); }
.botz-live__target-status.is-alert { color: #ff7898; border-color: rgba(255, 82, 125, 0.35); background: rgba(255, 82, 125, 0.06); }

.botz-live__activities { margin: 14px 20px 0; padding: 14px 18px; border: 1px solid var(--bz-line); border-radius: 12px; background: rgba(5, 15, 25, 0.56); }
.botz-live__activities h3 { margin: 0 0 9px; color: #8aa9b9; font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.11em; text-transform: uppercase; }
.botz-live__activities ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.botz-live__activities li { color: #8aa2ae; font-size: 11px; }

.botz-live__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  margin: 11px 12px 12px;
  padding: 16px 17px;
  border: 1px solid rgba(72, 229, 168, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 18%, rgba(49, 239, 160, 0.13), transparent 36%),
    linear-gradient(120deg, rgba(8, 38, 43, 0.96), rgba(6, 20, 32, 0.94) 58%, rgba(11, 39, 54, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 34px rgba(0, 0, 0, 0.2);
}
.botz-live__cta::before { position: absolute; z-index: -1; top: 0; right: 13%; left: 13%; height: 1px; background: linear-gradient(90deg, transparent, rgba(91, 255, 190, 0.8), rgba(83, 211, 255, 0.7), transparent); content: ""; }
.botz-live__cta::after { position: absolute; z-index: -1; right: -52px; bottom: -72px; width: 170px; height: 170px; border-radius: 50%; background: rgba(83, 211, 255, 0.07); filter: blur(4px); content: ""; }
.botz-live__cta-copy { min-width: 0; max-width: 242px; }
.botz-live__cta-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #7be9ff; font: 850 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; }
.botz-live__cta-mark { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; color: var(--bz-green); border: 1px solid rgba(var(--bz-green-rgb), 0.32); border-radius: 9px; background: rgba(var(--bz-green-rgb), 0.075); box-shadow: inset 0 0 12px rgba(var(--bz-green-rgb), 0.06), 0 0 15px rgba(var(--bz-green-rgb), 0.08); }
.botz-live__cta-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.botz-live__cta h3 { margin: 0 0 5px; color: #f1fbff; font-size: 14px; font-weight: 760; line-height: 1.22; letter-spacing: -0.01em; }
.botz-live__cta p { margin: 0; color: #8aa5b2; font-size: 10.5px; line-height: 1.4; }
.botz-live__cta-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; min-width: 174px; min-height: 48px; padding: 12px 12px 12px 15px; color: #021811; border: 1px solid #75ffc3; border-radius: 11px; background: linear-gradient(135deg, #70ffc1, #34d99b 66%, #42c8d8); box-shadow: 0 10px 28px rgba(var(--bz-green-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.52); font: 850 12px/1.15 system-ui, sans-serif; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; }
.botz-live__cta-button span:last-child { display: grid; place-items: center; width: 23px; height: 23px; color: #eafff7; border-radius: 7px; background: rgba(2, 24, 17, 0.7); font-size: 13px; transition: transform 160ms ease; }
.botz-live__cta-button:hover { color: #021811; filter: saturate(1.08) brightness(1.04); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--bz-green-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.58); }
.botz-live__cta-button:hover span:last-child { transform: translate(1px, -1px); }
.botz-live__cta-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes botzLivePulse { 50% { opacity: 0.5; transform: scale(0.72); } }
@keyframes botzMetricChange { 0% { color: var(--bz-green); text-shadow: 0 0 18px rgba(var(--bz-green-rgb), 0.7); } 100% { color: #fff; text-shadow: none; } }

@media (max-width: 720px) {
  .botz-live { border-radius: 16px; }
  .botz-live__header { align-items: flex-start; padding: 14px 14px 12px; }
  .botz-live__mark { flex-basis: 46px; width: 46px; height: 46px; border-radius: 12px; }
  .botz-live__mark svg { width: 32px; height: 32px; }
  .botz-live__radar-shell { padding: 14px; }
  .botz-live__radar-wrap { width: min(420px, calc(100% - 16px)); }
  .botz-live__target, .botz-live__activities, .botz-live__cta { margin-left: 14px; margin-right: 14px; }
  .botz-live__cta { padding: 18px; }
}

@media (max-width: 540px) {
  .botz-live__header { gap: 8px; }
  .botz-live__radar-topline { gap: 9px; }
  .botz-live__radar-topline span { font-size: 0; }
  .botz-live__radar-topline span::after { font-size: 8px; }
  .botz-live__radar-topline span:nth-child(1)::after { content: "BOTZ"; }
  .botz-live__radar-topline span:nth-child(2)::after { content: "ALVO"; }
  .botz-live__legend-dot { margin-right: 4px; }
  .botz-live__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .botz-live__metric { min-height: 82px; padding: 13px 5px 10px; text-align: center; }
  .botz-live__metric > span { min-height: 22px; font-size: 8px; line-height: 1.3; }
  .botz-live__metric strong { margin-top: 5px; font-size: 19px; }
  .botz-live__metric small { display: none; }
  .botz-live__target { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .botz-live__target-state { grid-column: 2; justify-items: start; margin-top: -2px; }
  .botz-live__target-copy strong { white-space: normal; }
  .botz-live__cta { align-items: stretch; flex-direction: column; gap: 15px; }
  .botz-live__cta-copy { max-width: none; }
  .botz-live__cta-button { width: 100%; }
}

@media (max-width: 390px) {
  .botz-live__identity { gap: 10px; }
  .botz-live__mark { flex-basis: 42px; width: 42px; height: 42px; }
  .botz-live h2 { font-size: 21px; }
  .botz-live__badge { padding-inline: 7px; font-size: 8px; letter-spacing: 0.07em; }
  .botz-live__radar-wrap { width: calc(100% - 14px); }
  .botz-live__radar-topline strong { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .botz-live *, .botz-live *::before, .botz-live *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}