/* Iconografia vetorial do sistema.
 *
 * Os DESENHOS moram em app/helpers/icones_helper.rb (grade 24×24, traço 1.75,
 * `currentColor`) — as regras do sistema de desenho estão no comentário de lá.
 * Aqui fica só o que o CSS precisa saber: como o ícone se assenta ao lado do
 * texto e quanto ele acende em cada estado.
 *
 * Esta folha entra DEPOIS de application.css, então ela é quem manda no ponto
 * onde as duas se encontram (o botão do menu, o gatilho da conversa). */

.icone {
  /* `block` dentro do fluxo de texto deixaria a linha-base 4px baixa; `middle`
     é o que faz ícone e palavra ficarem na mesma altura sem ajuste por caso. */
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* ---- o menu lateral ----------------------------------------------------- */
/* O ícone do grupo é o mesmo verde-claro do rótulo; o hover e o item aceso
   sobem os dois juntos, porque o traço é `currentColor`. Só o repouso é um
   pouco mais apagado — senão a coluna de ícones compete com os nomes. */
.grupo__icone { opacity: 0.72; transition: opacity 120ms ease; }
.grupo__atalho:hover .grupo__icone,
.grupo > summary:hover .grupo__icone,
.grupo__atalho--atual .grupo__icone,
.grupo[open] .grupo__icone { opacity: 1; }

/* Abrir e fechar a gaveta: os rótulos vêm de application.css com o tamanho do
   glifo antigo. O que falta é o ícone parar de arrastar a linha para baixo. */
.barra-do-topo__menu, .menu__fechar { line-height: 0; }
.menu__fechar { color: var(--text-on-dark-muted); }
.menu__fechar:hover { color: var(--text-on-dark); }
.barra-do-topo__menu { color: var(--text-secondary); }
.barra-do-topo__menu:hover { color: var(--text-heading-color); }

/* ---- a conversa sobre o pedido ------------------------------------------ */
/* Botões redondos de 40px: sem centrar por flex, o SVG encosta no topo. */
.conversa__voz, .conversa__enviar, .conversa__fechar {
  display: inline-flex; align-items: center; justify-content: center;
}
/* Ouvindo, o microfone acende junto com o pulso que já existe no botão. */
.conversa__voz--ouvindo .icone { color: var(--color-paper-white); }

/* O que o agente FEZ ganha o mesmo confirmado do resto do sistema. O ícone
   sobe 1px: a marca do "v" tem o peso visual no meio, não na linha-base. */
.fala__feito { margin-top: 1px; color: var(--color-leaf-bright); }

/* ---- a caixa de arquivo ------------------------------------------------- */
/* Era um emoji de 24px; o traço fino precisa de um pouco mais de corpo para
   pesar o mesmo dentro da caixa tracejada. */
.solta__icone { color: var(--text-secondary); opacity: 0.6; }
.solta__area:hover .solta__icone { color: var(--color-canopy-green); opacity: 1; }

/* ---- sinais dentro da linha do pedido ----------------------------------- */
/* O selo de troca e a seta do balão herdam a cor do sinal em que moram (azul no
   selo, ciano no balão) e são pequenos de propósito: pontuam o texto, não
   competem com ele — por isso nada a declarar aqui além de não estorvar. */
.selo__marca, .balao__seta { margin-top: -1px; }

/* ---- lista de mídias ---------------------------------------------------- */
/* Peça sem arte: em vez do buraco branco, o quadro vazio no mesmo lugar e no
   mesmo tamanho da miniatura — a coluna não desalinha por falta de imagem. */
.midia__miniatura--vazia {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--border-mid);
}