/* ─────────────────────────────────────────────────────────────────────────────
 * panel.css — painel de status do Kairos G2 no CELULAR (a WebView).
 * Identidade "Instrumento de Fósforo": verde de fósforo sobre preto absoluto,
 * monospace, 3 planos de luz (fantasma → corpo → vivo) ecoando o ui.ts dos óculos.
 * Code Rain sutil só atrás do header. Regra de ouro: um só elemento "vivo" por vez.
 * ───────────────────────────────────────────────────────────────────────────── */

:root {
  --preto: #000000;
  --fantasma: #1f6b3a; /* molduras, labels, timestamps, rodapé, code rain */
  --corpo: #3ddc6b; /* conteúdo que se lê: valores, veredito */
  --vivo: #7cff9e; /* o foco: ● online, latência, REC — um por vez */
  --ambar: #8a6d1f; /* offline/alerta — verde apagado puxado a âmbar, não vermelho */
  --borda: #123524;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--preto);
  color: var(--corpo);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overscroll-behavior: none;
}

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px env(safe-area-inset-bottom, 16px);
}

/* ── Header com Code Rain atrás ─────────────────────────────────────────────── */
.painel-header {
  position: relative;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
}
.painel-header canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  /* dissolve antes de tocar o conteúdo */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
  pointer-events: none;
}
.painel-marca-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.painel-marca {
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--corpo);
  text-shadow: 0 0 6px rgba(124, 255, 158, 0.35);
  line-height: 1;
}
.painel-submarca {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fantasma);
}
.painel-hora {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: var(--fantasma);
}

/* ── Corpo / cards ──────────────────────────────────────────────────────────── */
.painel-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.card {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px 14px;
}
.card-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fantasma);
  margin-bottom: 8px;
}

/* Linha rótulo → valor (com dot leaders sutis) */
.linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  line-height: 1.7;
}
.linha .k {
  color: var(--fantasma);
  white-space: nowrap;
}
.linha .v {
  color: var(--corpo);
  text-align: right;
}
.linha .v.sem {
  color: var(--fantasma);
} /* dado ausente → fantasma, nunca inventa */

/* ── Semáforo de conexão (bloco-rei) ────────────────────────────────────────── */
.semaforo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.semaforo .estado {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  letter-spacing: 1px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fantasma);
  flex: none;
}
.lat {
  font-size: 14px;
  color: var(--fantasma);
}

/* Online = vivo + glow + respiração lenta */
.semaforo.online .dot {
  background: var(--vivo);
  box-shadow: 0 0 8px var(--vivo);
  animation: respira 4s ease-in-out infinite;
}
.semaforo.online .estado {
  color: var(--vivo);
}
.semaforo.online .lat {
  color: var(--corpo);
}
/* Offline = âmbar, glow off */
.semaforo.offline .dot {
  background: var(--ambar);
}
.semaforo.offline .estado {
  color: var(--ambar);
}
.semaforo.checando .estado {
  color: var(--fantasma);
}

@keyframes respira {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Estado do app (espelha os óculos) */
.estado-app {
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--corpo);
}
.estado-app[data-estado='RECORDING'] {
  color: var(--vivo);
  animation: pulso 0.8s ease-in-out infinite;
}
.estado-app[data-estado='THINKING'] {
  color: var(--corpo);
}
.estado-app[data-estado='ERROR'] {
  color: var(--ambar);
}
@keyframes pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Barra de bateria ASCII-like */
.bateria {
  font-variant-numeric: tabular-nums;
}

/* Veredito */
.veredito-txt {
  color: var(--corpo);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.veredito-txt.vazio {
  color: var(--fantasma);
}

/* ── Ações ──────────────────────────────────────────────────────────────────── */
.acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn {
  flex: 1;
  min-width: 120px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--corpo);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 12px 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  border-color: var(--vivo);
  color: var(--vivo);
  box-shadow: 0 0 8px rgba(124, 255, 158, 0.25);
}

/* ── Rodapé ─────────────────────────────────────────────────────────────────── */
.painel-rodape {
  border-top: 1px solid var(--borda);
  padding: 10px 0;
  font-size: 11px;
  color: var(--fantasma);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}