.noticia-comentarios-topo {
  position: relative;
  z-index: 2;
  display: block;
  padding: 7px 14px 0 52px;
  color: #ccc;
  font: bold 11px/1.4 Verdana, Arial, sans-serif;
  text-align: left;
  text-shadow: 1px 1px 2px #000;
}

.comentarios-noticia,
.comentarios-noticia * {
  box-sizing: border-box;
}

.comentarios-noticia {
  width: calc(100% - 20px);
  margin: 0 10px;
  padding: 12px;
  color: #bbb;
  font: 10px/1.5 Verdana, Arial, sans-serif;
}

.comentarios-noticia__cabecalho {
  padding-bottom: 10px;
  border-bottom: 1px solid #3a3324;
}

.comentarios-noticia__autoria {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.comentarios-noticia__autor-avatar {
  border-radius: 4px;
}

.comentarios-noticia__cabecalho h1,
.comentarios-noticia--ausente h1 {
  margin: 0;
  color: #eee;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.comentarios-noticia__cabecalho p,
.comentarios-noticia--ausente p {
  margin: 0;
  color: #888;
}

.comentarios-noticia__cabecalho .comentarios-noticia__autor-nome {
  margin-top: 4px;
  color: #666;
  font-size: .9em;
}

.comentarios-noticia__cabecalho .comentarios-noticia__contagem {
  margin-top: 12px;
}

.comentarios-noticia__voltar {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: #e8b84b;
  text-decoration: none;
}

.comentarios-noticia__flash,
.comentarios-noticia__login,
.comentarios-noticia__vazio {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #42424e;
  border-radius: 5px;
  background: #15151b;
}

.comentarios-noticia__flash--sucesso {
  border-color: #3f8551;
  color: #c9ffd4;
}

.comentarios-noticia__flash--erro {
  border-color: #9b4747;
  color: #ffd0d0;
}

.comentarios-noticia__formulario {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 11px;
  border: 1px solid #383842;
  border-radius: 6px;
  background: #121217;
}

.comentarios-noticia__formulario label {
  color: #ddd;
  font-weight: bold;
}

.comentarios-noticia__formulario textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid #4a4a58;
  border-radius: 4px;
  background: #09090d;
  color: #eee;
  font: 12px/1.5 Verdana, Arial, sans-serif;
}

.comentarios-noticia__formulario button {
  min-height: 42px;
  justify-self: end;
  padding: 8px 15px;
  border: 1px solid #d1a333;
  border-radius: 4px;
  background: linear-gradient(180deg, #e7b63d, #9c6813);
  color: #100b02;
  font-weight: bold;
  cursor: pointer;
}

.comentarios-noticia__lista {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.comentario-noticia {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid #33333c;
  border-radius: 6px;
  background: linear-gradient(180deg, #1b1b22, #101015);
}

.comentario-noticia__avatar {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.comentario-noticia__corpo {
  min-width: 0;
}

.comentario-noticia__corpo header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px 10px;
  color: #e4bb55;
}

.comentario-noticia__corpo time {
  color: #777;
  font-size: 9px;
}

.comentario-noticia__corpo p {
  margin: 7px 0 0;
  color: #ccc;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 560px) {
  .comentarios-noticia {
    width: calc(100% - 12px);
    margin: 0 6px;
    padding: 9px;
  }

  .comentarios-noticia__formulario button {
    width: 100%;
    min-height: 44px;
  }

  .comentario-noticia {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 8px;
  }

  .comentario-noticia__avatar {
    width: 40px;
    height: 40px;
  }
}