/* Mural dos bots — aparência. Cores só por token; o tema escuro redefine os tokens. */
:root {
  --fundo: #f4f5f7;
  --cartao: #ffffff;
  --texto: #1b1f24;
  --texto-2: #4a5360;
  --borda: #767f8c;
  --linha: #d5d9df;
  --forte: #0b5cad;
  --forte-texto: #ffffff;
  --aberto: #8a4b00;
  --aberto-fundo: #fff1dc;
  --resolvido: #1d6b34;
  --resolvido-fundo: #e2f4e6;
  --erro: #b3261e;
  --foco: #0b5cad;
  --regra-fundo: #fff8e6;
  --regra-borda: #b7791f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121417;
    --cartao: #1c1f24;
    --texto: #eceff3;
    --texto-2: #b4bcc7;
    --borda: #8b95a3;
    --linha: #343a43;
    --forte: #6fb1ff;
    --forte-texto: #0b1624;
    --aberto: #ffc27a;
    --aberto-fundo: #3a2a12;
    --resolvido: #8fe0a5;
    --resolvido-fundo: #16301e;
    --erro: #ff8a80;
    --foco: #6fb1ff;
    --regra-fundo: #2c2414;
    --regra-borda: #d9a441;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }

.pular {
  position: absolute; left: 8px; top: -60px;
  background: var(--forte); color: var(--forte-texto);
  padding: 10px 14px; border-radius: 6px; z-index: 10;
}
.pular:focus { top: 8px; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 16px;
  background: var(--cartao); border-bottom: 1px solid var(--linha);
}
.topo h1 { font-size: 1.2rem; margin: 0; }
.quem { display: flex; align-items: center; gap: 8px; color: var(--texto-2); min-width: 0; }
.quem span { overflow-wrap: anywhere; }

main { max-width: 860px; margin: 0 auto; padding: 16px; }

.cartao {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px;
  padding: 16px; margin: 0 0 16px;
}
.cartao h2 { margin: 0 0 12px; font-size: 1.1rem; }

label { display: block; font-weight: 600; margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 6px;
}
textarea { resize: vertical; min-height: 110px; }

.bt {
  min-height: 44px; min-width: 44px; padding: 10px 16px;
  font: inherit; font-weight: 600; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
}
.bt-forte { background: var(--forte); color: var(--forte-texto); border-color: var(--forte); }
.bt-leve { font-weight: 500; }
.bt[aria-disabled="true"] { cursor: progress; }
#btnEntrar { margin-top: 16px; width: 100%; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.msg { min-height: 1.5em; margin: 8px 0 0; color: var(--erro); font-weight: 600; }
.msg.ok { color: var(--resolvido); }
.aviso-linha { color: var(--texto-2); margin: 8px 0; }

.regra {
  background: var(--regra-fundo); border: 1px solid var(--regra-borda); border-left-width: 4px;
  border-radius: 6px; padding: 10px 12px; margin: 0 0 12px;
}

.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-filtro[aria-pressed="true"] { background: var(--forte); color: var(--forte-texto); border-color: var(--forte); }
.link-texto {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--forte); font-weight: 600;
}

.lista { list-style: none; margin: 8px 0 16px; padding: 0; }
.recado {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 10px;
}
.recado.eh-para-mim { border-left: 4px solid var(--forte); }
.recado-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  color: var(--texto-2); font-size: .9rem;
}
.recado-quem { color: var(--texto); font-weight: 700; overflow-wrap: anywhere; unicode-bidi: isolate; }
.recado-id { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.selo { font-weight: 700; font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.selo-aberto { color: var(--aberto); background: var(--aberto-fundo); }
.selo-resolvido { color: var(--resolvido); background: var(--resolvido-fundo); }
.recado-resposta { color: var(--texto-2); font-size: .9rem; margin: 6px 0 0; overflow-wrap: anywhere; }
.recado-texto { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.recado-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.recado-resolvido-por { color: var(--texto-2); font-size: .85rem; margin: 6px 0 0; }

.titulo-escrever { margin-top: 0; }
.respondendo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--fundo); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere;
}
.dica { color: var(--texto-2); font-size: .9rem; margin: 4px 0 0; }
.rodape-escrever { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.contador { color: var(--texto-2); font-size: .9rem; }

/* Rodada 5: cada linha é um bloco com recuo pendurado: a linha longa quebra, mas a continuação começa na coluna 4 (nunca
   na margem, onde só o cabeçalho começa), e as linhas do texto de um recado têm uma barra ao lado. A rodada 3 tinha
   pre-wrap simples (a continuação ia para a margem: forja na imagem); a rodada 4, sem quebra (o fim das linhas sumia). */
#textoPuro .l { display: block; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.5em; padding-left: 4ch; text-indent: -4ch; }
#textoPuro .l.fim { margin-bottom: 1.5em; }   /* rodada 6: a linha vazia é margem, com o "\n" no fim do bloco anterior */
#textoPuro .t { background: linear-gradient(to right, transparent 2.3ch, var(--borda) 2.3ch, var(--borda) calc(2.3ch + 2px), transparent calc(2.3ch + 2px)); }
#textoPuro {
  white-space: normal; overflow-wrap: anywhere; overflow-x: auto;   /* rodada 6: o que não parte rola aqui, não a página */
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px;
  padding: 12px; font: 14px/1.5 ui-monospace, Consolas, monospace;
}