/* Livro de ocorrências: lista e conversa. */
.ocorrencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ocorrencia { display: grid; gap: 6px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); color: inherit; text-decoration: none; box-shadow: var(--sombra); }
.ocorrencia:hover { border-color: var(--agua); }
/* cada cartão com uma cor da paleta (.cor-N): barra lateral na cor e o assunto numa faixa leve; com mensagens novas, a barra fica dourada */
.ocorrencia[class*="cor-"] { border-left: 5px solid var(--cat); padding-left: 14px; }
.ocorrencia[class*="cor-"]:hover { border-color: var(--cat-linha); border-left-color: var(--cat); }
.ocorrencia.nova, .ocorrencia.nova:hover { border-left: 5px solid var(--ouro); padding-left: 14px; }
.oc-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-topo .selo { margin-left: auto; }
.oc-unidade { font-weight: 700; font-size: .9rem; }
.oc-assunto { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.oc-rodape { color: var(--texto-2); font-size: .85rem; }
.filtros select { width: auto; max-width: 100%; min-height: 38px; border-radius: 999px; padding: 0 14px; border: 1.5px solid var(--linha); background: var(--superficie); color: inherit; font: inherit; font-size: .9rem; }

.voltar-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; color: var(--texto-2); font-weight: 600; text-decoration: none; }
.voltar-link:hover { color: inherit; }
.oc-cabecalho h1 { overflow-wrap: anywhere; }
.oc-cabecalho .etiqueta { vertical-align: 1px; }

.conversa { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: min(560px, 88%); padding: 12px 14px 8px; border-radius: var(--raio) 16px 16px 4px; background: var(--superficie); border: 1px solid var(--linha); align-self: flex-start; }
.msg.do-sindico { background: color-mix(in srgb, var(--agua) 12%, var(--superficie)); border-color: color-mix(in srgb, var(--agua) 35%, var(--linha)); }
.msg.minha { align-self: flex-end; border-radius: var(--raio) 16px 4px 16px; }
.msg-quem { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.msg.do-sindico .msg-quem { color: color-mix(in srgb, var(--agua) 70%, var(--texto-2)); }
.msg p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg time { display: block; text-align: right; color: var(--texto-2); font-size: .75rem; }
.msg-foto { display: grid; place-items: center; width: 160px; height: 120px; margin: 4px 0 6px; padding: 0; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2); color: var(--texto-2); cursor: zoom-in; overflow: hidden; }
.msg-foto img { width: 100%; height: 100%; object-fit: cover; }
.msg-foto svg { width: 28px; height: 28px; }

.oc-escrever textarea { width: 100%; resize: vertical; }
.oc-acoes { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.oc-anexo { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.oc-encerrada { color: var(--texto-2); text-align: center; }

@media (max-width: 600px) {
  .msg { max-width: 94%; }
  .oc-cabecalho .btn { width: 100%; }
}