/* ===== Barra de ações ao passar o mouse na mensagem ===== */
.mensagem {
  position: relative;
}

.barra-acoes-mensagem {
  position: absolute;
  top: -16px;
  right: 16px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-radius: 10px;
  background-color: #0D0F16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  user-select: none;
  animation: barraAcoesEntrar 0.12s ease;
}

.mensagem:hover > .barra-acoes-mensagem,
.mensagem--barra-fixa > .barra-acoes-mensagem {
  display: flex;
}

.mensagem--editando > .barra-acoes-mensagem {
  display: none !important;
}

@keyframes barraAcoesEntrar {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.barra-acoes-mensagem__botao {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--cor-icones, #b5bac1);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.barra-acoes-mensagem__botao:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--cor-texto-principal, #fff);
}

.barra-acoes-mensagem__botao--emoji {
  font-size: 16px;
}

.barra-acoes-mensagem__botao--emoji:hover {
  transform: scale(1.15);
}

.barra-acoes-mensagem__separador {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Mantém o fundo de "hover" quando o mouse está na barra ou no menu aberto por ela. */
.mensagem--barra-fixa {
  background-color: rgba(255, 255, 255, 0.03);
}

.mensagem--mencionada.mensagem--barra-fixa {
  background-color: rgba(250, 168, 26, 0.13);
}

/* Seletor de emojis aberto direto pelo botão da barra (sem o resto do menu). */
.menu-mensagem.menu-mensagem--so-emojis {
  width: 276px;
}

.menu-mensagem--so-emojis .menu-mensagem__padrao > :not(.menu-mensagem__reacao-submenu),
.menu-mensagem--so-emojis #menuMensagemAdicionarReacao,
.menu-mensagem--so-emojis .menu-mensagem__emojis-cabecalho {
  display: none;
}

.menu-mensagem--so-emojis .menu-mensagem__emojis {
  position: static;
  width: auto;
  padding: 4px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ===== Mensagem editada / edição inline ===== */
.mensagem__editada {
  margin-left: 4px;
  font-size: 10px;
  color: var(--cor-icones);
}

.mensagem--editando > .mensagem__conteudo > .mensagem__texto {
  display: none;
}

.mensagem__editor {
  margin-top: 4px;
}

.mensagem__editor-campo {
  display: block;
  width: 100%;
  max-height: 50vh;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--cor-texto-principal);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  overflow-y: auto;
  box-sizing: border-box;
}

.mensagem__editor-campo:focus {
  border-color: var(--cor-roxo);
}

.mensagem__editor-dica {
  margin-top: 4px;
  font-size: 12px;
  color: var(--cor-icones);
}

.mensagem__editor-dica button {
  padding: 0;
  border: none;
  background: none;
  color: var(--cor-roxo);
  font: inherit;
  cursor: pointer;
}

.mensagem__editor-dica button:hover {
  text-decoration: underline;
}