/* FLOW — Voice Gateway.
 *
 * Usa os tokens de styles/tokens.css e nada mais: nenhuma cor escrita a mao, para
 * o ecra acompanhar o resto da app quando a paleta mudar. O botao de gravar
 * herda as medidas do .lp-rec da landing de proposito — sao o mesmo gesto, e dois
 * botoes de gravar com tamanhos diferentes na mesma app pareceriam dois produtos.
 */


@keyframes vgPulse{0%,100%{box-shadow:0 0 0 0 var(--oDim)}50%{box-shadow:0 0 0 16px transparent}}

/* Um erro de configuracao nao pode aparecer como um toast que passa: e uma coisa
   para ler com calma e ir resolver ao painel da Cloudflare. */
.vg-erro{margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;
  color:var(--txt2);background:var(--card);border:1px solid var(--line2)}

.vg-lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted2);margin:22px 0 10px}

.vg-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:10px}
.vg-card.ilegivel{border-color:var(--line2);opacity:.8}
.vg-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}

/* O projecto detectado e a informacao nova deste ecra: e o unico elemento com
   cor de destaque, para se ver de relance qual e a captura que interessa. */
.vg-proj{font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:99px;
  color:var(--build-accent);background:rgba(79,190,126,.12);border:1px solid rgba(79,190,126,.3)}
.vg-proj.none{color:var(--muted2);background:transparent;border-color:var(--line2)}
.vg-meta{font-size:11px;color:var(--muted2);margin-left:auto}

.vg-t{font-size:13.5px;line-height:1.55;color:var(--txt2);white-space:pre-wrap;word-break:break-word}

/* A regra que decidiu o projecto. Fica sempre visivel e nao atras de um clique:
   uma explicacao que e preciso ir procurar nao e lida, e uma deteccao que nao se
   explica volta a ser magia. */
.vg-why{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:7px;font-style:italic}

.vg-corr{margin-top:8px;font-size:11px;color:var(--muted2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vg-c{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:2px 7px;border-radius:6px;
  background:var(--fill-soft);color:var(--muted);border:1px solid var(--line)}

.vg-acts{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.vg-acts button{font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--muted)}
.vg-acts button:active{transform:scale(.98)}
.vg-send{border-color:transparent!important;background:var(--o-grad)!important;color:var(--o-chip-ink)!important}
.vg-x{color:var(--muted2)!important}
.vg-audio{margin-top:9px}
.vg-audio:empty{margin-top:0}
.vg-carregando{font-size:11.5px;color:var(--muted2)}

/* O prazo do audio esta sempre a vista. Um ficheiro que desaparece sem aviso
   parece uma avaria; com a data escrita, e uma regra. */
.vg-exp{margin-top:8px;font-size:10.5px;color:var(--muted2)}

.vg-foot{margin:26px 0 10px;padding:13px 14px;border-radius:13px;
  background:var(--bg2);border:1px solid var(--line)}
.vg-foot-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:8px}
.vg-foot-t{font-size:12px;color:var(--muted);line-height:1.7;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.vg-uid{font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 8px;border-radius:6px;
  background:var(--fill-soft);color:var(--txt2);border:1px solid var(--line);word-break:break-all}
.vg-copy{font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--muted)}

/* Atalho para o ecra, na landing e no Catalog. */
.vg-entry{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;margin-bottom:12px;
  border-radius:12px;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--line);color:var(--txt2);font-size:13px;font-weight:700}
.vg-entry .s{font-size:11.5px;font-weight:500;color:var(--muted2);margin-left:auto}

/* O bloco de audio dentro do editor de item. Reaproveita .vg-play, .vg-exp e
   .vg-audio do cartao da fila — e o mesmo gesto, e nao ha razao para parecer
   diferente por estar noutro sitio. */
.vg-item-audio .vg-play{font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px;
  cursor:pointer;border:1px solid var(--line2);background:transparent;color:var(--muted)}
.vg-item-audio .vg-play:active{transform:scale(.98)}

/* O numero na entrada para o ecra. Mesma forma do badge do Catalog na barra de
   baixo: e a mesma ideia — ha isto a espera de ti — e nao ha razao para se
   aprender duas vezes. */
.vg-badge{font-size:11px;font-weight:800;min-width:20px;padding:2px 7px;border-radius:99px;
  background:var(--o-grad);color:var(--o-chip-ink);text-align:center}