/* cockgit — observa-pergunta.css
   A PERGUNTA do agente na mesa, a demanda PARADA, o "ver tudo" do recado, a busca
   "filme de…", o filme em tela cheia pelo link direto e o "atualizado há X" do topo
   (10/10/2026, #449 — app-observa-pergunta.js, app-observa-demanda.js, app-nova-vivo.js).

   Regras que moram aqui: cor só por token (nova-pecas.css); alvo de 44 px no toque;
   nada pisca; nada empurra a página para o lado (min-width:0, quebra de palavra); a
   rolagem só existe DENTRO do visor do recado — a página continua sem rolagem. */

  /* ---- o card da pergunta: os caminhos do agente, os gestos e a resposta ---- */
  /* a pergunta É o conteúdo: o card ocupa duas colunas da grade (lê-se em menos linhas,
     e o card fica mais baixo — a página não rola). Abaixo de 600 px a grade tem uma
     coluna só, e o card fica nela (span 2 ali criaria rolagem para o lado) */
  @media (min-width:600px){ .pc-grade>.pc-card:has(.ag-pg-bts){grid-column:span 2} }
  .ag-pg-alts,.ag-pg-bts{flex-wrap:wrap}
  .ag-pg-alts{flex-direction:column}
  #nv .ag-pg-alts>.pc-btn{flex:none;width:100%;text-align:left;overflow-wrap:anywhere}
  #nv .pc-btn[data-t="alt"]{border-color:var(--blue);color:var(--ink)}
  #nv .pc-btn[data-t="alt"]:hover{background:color-mix(in oklab,var(--blue) 10%,transparent)}
  /* [20/10] a ENTREVISTA: a recomendada tem a borda cheia; a consequência, em linha própria */
  #nv .pc-btn[data-t="alt"][data-rec]{border-width:2px;font-weight:600}
  /* o toque no selo "N decisões suas": os cards da mesa, com os botões, num visor claro */
  .vz.vz-dec{background:var(--sf2);color:var(--ink);border-color:var(--rule)}
  .vz-dec-c{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;min-width:0}
  /* [#786] a modal de decisão: até 960 px (100% com 16 px de margem no celular), o fechar
     no canto, uma coluna de cards e as OPÇÕES lado a lado em cartões (empilham no celular);
     só o miolo rola, e só se o conteúdo passar da altura */
  .vz.vz-dec{width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding-top:8px}
  .vz.vz-dec .vz-cab{position:relative;padding-right:48px;min-height:44px}
  .vz-dec-c.pc-grade{grid-template-columns:minmax(0,1fr)}
  .vz-dec-c .ag-pg-alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
  .vz-dec-c .ag-pg-alts>.pc-btn{display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
    min-height:44px;height:100%;padding:8px 10px;border-width:1px}
  .vz-dec-c .ag-pg-alts>.pc-btn[data-rec]{border-width:2px}
  .vz-dec-c .pc-card:has(.ag-pg-bts){grid-column:auto}
  .ag-pg-csq{display:block;margin-top:2px;font-size:var(--t-cap);font-weight:400;color:var(--mut)}
  #nv .pc-btn[data-t="livre"]{border-color:var(--rule);color:var(--ink)}
  #nv .pc-btn[data-t="livre"]:hover{background:color-mix(in oklab,var(--rule) 12%,transparent)}
  /* dois por linha; o "Fazer do jeito que achar melhor" (o rótulo longo) tem a linha dele,
     embaixo — o card fica baixo e nenhum rótulo quebra em três */
  #nv .ag-pg-bts>.pc-btn{flex:1 1 calc(50% - 4px)}
  #nv .ag-pg-bts>.pc-btn[data-t="livre"]{order:1;flex-basis:100%}
  .ag-pg-resp{display:flex;flex-direction:column;gap:6px;margin-top:10px;min-width:0}
  .ag-pg-resp>label{font-size:var(--t-cap);color:var(--mut)}
  #nv .ag-pg-resp textarea{box-sizing:border-box;width:100%;min-width:0;min-height:4.8em;padding:8px;
    font:var(--t-dat)/1.4 var(--mono);color:var(--ink);background:var(--sf2);
    border:1px solid var(--rule);border-radius:0;resize:vertical}
  #nv .ag-pg-resp textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
  .ag-pg-resp>.pc-btns{margin-top:0}

  /* ---- [ver tudo]: o recado inteiro no visor — prosa, com as quebras do agente ---- */
  .vz.vz-texto .vz-bloco{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}

  /* ---- a busca "filme de…" (marcação fixa, fora do #nv-ag) ---- */
  /* é uma .pc-tela (os tokens e a largura da aba) sem o respiro de baixo */
  .ag-busca.pc-tela{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
    padding:10px 16px 0;box-sizing:border-box}
  @media (max-width:480px){ .ag-busca.pc-tela{padding:8px 12px 0} }
  .ag-busca>label{font-size:var(--t-cap);color:var(--mut);white-space:nowrap}
  #nv .ag-busca input{flex:1 1 160px;min-width:0;min-height:40px;padding:6px 10px;box-sizing:border-box;
    font:var(--t-dat)/1.3 var(--mono);color:var(--ink);background:var(--sf);
    border:1px solid var(--rule);border-radius:0}
  #nv .ag-busca input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
  #nv .ag-busca>.pc-btn{flex:none;min-height:40px}
  @media (pointer:coarse){ #nv .ag-busca input,#nv .ag-busca>.pc-btn{min-height:44px} }
  .ag-busca-res{position:absolute;z-index:25;top:100%;left:16px;right:16px;max-width:640px;margin:2px 0 0;
    padding:4px 0;list-style:none;background:var(--sf);border:1px solid var(--bd);
    box-shadow:0 8px 24px color-mix(in oklab,var(--ink) 18%,transparent)}
  .ag-busca-res>li{min-width:0}
  #nv .ag-busca-it{display:flex;flex-wrap:wrap;gap:2px 8px;width:100%;min-height:44px;padding:6px 12px;
    text-align:left;background:none;border:0;border-radius:0;color:var(--ink);
    font:var(--t-dat)/1.35 var(--mono);cursor:pointer}
  #nv .ag-busca-it::before,#nv .ag-busca-it::after{content:none}
  #nv .ag-busca-it:hover{background:var(--sf2)}
  #nv .ag-busca-it:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  .ag-busca-it>span{min-width:0;overflow-wrap:anywhere}
  .ag-busca-it>small{flex-basis:100%;color:var(--mut)}
  .ag-busca-msg{padding:8px 12px;color:var(--mut);font-size:var(--t-dat)}
  .ag-busca-st{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* ---- o filme pelo LINK direto: a folha ocupa a tela inteira ---- */
  #nv-drawer.cheia{left:0;right:0;width:100%;border-left:0}
  #nv-drawer.cheia .nv-dr-live{width:100%;max-width:72rem;margin:0 auto;box-sizing:border-box}

  /* ---- "atualizado há X" no topo da /nova (app-nova-vivo.js) — sem piscar ---- */
  .nv-vivo{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    font:var(--t-cap)/1.2 var(--mono);color:var(--mut)}
  .nv-vivo::before{content:"";flex:none;width:7px;height:7px;background:var(--idle)}
  .nv-vivo[data-t="ok"]::before{background:var(--green)}
  .nv-vivo[data-t="warn"]::before{background:var(--amber)}
  .nv-vivo[data-t="warn"]{color:var(--ink)}
  @media (max-width:599.98px){ .nv-vivo-p{display:none} }

  /* ---- o ACEITE no card de começar? (F3, 12/10/2026 — app-observa-aceite.js) ----
     os critérios abrem POR DENTRO do card (sem rolagem da página); cada falta tem as
     respostas prontas, a marcada fica cheia (aria-pressed); nada pisca */
  .ag-ac{display:flex;flex-direction:column;gap:6px;margin-top:8px;min-width:0}
  .ag-ac-lista{margin:0;padding-left:1.4em;font-size:var(--t-dat);line-height:1.45;overflow-wrap:anywhere}
  .ag-ac-lista>li+li{margin-top:4px}
  .ag-ac-falta>p,.ag-ac-sozinha{margin:0;font-size:var(--t-dat);line-height:1.4;overflow-wrap:anywhere}
  .ag-ac-porque{color:var(--mut)}
  .ag-ac-falta>.pc-btns{flex-wrap:wrap;margin-top:4px}
  #nv .ag-ac-op[aria-pressed="true"]{background:color-mix(in oklab,var(--blue) 16%,transparent)}
  .ag-ac-sozinha{color:var(--mut)}

  /* [#786] o topo da janela de decisão: pergunta e contexto em largura total; detalhe recolhido */
  .ag-dec{display:flex;flex-direction:column;gap:8px;min-width:0;width:100%}
  .ag-dec p{margin:0;overflow-wrap:anywhere}
  .ag-dec-p{font-size:var(--t-dat)}
  .ag-dec-t,.ag-dec-l{color:var(--mut)}
  .ag-dec-det>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--blue)}
  .ag-dec-det>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ag-dec-det[open]>p{margin-top:4px}