/* ============================================================
   REDES.LAB ON · Marcação com @ (estilos)
   Usa as variáveis do styles.css do protótipo.
   O editor tem duas camadas: um fundo que realça as menções e o
   textarea por cima com o texto transparente (o cursor fica visível).
   ============================================================ */

.rl-mencao-editor{position:relative;width:100%;}

.rl-mencao-fundo,
.rl-mencao-campo{
  font-family:var(--mono);font-size:13px;line-height:1.6;
  padding:11px 13px;border:1.5px solid transparent;border-radius:12px;
  width:100%;min-height:0;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;
}

.rl-mencao-fundo{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  color:var(--ink);background:var(--surface);border-color:var(--rule);
}
.rl-mencao-campo{
  position:relative;display:block;background:transparent;
  color:transparent;caret-color:var(--ink);
  outline:none;resize:vertical;transition:border-color .15s ease;
}
.rl-mencao-campo::placeholder{color:var(--body-soft);}
.rl-mencao-campo:focus{border-color:var(--primary);}
.rl-mencao-campo:disabled{opacity:.5;}

/* menção realçada dentro do editor */
.rl-mencao-marca{
  color:var(--magenta-vivo);font-weight:700;
  background:color-mix(in srgb,var(--magenta-vivo) 13%,transparent);
  border-radius:5px;padding:1px 0;
}

/* lista de sugestões (rolável, pensada para o toque) */
.rl-mencao-lista{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:660;
  margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);max-height:242px;overflow-y:auto;
  animation:rlPop .18s cubic-bezier(.2,.8,.3,1) both;
}
.rl-mencao-op{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:11px;cursor:pointer;
  min-height:48px;
}
.rl-mencao-op.on{background:color-mix(in srgb,var(--primary) 10%,transparent);}
.rl-mencao-av{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:800;font-size:12px;color:#fff;
}
.rl-mencao-meta{flex:1;min-width:0;display:flex;flex-direction:column;}
.rl-mencao-meta b{
  font-family:var(--serif);font-weight:700;font-size:13.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rl-mencao-meta small{font-family:var(--mono);font-size:10px;color:var(--body-soft);}

/* chip no texto publicado */
.rl-mencao-chip{
  display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;
  border:none;cursor:pointer;
  font-family:var(--mono);font-size:.92em;font-weight:700;
  color:var(--magenta-vivo);
  background:color-mix(in srgb,var(--magenta-vivo) 11%,transparent);
  padding:1px 8px 1px 6px;border-radius:var(--r-pill);
  transition:background .14s ease;line-height:1.5;
}
.rl-mencao-chip:hover{background:color-mix(in srgb,var(--magenta-vivo) 20%,transparent);}
.rl-mencao-chip-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}

/* linha de comentário pronta */
.rl-coment-linha{display:flex;align-items:flex-start;gap:8px;width:100%;}
.rl-coment-campo{flex:1;min-width:0;}
.rl-coment-campo .rl-mencao-fundo,
.rl-coment-campo .rl-mencao-campo{
  border-radius:var(--r-pill);padding:10px 16px;font-size:12.5px;min-height:42px;
  resize:none;
}
.rl-coment-enviar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;border:none;
  background:var(--magenta-vivo);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .14s ease;
}
.rl-coment-enviar:disabled{background:var(--rule);color:var(--body-soft);cursor:default;}

@media (max-width:680px){
  .rl-mencao-op{min-height:52px;}
  .rl-mencao-lista{max-height:216px;}
}

/* ajuste da casca: no composer da RedeIA (rodapé do chat) a lista abre para cima */
.cv-composer .rl-mencao-lista{top:auto;bottom:calc(100% + 6px);}