/* =========================================================
   CONEXAO NEURAL — o botao de fone do modo Livro (neural.js).
   Mesma linguagem visual da estante: fundo de mesa, borda cor de madeira,
   mono pros rotulos. O unico azul do sistema mora aqui, no arco de onda do
   fone (#5CC8F0) e no brilho de "ligado" — de proposito: e o sinal de que
   tem um som rodando, e nao se confunde com o laranja de acao.
   ========================================================= */
:root{ --nn-azul:#5CC8F0; }

/* ---------- o grupo no cabecalho: fone + ▾ ---------- */
.nn-grupo{position:relative;display:inline-flex;align-items:stretch;gap:0}
.nn-grupo .nn-bt-fone{display:inline-flex;align-items:center;gap:7px;
  border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0;
  /* a arte e grande de proposito (legivel a distancia): o padding de cima e de
     baixo encolhe pra o botao nao ficar mais alto que os vizinhos do cabecalho */
  padding:1px 11px}
/* o icone oficial (arte/botoes/neural-*.png). Quem manda no tamanho e aqui. */
.nn-ic{width:26px;height:26px;flex:none;display:block;object-fit:contain;
  opacity:.94;-webkit-user-select:none;user-select:none;
  transition:opacity .25s ease,filter .25s ease}
.nn-bt-fone:hover .nn-ic{opacity:1}
.nn-bt-fone .nn-rot{font-variant-numeric:tabular-nums}
.nn-mais{font-family:var(--mono);font-size:10px;line-height:1;background:none;color:var(--muted);
  border:1px solid var(--line);border-left:1px solid var(--line);border-radius:0 99px 99px 0;
  padding:0 9px;cursor:pointer}
.nn-mais:hover{border-color:var(--lar);color:var(--creme)}
.nn-bt-fone[disabled]{opacity:.45;cursor:default}

/* ligado: brilho azul pulsando devagar (um "respiro", nao um blink) */
.nn-bt-fone.on{border-color:var(--nn-azul);color:#DFF4FD;animation:nn-respira 5.2s ease-in-out infinite}
.nn-bt-fone.on .nn-ic{opacity:1;filter:drop-shadow(0 0 6px rgba(92,200,240,.55))}
@keyframes nn-respira{
  0%,100%{box-shadow:0 0 0 0 rgba(92,200,240,0); background:rgba(92,200,240,.06)}
  50%    {box-shadow:0 0 14px 1px rgba(92,200,240,.30); background:rgba(92,200,240,.14)}
}
/* quem pediu menos movimento na tela nao leva pulso nenhum */
@media (prefers-reduced-motion:reduce){ .nn-bt-fone.on{animation:none;box-shadow:0 0 10px rgba(92,200,240,.25)} }

/* ---------- painelzinho: volume + "o que e isso?" ----------
   position:fixed, com left/top calculados no neural.js a partir do botao. E de
   proposito: no celular deitado o cabecalho vira um trilho com overflow:auto, e
   um painel absolute nascia DENTRO dele e sumia recortado. Fixed escapa disso. */
.nn-menu{position:fixed;z-index:150;min-width:186px;
  display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,#16110c,#100c08);border:1px solid #4a3822;border-radius:12px;
  padding:10px 11px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.nn-menu{min-width:208px}
.nn-linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.nn-rot{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.nn-pct{font-family:var(--mono);font-size:12px;color:#DFF4FD;font-variant-numeric:tabular-nums}

/* ---------- o cursor de volume (0 a 100) ----------
   --nn-f e a porcentagem, escrita pelo neural.js: o trecho ja percorrido fica
   azul e o resto apagado, entao a propria trilha ja mostra o nivel. */
.nn-faixa{--nn-f:60%;-webkit-appearance:none;appearance:none;width:100%;height:20px;
  background:none;cursor:pointer;margin:0}
.nn-faixa:focus{outline:none}
.nn-faixa:focus-visible{outline:2px solid var(--nn-azul);outline-offset:3px;border-radius:99px}
/* a trilha: dois navegadores, duas regras — nao da pra juntar num seletor so */
.nn-faixa::-webkit-slider-runnable-track{height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--nn-azul) var(--nn-f),rgba(255,255,255,.14) var(--nn-f))}
.nn-faixa::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.14)}
.nn-faixa::-moz-range-progress{height:5px;border-radius:99px;background:var(--nn-azul)}
/* a bolinha */
.nn-faixa::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-5px;
  border-radius:99px;background:#F4EDE0;border:2px solid var(--nn-azul);box-shadow:0 1px 5px rgba(0,0,0,.55)}
.nn-faixa::-moz-range-thumb{width:15px;height:15px;border-radius:99px;
  background:#F4EDE0;border:2px solid var(--nn-azul);box-shadow:0 1px 5px rgba(0,0,0,.55)}
.nn-faixa:hover::-webkit-slider-thumb,.nn-faixa:active::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(92,200,240,.18)}
.nn-faixa:hover::-moz-range-thumb,.nn-faixa:active::-moz-range-thumb{box-shadow:0 0 0 5px rgba(92,200,240,.18)}

/* "O que é isso?" fecha a aba: linha propria, separada por um fio */
.nn-link{align-self:stretch;text-align:left;background:none;border:0;cursor:pointer;
  border-top:1px solid var(--line);margin-top:2px;padding:8px 0 0;
  font:12px/1.4 Inter,system-ui,sans-serif;color:var(--nn-azul);text-decoration:underline}
.nn-link:hover{color:#DFF4FD}

/* ---------- o balao de explicacao (modal) ---------- */
.nn-camada{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,4,.74);backdrop-filter:blur(4px);overflow:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px))
          calc(16px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px))}
