/* A página da cidadã no celular (dev 5): a mensagem inteira num balão só e a legenda numerada embaixo.
   Cabeçalho, rodapé e base são do dev 1. Carrega só até 820 px (media no <link>) e por último. */
@media (max-width: 820px) {
  .cid .ajuda {
    max-width: none;
  }

  /* a mensagem volta a ser um balão só, como no WhatsApp: ela compara com a que tem no celular */
  .cid .modelo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .cid .modelo > .chat-msg {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
  }
  .cid .chat-msg .wa-msg {
    display: block;
    font-size: 16px;
    line-height: 1.45;
  }
  .cid .modelo-legenda {
    display: block;
  }
  .cid .trecho,
  .cid .trecho-botoes,
  .cid .modelo-legenda li {
    order: 0;
  }
  .cid .trecho {
    margin: 0 -6px;
    padding: 3px 6px;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    font: inherit;
  }
  .cid .trecho + .trecho {
    margin-top: 8px;
  }
  .cid .trecho.ativo {
    background: #dcf1e4;
  }

  /* os botões de exemplo não reagem: botão que parece de verdade e não responde faz achar que quebrou */
  .cid .chat-msg .trecho-botoes {
    width: 100%;
    margin: 0;
    border-radius: 10px;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
  }
  .cid .chat-msg .trecho-botoes.ativo {
    box-shadow: 0 0 0 3px var(--luz);
  }
  .cid .chat-msg .trecho-botoes span {
    cursor: default;
  }

  /* os números, maiores */
  .cid .chat-msg .n {
    width: 22px;
    height: 22px;
    font-size: 13px;
    margin-right: 8px;
  }

  /* a legenda: a superfície branca desliza até o item aceso, sem filete */
  .cid .modelo-legenda {
    --realce-sangra: 12px;
    padding-inline: 0;
  }
  .cid .modelo-legenda::before {
    content: '';
  }
  .cid .modelo-legenda li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    font-size: 17px;
    line-height: 26px;
  }
  .cid .modelo-legenda li.ativo {
    background: none;
  }
  .cid .modelo-legenda li button {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    min-height: 48px;
    padding: 12px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .cid .modelo-legenda .n {
    width: 26px;
    height: 26px;
    margin: 0;
    font-size: 14px;
  }
}