/* Seletor e cadastro de figurinhas, abre por cima do compositor. Usa os tokens de estilo.css. */
.compositor { position: relative; }
.botao-fig { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--suave); cursor: pointer; }
.botao-fig:hover, .botao-fig[aria-expanded="true"] { background: var(--acento-suave); color: var(--acento); }
.botao-fig:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.botao-fig svg { width: 22px; height: 22px; }

.fig-painel { position: absolute; right: 20px; bottom: calc(100% - 6px); z-index: 20; width: min(392px, calc(100vw - 32px)); max-height: min(460px, 62dvh);
  display: flex; flex-direction: column; background: var(--painel); border: 1px solid var(--linha); border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(31, 27, 45, .35), 0 2px 6px rgba(31, 27, 45, .06); }
.fig-topo { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--linha); }
.fig-topo input { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); }
.fig-topo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.fig-grade { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 10px; align-content: start; }
.fig-item { position: relative; }
.fig-usar { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 0; border-radius: 12px; background: transparent; cursor: pointer; padding: 4px; }
.fig-usar:hover, .fig-usar:focus-visible { background: var(--acento-suave); outline: none; }
.fig-usar img { width: 100%; height: 100%; object-fit: contain; }
.fig-apagar { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(20, 18, 27, .72); color: #fff; line-height: 1; cursor: pointer; opacity: 0; }
.fig-item:hover .fig-apagar, .fig-apagar:focus-visible { opacity: 1; }
@media (hover: none) { .fig-apagar { opacity: .85; } }
.fig-vazio { grid-column: 1 / -1; margin: 18px 6px; color: var(--suave); font-size: 13.5px; text-align: center; }

.fig-nova { display: grid; grid-template-columns: 72px 1fr; gap: 8px 12px; padding: 12px; border-top: 1px solid var(--linha); }
.fig-previa { grid-row: span 2; width: 72px; height: 72px; border-radius: 12px; border: 1px dashed var(--linha); background: var(--fundo) center / contain no-repeat; color: var(--suave); font-size: 24px; cursor: pointer; }
.fig-previa:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.fig-previa[style*="url"] span { visibility: hidden; }
.fig-nova input[type="text"] { width: 100%; padding: 7px 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); }
.fig-nova input[type="text"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.fig-nova menu { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }
.fig-nova small { grid-column: 1 / -1; color: var(--suave); font-size: 12px; }
.fig-painel .erro { margin: 0; padding: 0 12px 10px; }

/* figurinha do escritório dentro da conversa: pequena, sem moldura de foto */
.midias .figurinha { width: 140px; height: 140px; }
.envio-progresso { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) { .fig-painel { right: 10px; } }