.nn-painel{width:100%;max-width:470px;margin:auto;
  background:linear-gradient(180deg,#16110c,#100c08);border:1px solid #4a3822;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.65);padding:16px 16px 18px}
.nn-painel-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nn-painel-topo h2{margin:0;display:flex;align-items:center;gap:9px;
  font-family:Anton,Impact,sans-serif;font-size:21px;letter-spacing:.04em;color:var(--creme)}
.nn-painel-topo .nn-ic{width:36px;height:36px;opacity:1}
.nn-x{flex:none;width:34px;height:34px;border-radius:99px;border:1px solid var(--line);background:none;
  color:var(--creme);font-size:15px;cursor:pointer}
.nn-x:hover{border-color:var(--lar)}
.nn-p{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:#d6cfc1}
.nn-p.nn-fone{display:flex;gap:8px;font-weight:600;color:#DFF4FD;
  background:rgba(92,200,240,.09);border:1px solid rgba(92,200,240,.35);border-radius:10px;padding:10px 12px}
.nn-p.nn-mini{font-size:11.5px;color:var(--muted)}
/* as duas faixas de onda: lista enxuta, o nome em laranja puxa o olho */
.nn-ondas{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.nn-ondas li{font-size:13px;line-height:1.55;color:#d6cfc1;
  border-left:2px solid var(--lar);padding:2px 0 2px 11px}
.nn-ondas b{color:var(--creme);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.nn-acoes{display:flex;justify-content:flex-end;margin-top:16px}
.nn-bt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;background:none;color:var(--creme);
  border:1px solid var(--line);border-radius:99px;padding:9px 16px;cursor:pointer}
.nn-bt:hover{border-color:var(--lar)}
.nn-bt.forte{background:var(--lar);border-color:var(--lar);color:#0D0D0D;font-weight:700}

/* ---------- celular ---------- */
@media(max-width:560px){
  .nn-painel{padding:13px 13px 15px;border-radius:12px}
  .nn-painel-topo h2{font-size:18px}
  .nn-painel-topo .nn-ic{width:30px;height:30px}
  .nn-p{font-size:13px}
}
/* celular em pe: o cabecalho e apertado — o rotulo sai e fica so o fone (+ ▾) */
@media(max-width:700px){
  .nn-grupo .nn-bt-fone{gap:5px;padding:1px 8px}
  .nn-ic{width:24px;height:24px}
  .nn-bt-fone .nn-rot{display:none}
  .nn-bt-fone.on .nn-rot{display:inline;font-size:9.5px}
  .nn-mais{padding:0 7px}
}
/* celular deitado: .modos vira coluna, o grupo fica inteiro numa linha dela e o
   painelzinho abre PRA DIREITA (abrindo pra baixo, cairia fora do trilho) */
@media(orientation:landscape) and (max-height:520px){
  .nn-grupo{width:100%}
  .nn-grupo .nn-bt-fone{flex:1;justify-content:center}
  .nn-menu{min-width:200px}
  .nn-faixa{height:28px}   /* no toque a bolinha precisa de area, nao de beleza */
  .nn-faixa::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6.5px}
  .nn-faixa::-moz-range-thumb{width:18px;height:18px}
  .nn-camada{align-items:center;padding:8px}
  .nn-painel{margin:auto;max-width:620px}
  .nn-painel-topo h2{font-size:16px}
  .nn-painel-topo .nn-ic{width:26px;height:26px}
  .nn-p{margin-top:8px;font-size:12.5px;line-height:1.5}
  .nn-acoes{margin-top:10px}
}