/* Central: compositor (a barra de conversa). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* a barra: uma caixa só, com o campo e o botão de enviar dentro dela */
.comp-bloco{flex:none;width:100%;max-width:760px;margin:0 auto}
.comp{position:relative;flex:none;display:flex;align-items:flex-end;gap:10px;width:100%;max-width:760px;margin:0 auto;padding:8px 8px 8px 18px;background:var(--realce);border:1px solid var(--borda-forte);border-radius:22px;box-shadow:0 10px 30px -14px rgba(0,0,0,.65);transition:border-color 180ms ease-out,box-shadow 180ms ease-out}
.comp:focus-within{border-color:var(--verde-escuro);box-shadow:0 0 0 3px rgba(44,107,82,.35),0 10px 30px -14px rgba(0,0,0,.65)}

/* o campo: sem caixa própria (a caixa é o .comp); os chips e o texto dividem a linha */
.comp-campo{position:static;flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.comp-campo:focus-within{border-color:transparent;box-shadow:none}
.comp input{padding:8px 0;text-overflow:ellipsis}

/* o chip da menção confirmada: pílula verde, com o × que tira */
/* (cui5) o chip cabe em até 40% do campo; um nome longo corta com reticências (o × fica sempre) */
.mention-chip{background:var(--verde-ativo);border-color:var(--verde-escuro);color:var(--destaque);font-size:13px;padding:3px 4px 3px 10px;gap:6px;flex:0 1 auto;min-width:0;max-width:40%}
.mention-chip-nome{min-width:0}
.mention-chip-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:0;border-radius:50%;color:var(--apagado);font-size:14px;line-height:1;cursor:pointer;flex:none}
.mention-chip-x:hover{background:#1f3a2c;color:var(--texto)}
.mention-chip-x:focus-visible{outline:2px solid var(--destaque);outline-offset:1px}

/* o botão de enviar: cinza sem texto; verde com texto; girando durante o turno */
.send{position:relative;width:36px;height:36px;margin-bottom:2px;padding:0;border-radius:50%;border:0;flex:none;display:flex;align-items:center;justify-content:center;background:#1a221d;color:#5d6b63;cursor:default;transition:background-color 160ms ease-out,color 160ms ease-out,transform 120ms ease-out}
.send:disabled{opacity:1;cursor:default}
.send.pronto:not(:disabled){background:var(--primario);color:var(--sobre-primario);cursor:pointer;animation:envio-entra 160ms ease-out}
.send.pronto:not(:disabled):hover{background:#00c583}
.send.pronto:not(:disabled):active{transform:scale(.94)}
@keyframes envio-entra{from{transform:scale(.92);opacity:.4}to{transform:scale(1);opacity:1}}

/* o turno roda: o anel gira no lugar do aviãozinho (discreto) */
.send-anel{display:none;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid var(--verde-escuro);border-top-color:var(--destaque)}
.send.girando{background:var(--verde-ativo);color:var(--destaque);cursor:progress}
.send.girando svg{display:none}
.send.girando .send-anel{display:block;animation:envio-gira 700ms linear infinite}
@keyframes envio-gira{to{transform:rotate(360deg)}}

/* a dica logo abaixo da caixa; some no celular */
.comp-dica{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--apagado);text-align:center}

/* (cui5) o dropdown de menções sem moldura própria: cada menção é uma linha com a sua borda (uma caixa só, não duas) */
.dropdown-mencao{background:none;border:0;border-radius:0;padding:0;box-shadow:none;gap:6px}
.dropdown-mencao-op{background:var(--cartao);border:1px solid var(--borda)}
.dropdown-mencao-op:hover{background:var(--realce);border-color:var(--borda-verde)}
.dropdown-mencao-op.ativo{background:var(--realce);border-color:var(--verde-escuro);box-shadow:none}
/* o raio da opção de controle (12px) */
.dropdown-mencao-op{border-radius:var(--raio-controle)}
/* (cui7) a opção é o item da paleta: o glifo do DOT, o nome e "setor · função" embaixo */
.dropdown-mencao-op{gap:10px;padding:8px 12px}
.dropdown-mencao-glifo{flex:none;display:inline-flex;align-items:center}
.dropdown-mencao-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.dropdown-mencao-op .dropdown-mencao-nome{color:var(--texto);font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dropdown-mencao-sub{color:var(--apagado);font-size:12px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width: 600px){
  .comp{padding-left:14px}
  .comp input{font-size:16px}
  .comp-dica{display:none}
}

/* o × do chip de menção: caixa de toque de 40px; a margem de -10px mantém o mesmo espaço (20px) no chip */
@media (max-width: 639px){
  .mention-chip-x{width:40px;height:40px;margin:-10px}
  /* a opção do dropdown: toque de 40px no celular */
  .dropdown-mencao-op{min-height:40px}
}

/* (rodada 8) a paleta (Ctrl+K): a lista mostra seis DOTs inteiros (380px = grupo de 30px + seis linhas de 56px com
   vão de 2px) e rola o resto. Sem degradê: o degradê apagava a sétima linha e ela parecia desabilitada. A barra de
   rolagem fica visível (fina, com os tokens da casa) para dizer que há mais. O seletor é mais específico que o
   .paleta-res de ui-shell.css, então vale por cima sem mexer nele. */
.modal.paleta .paleta-res{max-height:min(380px,60vh);-webkit-mask-image:none;mask-image:none;scrollbar-width:thin;scrollbar-color:var(--borda-forte) transparent}

/* (cui7) na sala, a dica do @ fica à vista no celular (o placeholder agora é só "Mensagem para Geral") */
@media (max-width: 600px){
  .comp-bloco:has(form[data-chave^="sala:"]) .comp-dica{display:block}
}

@media (prefers-reduced-motion: reduce){
  .comp,.send,.send-anel{transition:none}
  .send.pronto:not(:disabled){animation:none}
  .send.girando .send-anel{animation:none}
}