/* JARVIS · tema futurista do aplicativo desktop original (ui.py, classe C) aplicado à web/PWA.
   Mesma paleta: azul-noite, ciano #00d4ff, verde #00ff88, âmbar #ffcc00. Sempre escuro. */
:root, :root[data-theme] {
  --bg:#00060a; --fg:#d8f8ff; --muted:#5ab8cc; --card:rgba(1,13,20,.86); --line:#0d3347;
  --acc:#00d4ff; --err:#ff3355; --ok:#00ff88; --ambar:#ffcc00; --ghost:#001f2e; --borda:#1a5c7a;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root { --bg:#00060a; --fg:#d8f8ff; --muted:#5ab8cc; --card:rgba(1,13,20,.86); --line:#0d3347; --acc:#00d4ff; --err:#ff3355; --ok:#00ff88; } }
body {
  background: radial-gradient(ellipse at 50% 0%, #02202e 0%, #00060a 55%) fixed, var(--bg);
  color: var(--fg); font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; letter-spacing:.2px;
}
.top { background: rgba(0,6,10,.85); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.top strong { color: var(--acc); letter-spacing: 3px; text-shadow: 0 0 12px rgba(0,212,255,.6); }
.card { background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0,212,255,.05), 0 0 24px rgba(0,212,255,.05); backdrop-filter: blur(6px); }
h1, h2 { color: var(--acc); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
h1 { font-size: 1.15rem; } h2 { font-size: .9rem; }
input, select { background: #000d14; color: var(--fg); border-color: #0f4060; }
input:focus, select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px rgba(0,212,255,.15); }
button { background: #00121c; color: var(--acc); border: 1px solid var(--borda); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: .8rem; }
button:hover { border-color: var(--acc); box-shadow: 0 0 10px rgba(0,212,255,.25); }
button.link { border: none; box-shadow: none; text-transform: none; letter-spacing: 0; }
button.ghost { background: transparent; color: var(--fg); }
.chat p { background: #000d14; border: 1px solid var(--line); }
.chat p.eu { background: var(--ghost); color: var(--acc); border-color: var(--borda); }
.result { background: #000d14; border-color: var(--line); color: var(--ok); }
#msg { background: var(--card); }
.list li { border-bottom-color: var(--line); }
.qr svg { background: #fff; }

/* ---------- HUD central (anéis do desktop) ---------- */
.hud { position: relative; width: min(62vw, 260px); aspect-ratio: 1; margin: .4rem auto 1rem; }
.hud .anel { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.hud .a1 { border-top-color: var(--acc); border-left-color: rgba(0,212,255,.35); animation: girar 9s linear infinite; box-shadow: 0 0 18px rgba(0,212,255,.25); }
.hud .a2 { inset: 9%; border: 1px dashed rgba(0,212,255,.45); animation: girar 18s linear infinite reverse; }
.hud .a3 { inset: 19%; border-right-color: var(--ambar); border-bottom-color: rgba(255,204,0,.3); animation: girar 6s linear infinite; }
.hud .a4 { inset: 27%; border: 1px solid rgba(0,212,255,.25); }
.hud .nucleo { position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(0,212,255,.35) 0%, rgba(0,60,90,.25) 45%, transparent 70%);
  animation: pulsar 3.2s ease-in-out infinite; }
.hud .nucleo span { color: var(--acc); font-weight: 700; letter-spacing: 3px; font-size: .78rem; text-shadow: 0 0 10px rgba(0,212,255,.8); }
.hud[data-estado="OUVINDO"] .a1, .hud[data-estado="OUVINDO"] .nucleo span { border-top-color: var(--ok); color: var(--ok); }
.hud[data-estado="PENSANDO"] .a1 { animation-duration: 2.2s; }
.hud[data-estado="PENSANDO"] .nucleo span { color: var(--ambar); }
.hud[data-estado="FALANDO"] .nucleo { animation-duration: .9s; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar { 50% { transform: scale(1.08); filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) { .hud * { animation: none !important; } }

/* ---------- dock (pílula de vidro, como no desktop) ---------- */
.top nav { background: linear-gradient(180deg, rgba(2,32,46,.88), rgba(0,13,20,.88)); border: 1px solid rgba(26,120,160,.55); border-radius: 28px; padding: .25rem .6rem; }
.top nav button { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: .74rem; }
.top nav button:hover { color: var(--acc); }
@media (max-width: 640px) {
  .top { backdrop-filter: none; }                 /* senão o dock "fixed" fica preso ao cabeçalho */
  .top nav { position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; z-index: 9; }
  .top nav { width: calc(100% - 20px); flex-wrap: nowrap; justify-content: space-around; overflow-x: auto; gap: 0; padding: .3rem .4rem; }
  .top nav button { font-size: .68rem; letter-spacing: .5px; padding: .45rem .35rem; white-space: nowrap; }
  main { padding-bottom: 5.5rem; }
}

/* ---------- instalação PWA ---------- */
.instalar { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.instalar p { margin: 0; }
.instalar[hidden], [hidden] { display: none !important; }

/* ---------- toque e telas pequenas (17/10/2026) ---------- */
/* Áreas de toque de 44 px (Apple/Google) em aparelhos de toque e telas estreitas; desktop com mouse não muda. */
@media (pointer: coarse), (max-width: 820px) {
  button, input:not([type=checkbox]), select { min-height: 44px; }
  button.link { padding: .55rem .7rem; }
  .top nav button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  input[type=checkbox] { width: 22px; height: 22px; }
  label.inline { min-height: 44px; }
}
/* iPhone em modo aplicativo: barra de status translúcida e cantos arredondados não cobrem o cabeçalho. */
.top { padding-top: max(.8rem, env(safe-area-inset-top)); padding-left: max(1rem, env(safe-area-inset-left));
       padding-right: max(1rem, env(safe-area-inset-right)); }
/* Paisagem baixa (celular deitado): o núcleo encolhe para caber, sem perder o círculo. */
.hud { width: min(62vw, 260px, 42vh); }
@media (max-height: 480px) and (orientation: landscape) {
  .hud { margin: .2rem auto .5rem; }
  main { padding-top: .4rem; }
}
@media (max-width: 640px) {
  .top nav { background: rgba(0,13,20,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }  /* no próprio dock: não prende o "fixed" */
}
.row button { margin-top: 0; }
/* núcleo fora do ar (celular sem rede, proxy sem núcleo): aviso fixo + HUD vermelho */
#conexao { background: #3a1010; color: #ffb4b4; border: 1px solid #ff5a5a; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.hud[data-estado="OFFLINE"] .a1, .hud[data-estado="OFFLINE"] .nucleo span { border-top-color: #ff5a5a; color: #ff5a5a; animation-play-state: paused; }