/* Página /responde (13/10): componentes da home (conversa, balões, botões, caixas de título).
   Aqui só: atalhos do topo, busca, grade de respostas, cartões de mensagem e as dúvidas de boato. */

/* Atalhos da página: pílulas como as abas de tema */
.resp-ancoras{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(4px,1vw,12px)}
.resp-ancoras a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.05em;border:2px solid var(--linha);border-radius:999px;background:#fff;color:var(--tinta);font:700 15px/1 var(--texto);font-stretch:88%;text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
@media (hover:hover){.resp-ancoras a:hover{border-color:var(--tinta);background:var(--amarelo)}}

/* Busca: campo grande, 16 px ou mais (o iPhone não dá zoom) */
.resp-busca{display:grid;gap:8px;justify-items:center;width:min(560px,100%)}
.resp-busca label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.resp-busca-campo{display:flex;align-items:center;gap:8px;width:100%}
.resp-busca input{flex:1;min-width:0;min-height:52px;padding:0 1.1em;border:2.5px solid var(--tinta);border-radius:999px;background:#fff;color:var(--tinta);font:600 17px/1 var(--texto);box-shadow:0 3px 0 var(--tinta);appearance:none;-webkit-appearance:none}
.resp-busca input::placeholder{color:#767676;font-weight:500}
.resp-busca input::-webkit-search-cancel-button{display:none}
.resp-busca .mini{flex:none}
.resp-busca .estado{min-height:1.4em}
.resp-busca .estado:empty{display:block}
.resp-vazio{max-width:40ch;padding:18px 0;font-size:17px}

/* Trilhos laterais (iPad e desktop: cada seção cabe numa tela). As respostas usam o .conversas da home (duas linhas que
   rolam juntas); puxar assunto e mensagens prontas usam o mesmo desenho, em uma linha. Setas pela casca, de 700 px em diante. */
.conversas{grid-template-rows:auto;margin-top:0}
/* Duas linhas só em tela alta (iPad grande em pé); nas demais, uma linha cabe com busca e título */
@media (min-height:1300px){.conversas{grid-template-rows:repeat(2,auto)}}
.conversa[hidden]{display:none}
.conversas .conversa .balao-voce{max-width:100%}
.msgs{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,360px);gap:16px;width:calc(100% + 2 * var(--margem));margin:0 calc(-1 * var(--margem));padding:4px var(--margem) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
.msgs::-webkit-scrollbar{display:none}
.msgs>*{min-width:0;scroll-snap-align:start}
@media (min-width:760px){.msgs{grid-auto-columns:clamp(300px,28vw,380px);gap:20px}}

/* Cartões de mensagem (puxar assunto e mensagens prontas): mesmo fundo e sombra das conversas */
.msg{display:flex;flex-direction:column;gap:10px;padding:18px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#f7f3ec url(/assets/nova/fundo-conversa.webp) center top/cover no-repeat;box-shadow:4px 5px 0 var(--tinta)}
.msg h3{margin:0;font:900 clamp(18px,1.6vw,22px)/1.12 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.msg-etq{align-self:flex-start;padding:.24em .55em .2em;background:var(--amarelo);border:2px solid var(--tinta);font:900 14px/1 var(--tit);text-transform:uppercase}
.msg .msg-texto{align-self:stretch;max-width:100%;margin:0;white-space:pre-line;overflow-wrap:anywhere}
.msg-nota{margin:0;font:500 14px/1.4 var(--texto);color:var(--tinta-2)}
.msg-fontes{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.msg .acoes{gap:8px;margin-top:auto}
.msg .acoes .mini{flex:1 1 auto;padding:0 .55em}
@media (max-width:479.98px){.msg{padding:16px 14px}}
.fonte-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 .9em;border:2px solid var(--linha);border-radius:999px;background:#fff;color:var(--tinta-2);font:700 14px/1 var(--texto);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.fonte-pill:hover{border-color:var(--tinta);color:var(--tinta)}}
.resp-puxar .credito a{display:inline-flex;align-items:center;min-height:44px;color:var(--vermelho-t);font-weight:700}

/* Boatos: dúvidas que abrem, uma por assunto */
.resp-duvidas{display:grid;gap:12px;width:min(820px,100%);margin-top:6px}
.duvida{border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.duvida summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:10px 18px;font:800 clamp(16px,1.5vw,19px)/1.25 var(--texto);font-stretch:90%;cursor:pointer;list-style:none}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{content:'+';flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--amarelo);border:2px solid var(--tinta);font:900 20px/1 var(--tit)}
.duvida summary::after{transition:rotate .2s ease}
.duvida[open] summary::after{rotate:45deg}
.duvida-corpo{display:grid;gap:12px;padding:0 18px 18px}
.duvida-corpo p{margin:0;font:500 16px/1.45 var(--texto)}
.duvida-corpo .credito{text-align:left}
.checagem{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.checagem li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:500 16px/1.4 var(--texto)}
.checagem li b{font-weight:800}

/* Densidade pela altura disponível (iPad deitado, notebook, zoom): tudo sai de 100svh, sem faixas fixas.
   Quanto mais baixa a área visível, mais larga a coluna (o texto quebra menos), menor o respiro e o título.
   Texto dos cartões nunca é cortado. 900px é a altura em que o desenho fica no tamanho cheio. */
@media (min-width:700px){
  main>.bloco.resp-lista,main>.bloco.resp-puxar,main>.bloco.resp-prontas,main>.bloco.resp-boato{gap:clamp(8px,1.7svh,18px);padding-block:clamp(12px,2.6svh,34px)}
  .resp-lista .titulo-caixa,.resp-puxar .titulo-caixa,.resp-prontas .titulo-caixa,.resp-boato .titulo-caixa{font-size:clamp(30px,min(5.4vw,8svh,calc(11.3svh - 30px)),72px)}
  .resp-lista .bloco-sub,.resp-puxar .bloco-sub,.resp-prontas .bloco-sub,.resp-boato .bloco-sub{max-width:clamp(46ch,calc(46ch + (800px - 100svh) * 1.4),96ch)}
  .resp-busca{gap:clamp(2px,.6svh,8px)}
  .resp-busca input{min-height:clamp(42px,6svh,52px)}
  .resp-puxar .credito{max-width:none}
  .conversas{grid-auto-columns:clamp(300px,calc(min(28vw,380px) + max(0px,900px - 100svh) * .7),520px);padding-bottom:clamp(4px,1.2svh,14px)}
  .msgs{grid-auto-columns:clamp(300px,calc(min(28vw,380px) + max(0px,900px - 100svh) * .7),520px);padding-bottom:clamp(4px,1.2svh,14px)}
  .conversas .conversa,.msgs .msg{gap:clamp(6px,1.2svh,10px);padding:clamp(10px,2svh,18px)}
}

/* Altura reservada para os trilhos montados por JS (a página não pula quando eles chegam). Sempre um pouco abaixo da
   altura real medida em cada faixa de altura visível, para nunca sobrar vazio embaixo do trilho. */
.conversas{min-height:380px}
[data-publicos]{min-height:350px}
[data-mensagens]{min-height:450px}
@media (max-width:359.98px){.conversas{min-height:500px}[data-publicos]{min-height:415px}[data-mensagens]{min-height:495px}}
@media (min-width:700px){
  .conversas{min-height:clamp(270px,36svh,320px)}
  [data-publicos]{min-height:clamp(240px,34svh,290px)}
  [data-mensagens]{min-height:clamp(310px,42svh,380px)}
}