/* VOXORA · modal de feedback (página inicial, Studio e Meus Projetos) — tokens em assets/css/tokens.css */
html.fb-lock{overflow:hidden}
.fb-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(5,7,9,.62);
  opacity:0;transition:opacity .18s ease;font-family:var(--vx-body,Inter,system-ui,sans-serif);color:var(--vx-text,#F1F5F3)}
.fb-overlay[hidden]{display:none}
.fb-overlay.show{opacity:1}
.fb-box{position:relative;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:22px 22px 18px;
  background:var(--vx-surface,#14191D);border:1px solid rgba(165,233,189,.14);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.75);
  transform:translateY(6px);transition:transform .2s ease}
.fb-overlay.show .fb-box{transform:none}
.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fb-top h2{margin:0;font:600 20px/26px var(--vx-display,"Space Grotesk",sans-serif);letter-spacing:-.01em}
.fb-x{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--vx-muted,#93A19A);cursor:pointer}
.fb-x:hover{color:var(--vx-text,#F1F5F3);background:rgba(241,245,243,.05)}
.fb-x svg{width:18px;height:18px}
.fb-form{display:flex;flex-direction:column;gap:14px;margin:0}
.fb-form[hidden]{display:none}
/* tipo */
.fb-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:0;margin:0;padding:0;min-width:0}
.fb-types legend{grid-column:1/-1;padding:0;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--vx-text,#F1F5F3)}
.fb-type{position:relative;display:flex}
.fb-type input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fb-type span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px;padding:6px 8px;border-radius:10px;
  border:1px solid var(--vx-line-strong,rgba(241,245,243,.14));background:#101418;font-size:13px;line-height:1.25;color:#B7C2BD;transition:border-color .15s,background .15s,color .15s}
.fb-type input:hover+span{border-color:rgba(165,233,189,.35)}
.fb-type input:checked+span{border-color:var(--vx-primary,#35D07F);background:var(--vx-primary-soft,rgba(53,208,127,.12));color:var(--vx-text,#F1F5F3)}
.fb-type input:focus-visible+span{outline:2px solid var(--vx-primary,#35D07F);outline-offset:2px}
/* campos */
.fb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-field>label{font-size:13px;font-weight:600}
.fb-opt{font-weight:400;color:var(--vx-muted,#93A19A)}
.fb-field input[type=text],.fb-field input[type=email],.fb-field textarea{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  border:1px solid var(--vx-line-strong,rgba(241,245,243,.14));background:#0F1316;color:var(--vx-text,#F1F5F3);font:400 14px/1.5 var(--vx-body,Inter,system-ui,sans-serif)}
.fb-field textarea{resize:vertical;min-height:96px;max-height:50vh}
.fb-field input::placeholder,.fb-field textarea::placeholder{color:var(--vx-faint,#73807A)}
.fb-field input:focus,.fb-field textarea:focus{outline:none;border-color:var(--vx-primary,#35D07F);box-shadow:0 0 0 3px rgba(53,208,127,.18)}
.fb-field [aria-invalid=true]{border-color:#E07A6A}
.fb-meta{display:flex;justify-content:space-between;gap:10px;min-height:16px;font-size:12px}
.fb-count{margin-left:auto;color:var(--vx-faint,#73807A);font-family:var(--vx-mono,monospace);font-size:11px}
.fb-err{color:#F09A8B}
.fb-err:empty{display:none}
.fb-guide{margin:0;padding:8px 12px 8px 28px;border-radius:10px;background:rgba(241,245,243,.03);border:1px dashed var(--vx-line-strong,rgba(241,245,243,.14));
  font-size:12.5px;line-height:1.6;color:#B7C2BD}
.fb-guide[hidden]{display:none}
.fb-help{margin:0;font-size:12.5px;color:var(--vx-muted,#93A19A)}
/* dados técnicos */
.fb-check{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;cursor:pointer}
.fb-check input{width:16px;height:16px;margin:0;accent-color:var(--vx-primary,#35D07F)}
.fb-diag-list{margin:0;padding:8px 10px;border-radius:8px;background:#0F1316;font:400 11.5px/1.6 var(--vx-mono,monospace);color:var(--vx-faint,#73807A);word-break:break-word}
.fb-diag-list.on{color:#B7C2BD}
/* armadilha antispam: fora da tela e fora do teclado */
.fb-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fb-privacy{margin:0;font-size:12px;line-height:1.55;color:var(--vx-muted,#93A19A)}
.fb-status{flex:1 0 100%;margin:0 0 2px;font-size:13px;line-height:1.5;color:var(--vx-muted,#93A19A)}  /* fica na barra de botões: sempre à vista */
.fb-status:empty{display:none}
.fb-status.err{color:#F09A8B}
/* botões */
.fb-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* botões do formulário sempre à vista, mesmo em telas baixas */
.fb-form .fb-actions{position:sticky;bottom:-18px;margin:0 -22px -18px;padding:12px 22px 18px;background:var(--vx-surface,#14191D);border-top:1px solid var(--vx-line,rgba(241,245,243,.08))}
.fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;font:600 14px/1 var(--vx-body,Inter,system-ui,sans-serif);
  cursor:pointer;white-space:nowrap;border:1px solid var(--vx-line-strong,rgba(241,245,243,.14));background:transparent;color:var(--vx-text,#F1F5F3)}
.fb-btn:hover{border-color:rgba(165,233,189,.35)}
.fb-primary{background:var(--vx-primary,#35D07F);border-color:transparent;color:var(--vx-on-primary,#06140C);min-width:132px}
.fb-primary:hover{background:#4ee08f}
.fb-primary:disabled{opacity:.75;cursor:progress}
.fb-btn:focus-visible,.fb-x:focus-visible,.fb-check input:focus-visible{outline:2px solid var(--vx-primary,#35D07F);outline-offset:2px}
.fb-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(6,20,12,.3);border-top-color:#06140C;animation:fb-spin .8s linear infinite}
.fb-overlay.sending .fb-spin{display:inline-block}
@keyframes fb-spin{to{transform:rotate(360deg)}}
/* sucesso */
.fb-done{text-align:center;padding:14px 4px 4px;outline:none}
.fb-done[hidden]{display:none}
.fb-ok{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--vx-primary-soft,rgba(53,208,127,.12));color:var(--vx-primary,#35D07F)}
.fb-ok svg{width:26px;height:26px}
.fb-done h3{margin:0 0 6px;font:600 20px/26px var(--vx-display,"Space Grotesk",sans-serif)}
.fb-done p{margin:0 0 18px;color:#B7C2BD;font-size:14px;line-height:1.55}
.fb-done .fb-actions{justify-content:center}
/* botão que abre o modal, no estilo de cada página */
.fb-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.footer-nav .fb-link{color:var(--vx-muted,#93A19A);font-size:14px}
.footer-nav .fb-link:hover{color:var(--vx-text,#F1F5F3)}
/* Meus Projetos: no topo em telas largas; no celular o topo não tem espaço, então o botão vai para o fim da página */
.fb-foot{display:none;margin:32px 0 8px;text-align:center}
.fb-foot .fb-link{color:var(--vx-muted,#93A19A);font-size:14px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){#fbOpen{display:none}.fb-foot{display:block}}
.fb-link:focus-visible{outline:2px solid var(--vx-primary,#35D07F);outline-offset:3px;border-radius:4px}
@media (max-width:520px){
  .fb-overlay{padding:0;place-items:end stretch}
  .fb-box{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;padding:18px 16px 16px}
  .fb-types{grid-template-columns:1fr}
  .fb-actions .fb-btn{flex:1}
  .fb-form .fb-actions{bottom:-16px;margin:0 -16px -16px;padding:12px 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .fb-overlay,.fb-box,.fb-type span{transition:none}
  .fb-spin{animation:none;border-top-color:rgba(6,20,12,.3)}
}
