/* public/css/conversas.css — aba CONVERSAS = espelho do Umbler Talk. Tokens medidos ao vivo em 18/09/2026
   (docs/superpowers/specs/2026-09-18-conversas-umbler-levantamento). Prefixo um-. Nunca a classe genérica btn. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root {
  --um-primary: #557CF2; --um-primary-hover: #4869CE; --um-primary-active: #4564C3; --um-nav-ativo: #7799FD;
  --um-bg: #EEF2FE; --um-bg-hover: #FAFAFA; --um-ativo: #E2E9FE; --um-superficie: #FFFFFF; --um-desabilitado: #F5F5F5;
  --um-texto: #1F1F1F; --um-texto-2: #6F7380; --um-texto-3: #83858C; --um-borda: #DFDFDF;
  --um-balao-in: #FFFFFF; --um-balao-in-texto: #6F7380; --um-balao-out: #ECFEEC; --um-balao-out-texto: #405E40;
  --um-nota: #FFFBE6; --um-nota-texto: #8A6D00; --um-nota-pilula: #D48806; --um-nao-lidas: #389E0D;
  --um-verde-bg: #E4F6D9; --um-verde-texto: #135200; --um-azul-bg: #E2E9FE; --um-azul-texto: #223261;
  --um-ambar-bg: #FFF3C2; --um-ambar-texto: #614700; --um-vermelho-bg: #FDE2E5; --um-vermelho-texto: #7A1F2A; --um-violeta-bg: #EADDFB; --um-violeta-texto: #4A2574;
  --um-erro: #F5222D; --um-lateral: #557CF2; --um-lateral-ico: rgba(255,255,255,.78); --um-tooltip: #31343B; --um-tooltip-texto: #FFFFFF;
  --um-raio-pilula: 30px; --um-raio-balao: 16px; --um-raio-busca: 8px;
  --um-sombra-balao: 0 2px 4px rgba(0,0,0,.075); --um-sombra-compositor: 0 2px 8px rgba(59,89,178,.15);
  --um-fonte: "Plus Jakarta Sans", sans-serif; --um-lista-w: 496px;
}
:root[data-theme="dark"] { --um-bg: #171B24; --um-bg-hover: #1F2430; --um-ativo: #1E2A47; --um-superficie: #1F2430; --um-texto: #E8EAF0; --um-texto-2: #9AA3B2; --um-texto-3: #8A93A3; --um-borda: #2C3240; --um-balao-in: #262B38; --um-balao-in-texto: #C9CFDA; --um-balao-out: #1F3A26; --um-balao-out-texto: #BFE8C4; --um-nota: #3A2F16; --um-nota-texto: #E4B35A; --um-tooltip-texto: #1F1F1F; }

.um-app { display: grid; grid-template-columns: 60px auto var(--um-lista-w, 496px) 1fr; grid-template-rows: 100%; height: calc(100vh - 120px); min-height: 520px; font-family: var(--um-fonte); font-size: 16px; color: var(--um-texto); background: var(--um-bg); border: 1px solid var(--um-borda); border-radius: 12px; overflow: hidden; position: relative; }
.um-lateral { background: var(--um-lateral); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; }
.um-lateral .um-ico-btn { color: var(--um-lateral-ico); width: 42px; height: 42px; border-radius: 10px; }
.um-lateral .um-ico-btn--ativo, .um-lateral .um-ico-btn:hover { background: var(--um-nav-ativo); color: #fff; }
.um-lista { background: var(--um-superficie); border-right: 1px solid var(--um-borda); display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.um-lista-redim { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; }
.um-conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--um-bg); }
.um-painel { position: absolute; top: 0; right: 0; bottom: 0; width: 415px; background: var(--um-superficie); border-left: 1px solid var(--um-borda); box-shadow: -4px 0 16px rgba(0,0,0,.08); overflow: auto; z-index: 5; }
.um-ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--um-ico); border-radius: 800px; cursor: pointer; } /* R8-3 (U-67/U-68): r800 e #5B5B5B (--um-ico) como o `btn-icon` do Umbler; era r8 e --um-texto-2 */
.um-ico-btn:hover { background: var(--um-bg-hover); color: var(--um-texto); }
.um-ico-btn--primary { background: var(--um-primary); color: #fff; border-radius: 50%; } .um-ico-btn--primary:hover { background: var(--um-primary-hover); color: #fff; }
.um-ico { width: 20px; height: 20px; }
.um-pilula { height: 36px; padding: 4px 8px; border-radius: var(--um-raio-pilula); border: 2px solid transparent; background: transparent; color: var(--um-texto); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.um-pilula--ativa { background: var(--um-primary); border-color: var(--um-primary); color: #fff; }
.um-abas { display: flex; background: var(--um-bg); border-radius: var(--um-raio-pilula); margin: 8px 12px; padding: 2px; } .um-abas .um-pilula { flex: 1; justify-content: center; }
.um-busca { display: flex; align-items: center; gap: 8px; margin: 8px 12px; border: 1px solid var(--um-borda); border-radius: var(--um-raio-busca); padding: 6px 10px; font-size: 14px; }
.um-busca input { border: 0; outline: 0; flex: 1; font: inherit; background: transparent; color: inherit; }
.um-linhas { overflow-x: hidden; overflow-y: auto; flex: 1; }
/* Linha da lista = 106px fixos, 3 linhas (nome+hora · prévia · etiquetas+atendentes/setor), sem scroll horizontal
   (Umbler 18/09: 106px, padding 12px 16px). minmax(0,1fr) + min-width:0 é o que impede a prévia nowrap de esticar a coluna
   — antes a coluna do meio ia a 727px numa lista de 496px, hora/chevron caíam fora e cada linha tinha altura própria. */
.um-linha { min-height: 106px; height: 106px; box-sizing: border-box; padding: 12px 16px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; border-bottom: 1px solid rgba(0,0,0,.06); cursor: pointer; position: relative; }
.um-linha .um-check { position: absolute; left: 5px; top: 44px; z-index: 1; }
.um-linha:has(.um-check) { padding-left: 28px; }
.um-avatar-wrap { position: relative; width: 48px; height: 48px; flex: none; }
.um-linha-meio { min-width: 0; display: flex; flex-direction: column; gap: 6px; height: 82px; }
.um-linha-meio .um-nome { font-size: 16px; line-height: 22px; display: block; } .um-linha-meio .um-nome .um-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.um-previa { min-width: 0; height: 22px; line-height: 22px; font-size: 15px; } .um-previa > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-linha-rodape { display: flex; align-items: center; gap: 6px; min-width: 0; height: 26px; overflow: hidden; white-space: nowrap; } .um-linha-rodape > * { flex: none; }
.um-linha-dir { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; height: 82px; gap: 4px; min-width: 40px; }
.um-linha-dir .um-hora { line-height: 22px; white-space: nowrap; }
.um-linha-dir .um-atendentes { align-items: center; gap: 4px; } .um-linha-dir .um-chip-setor { max-width: 110px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.um-linha-dir-baixo { display: flex; align-items: center; gap: 2px; }
.um-linha-menu { width: 22px; height: 22px; opacity: 0; transition: opacity .12s; margin-right: -4px; } .um-linha-menu .um-ico { width: 16px; height: 16px; }
.um-linha:hover .um-linha-menu, .um-linha--ativa .um-linha-menu, .um-linha-menu:focus-visible { opacity: 1; }
.um-linha:hover { background: var(--um-bg-hover); } .um-linha--ativa { background: var(--um-ativo); box-shadow: inset 3px 0 0 var(--um-primary); }
.um-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #dce6ff; box-shadow: 0 0 8px rgba(136,136,136,.2); position: relative; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--um-azul-texto); }
.um-avatar--sm { width: 24px; height: 24px; font-size: 10px; } .um-badge-canal { position: absolute; left: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: #25D366; border: 2px solid var(--um-superficie); }
.um-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .um-hora { font-size: 14px; color: var(--um-texto-2); }
.um-previa { color: var(--um-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; } .um-previa .um-ico { width: 16px; height: 16px; color: var(--um-primary); }
.um-etiqueta { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 22px; border-radius: 12px; font-size: 12px; background: var(--um-verde-bg); color: var(--um-verde-texto); }
.um-chip-setor { display: inline-block; padding: 0 8px; height: 20px; line-height: 18px; border: 1px solid var(--um-borda); border-radius: 10px; font-size: 12px; color: var(--um-texto-3); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-nao-lidas { background: var(--um-nao-lidas); color: #fff; border-radius: 50px; font-size: 12px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.um-atendentes { display: flex; } .um-atendentes .um-avatar--sm { margin-left: -6px; border: 2px solid var(--um-superficie); }
.um-cabecalho { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--um-superficie); border-bottom: 1px solid var(--um-borda); min-height: 60px; }
.um-conversa--buscando .um-cab-slot { display: none; }
.um-mensagens { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.um-dia { align-self: center; background: var(--um-superficie); border-radius: 12px; padding: 2px 10px; font-size: 12px; color: var(--um-texto-2); margin: 16px 0; box-shadow: var(--um-sombra-balao); }
.um-balao { max-width: 75%; padding: 10px; border-radius: var(--um-raio-balao); font-size: 14px; box-shadow: var(--um-sombra-balao); position: relative; display: grid; gap: 6px; }
.um-balao--in { align-self: flex-start; background: var(--um-balao-in); color: var(--um-balao-in-texto); }
.um-balao--out { align-self: flex-end; background: var(--um-balao-out); color: var(--um-balao-out-texto); }
.um-balao--nota { align-self: flex-end; background: var(--um-nota); color: var(--um-nota-texto); }
.um-balao .um-hora { font-size: 11px; text-align: right; } .um-balao--out .um-hora { color: var(--um-balao-out-texto); }
.um-selo-chip { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 10px; line-height: 16px; background: rgba(0,0,0,.08); color: inherit; }
/* --- o que a aba antiga tinha (Task 30b): ensaio, Larissa, botão tocado, encaminhada, transcrição pendente --- */
.um-ensaio { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 10px; line-height: 16px; border: 1px dashed var(--um-ambar-texto); color: var(--um-ambar-texto); background: var(--um-ambar-bg); }
.um-balao--ensaio { border: 1px dashed var(--um-ambar-texto); }
.um-ia { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 22px; border-radius: 12px; font-size: 12px; white-space: nowrap; margin-left: 4px; } .um-ia .um-ico { width: 14px; height: 14px; }
.um-ia--robo { background: var(--um-azul-bg); color: var(--um-azul-texto); }
.um-ia--humano { background: var(--um-ambar-bg); color: var(--um-ambar-texto); }
.um-botao { font-size: 13px; color: var(--um-texto-2); } .um-encaminhada { font-size: 12px; color: var(--um-texto-2); font-style: italic; }
.um-transcricao--pendente { color: var(--um-texto-2); font-style: italic; }
.um-transcrever--erro { border-color: var(--um-erro); color: var(--um-erro); }
.um-campo > b { margin-right: 6px; } .um-link { background: none; border: 0; padding: 0; color: var(--um-primary); cursor: pointer; font: inherit; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
/* O atributo hidden não vence um display: declarado — guarda por classe (tests/conversas-umbler-hidden-guard.test.mjs). */
.um-ico-btn[hidden] { display: none; } .um-numero-novo[hidden] { display: none; } .um-abas[hidden] { display: none; }
.um-citacao { border-left: 3px solid var(--um-primary); background: rgba(0,0,0,.06); border-radius: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer; }
.um-opcao--desabilitada { opacity: .55; cursor: not-allowed; }
.um-balao-editar { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.um-balao-editar textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.um-balao-editar-botoes { display: flex; gap: 6px; justify-content: flex-end; }
.um-reacao { position: absolute; right: 8px; bottom: -10px; background: var(--um-superficie); border-radius: 12px; padding: 0 6px; font-size: 12px; box-shadow: var(--um-sombra-balao); }
.um-evento { align-self: center; font-size: 12px; color: var(--um-texto-2); display: inline-flex; align-items: center; gap: 4px; }
.um-hover-bar { position: absolute; top: -34px; right: 0; display: none; gap: 2px; background: var(--um-superficie); border-radius: 8px; box-shadow: var(--um-sombra-balao); padding: 2px; } .um-balao:hover .um-hover-bar { display: flex; }
.um-compositor { margin: 12px 16px; background: var(--um-superficie); border: 2px solid var(--um-primary); border-radius: var(--um-raio-balao); box-shadow: var(--um-sombra-compositor); padding: 16px; display: grid; gap: 8px; }
.um-compositor textarea { border: 0; outline: 0; resize: none; min-height: 48px; font: inherit; font-size: 14px; background: transparent; color: inherit; }
.um-compositor--nota { border-color: var(--um-nota-texto); background: var(--um-nota); }
.um-comp-aviso { font-size: 13px; color: var(--um-ambar-texto); background: var(--um-ambar-bg); border-radius: 8px; padding: 6px 10px; }
.um-offcanvas { position: absolute; top: 0; bottom: 0; left: 0; width: 360px; max-width: 90vw; background: var(--um-superficie); border-right: 1px solid var(--um-borda); box-shadow: 4px 0 16px rgba(0,0,0,.08); z-index: 10; overflow: auto; display: flex; flex-direction: column; }
.um-offcanvas--direita { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--um-borda); box-shadow: -4px 0 16px rgba(0,0,0,.08); }
.um-offcanvas--modal { position: fixed; inset: 5vh auto 5vh auto; left: 50%; transform: translateX(-50%); width: 480px; max-width: 90vw; border: 1px solid var(--um-borda); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.18); z-index: 30; }
/* R8-3 (U-17): o menu vive no <body>, fora do #umApp — sem font-family própria herdava a Segoe UI do Terminal. Medidas do dropdown
   do Umbler (r8-umbler-09): 176,7 de largura (min-width 158 + pad 16 + borda 2), r16, borda #F0F0F0, sombra tripla, pad 8; item 42 px 14/22 pad 5/10 r12. Era r8/#DFDFDF/
   sombra única/pad 4/item 8/10 r6/min 200. */
.um-menu { position: absolute; background: var(--um-superficie); border: 1px solid #F0F0F0; border-radius: 16px; box-shadow: 0 5px 12px 4px rgba(0,0,0,.09), 0 3px 6px rgba(0,0,0,.12), 0 1px 2px -2px rgba(0,0,0,.16); padding: 8px; z-index: 20; min-width: 158px; font-family: var(--um-fonte); color: var(--um-texto); } .um-menu button { display: flex; width: 100%; gap: 8px; align-items: center; min-height: 42px; padding: 5px 10px; box-sizing: border-box; border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 22px; color: var(--um-texto); border-radius: 12px; cursor: pointer; text-align: left; } .um-menu button:hover { background: var(--um-bg-hover); }
.um-toast { position: fixed; right: 16px; bottom: 16px; background: var(--um-superficie); border-left: 4px solid var(--um-nao-lidas); box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 12px 16px; border-radius: 8px; z-index: 50; display: flex; gap: 12px; align-items: center; font-size: 14px; } .um-toast--erro { border-left-color: var(--um-erro); }
.um-input, .um-select { border: 1px solid var(--um-borda); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; background: var(--um-superficie); color: inherit; width: 100%; }
.um-check, .um-radio { width: 18px; height: 18px; accent-color: var(--um-primary); }
.um-offcanvas-cab { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; font-size: 18px; } .um-offcanvas-abas { display: flex; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--um-borda); } .um-offcanvas-abas button { border: 0; background: transparent; font: inherit; padding: 8px 0; color: var(--um-texto-2); border-bottom: 2px solid transparent; cursor: pointer; } .um-offcanvas-abas button.ativa { color: var(--um-primary); border-bottom-color: var(--um-primary); }
.um-secao { padding: 12px 16px; border-bottom: 1px solid var(--um-borda); } .um-secao h4 { margin: 0 0 8px; font-size: 14px; }
.um-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--um-texto); font-weight: 600; font-size: 20px; gap: 12px; }
/* --- numeros (painel de chips WhatsApp, Tarefa 28) --- */
.um-numeros { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.um-numeros-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 18px; }
.um-numero-add { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--um-raio-pilula); border: 0; background: var(--um-primary); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.um-numero-add:hover { background: var(--um-primary-hover); }
.um-numero-novo { display: flex; gap: 8px; }
.um-numero { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--um-superficie); border: 1px solid var(--um-borda); border-radius: 12px; }
.um-numero-luz { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--um-texto-3); }
.um-numero-luz.on { background: var(--um-nao-lidas); }
.um-numero-luz.wait { background: var(--um-ambar-texto); }
.um-numero-luz.off { background: var(--um-erro); }
.um-numero-luz.pausado { background: var(--um-texto-3); }
.um-numero-txt { flex: 1; min-width: 0; }
.um-numero-nome { font-weight: 600; }
.um-numero-fone { color: var(--um-texto-2); font-weight: 400; }
.um-numero-status { color: var(--um-texto-2); font-size: 13px; }
.um-numero-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.um-numero-b { height: 32px; padding: 0 10px; border-radius: var(--um-raio-pilula); border: 1px solid var(--um-borda); background: transparent; color: var(--um-texto); font: inherit; font-size: 13px; cursor: pointer; }
.um-numero-b:hover { background: var(--um-bg-hover); }
.um-numero-b--perigo { border-color: var(--um-erro); color: var(--um-erro); }
.um-numero-vazio { color: var(--um-texto-2); text-align: center; padding: 24px; }
.um-qr { margin-top: 8px; padding: 16px; background: var(--um-superficie); border: 1px solid var(--um-borda); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.um-qr-img { width: 220px; height: 220px; }
.um-qr-code { font-size: 14px; }
.um-qr-passos, .um-qr-passos-mini { color: var(--um-texto-2); font-size: 13px; }
.um-qr-ok { color: var(--um-verde-texto); font-weight: 600; }
@media (max-width: 900px) { .um-app { grid-template-columns: 48px auto 1fr; } .um-filtros-col { display: none; } .um-conversa { display: none; } .um-app--aberta .um-lista { display: none; } .um-app--aberta .um-conversa { display: flex; } .um-painel { width: 100%; } }

/* ============================================================================================
   Loop de paridade (19/09) — blocos por área, cada um mantido pelo seu agente. NÃO mover regras entre blocos.
   =================================================================================================== */
/* ===== ÁREA A — lista (topo, busca, massa, abas, linha, vazio, menu da linha) ===== */
.um-lista-topo { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 2px; min-height: 52px; }
.um-lista-topo-esq { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--um-texto-2); }
.um-lista-topo-esq .um-contador-total { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.um-lista-topo-dir { display: flex; align-items: center; gap: 2px; }
.um-lista-busca { display: flex; align-items: center; gap: 4px; padding: 0 12px; }
.um-lista-busca .um-busca { flex: 1; margin: 8px 0; min-width: 0; }
.um-massa { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--um-borda); }
.um-massa label { display: inline-flex; align-items: center; gap: 6px; }
.um-massa[hidden] { display: none; } .um-lista-topo[hidden] { display: none; } .um-lista-busca[hidden] { display: none; }
.um-aba-n { font-weight: 500; opacity: .9; margin-left: 4px; }
.um-vazio--lista { padding: 48px 16px; text-align: center; color: var(--um-texto-2); font-size: 14px; }
/* --- A, refinamentos da auditoria r1 (medidas do Umbler em loop-paridade/auditoria-ui-r1.md §1.2–1.3) --- */
.um-filtros-col { width: 292px; background: var(--um-superficie); border-right: 1px solid var(--um-borda); overflow: auto; min-height: 0; } .um-filtros-col[hidden] { display: none; }
/* Colunas explícitas: com #umFiltros hidden (display:none) a auto-colocação empurrava lista/conversa uma coluna para a direita
   (conversa com 496px, lista com o resto) — a coluna 2 vazia vale 0 e some. */
.um-app > .um-lateral { grid-column: 1; } .um-app > .um-filtros-col { grid-column: 2; } .um-app > .um-lista { grid-column: 3; } .um-app > .um-conversa { grid-column: 4; }
@media (max-width: 900px) { .um-app > .um-lista { grid-column: 3; } .um-app > .um-conversa { grid-column: 3; } }
.um-lista-topo { min-height: 73px; padding: 15px 12px 0; }
.um-lista-topo .um-ico-btn { width: 42px; height: 42px; } .um-lista-topo .um-ico-btn--primary { width: 42px; height: 42px; }
.um-lista-topo-dir { gap: 8px; }
.um-lista-busca { padding: 4px 12px 0; gap: 0; } .um-lista-busca .um-ico-btn { width: 35px; height: 35px; }
.um-lista-busca .um-busca { margin: 0 0 0 4px; border: 0; padding: 6px 8px; height: 37px; box-sizing: border-box; }
.um-abas { margin: 8px 12px; } .um-pilula:not(.um-pilula--ativa) .um-aba-n { display: none; }
.um-linha { border-bottom-color: #D9D9D9; }
.um-linha-meio .um-nome { font-weight: 700; }
.um-previa { font-size: 14px; line-height: 21px; height: 21px; }
.um-linha-dir .um-hora { font-size: 12px; line-height: 18px; color: rgba(0,0,0,.65); } :root[data-theme="dark"] .um-linha-dir .um-hora { color: var(--um-texto-2); }
.um-etiqueta { height: 22px; padding: 0 8px; font-size: 14px; border-radius: 30px; background: rgb(217,247,190); color: var(--um-verde-texto); border: 1px solid var(--um-nao-lidas); } .um-etiqueta .um-ico { display: none; }
.um-etiqueta--vazia { width: 22px; height: 22px; padding: 0; border: 1px dashed var(--um-texto-3); background: transparent; border-radius: 50%; justify-content: center; color: var(--um-texto-3); } .um-etiqueta--vazia .um-ico { display: block; width: 12px; height: 12px; }
.um-chip-setor { height: 22px; line-height: 20px; font-size: 14px; color: var(--um-texto); border-radius: 30px; }
.um-linha-dir { min-width: 57px; }
.um-badge-canal { width: 22px; height: 22px; left: -4px; bottom: -4px; background: #25D366 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'><path d='M128 24a104 104 0 0 0-91.8 152.9L24 224l48.3-12.1A104 104 0 1 0 128 24Zm0 192a88 88 0 0 1-44.8-12.3l-3.2-1.9-28.6 7.2 7.4-27.9-2-3.3A88 88 0 1 1 128 216Zm48.4-65.1c-2.7-1.3-15.7-7.7-18.1-8.6s-4.2-1.3-6 1.3-6.9 8.6-8.4 10.4-3.1 2-5.8.7a72 72 0 0 1-21.2-13.1 79.5 79.5 0 0 1-14.7-18.3c-1.5-2.7 0-4.1 1.2-5.4s2.7-3.1 4-4.7a18 18 0 0 0 2.7-4.4 4.9 4.9 0 0 0-.2-4.7c-.7-1.3-6-14.5-8.2-19.8s-4.4-4.5-6-4.6h-5.1a9.8 9.8 0 0 0-7.1 3.3 29.9 29.9 0 0 0-9.3 22.2c0 13.1 9.5 25.8 10.9 27.6s18.7 28.6 45.4 40.1c6.3 2.7 11.3 4.4 15.1 5.6a36.4 36.4 0 0 0 16.7 1.1c5.1-.8 15.7-6.4 17.9-12.6s2.2-11.5 1.6-12.6-2.4-1.8-5.1-3.1Z'/></svg>") center/14px no-repeat; }
.um-linha--ativa { box-shadow: inset 3px 0 0 var(--um-primary); }
/* --- A, R3-1 (auditoria-ui-r2 §1.2/§1.3/§2.2; medidas lidas de r2-umbler-01e-filtros.png / 01f-selecao-massa.png) ---
   Cabeçalho: linha 1 = 73 com borda; busca = 8 + 37 + 8 + borda (54); abas com margem 16 → 1ª linha em y=199 (antes 170).
   Linha 1: chat+n · equipe(n) · olho à esquerda (42×42, passo 50); list-checks · sort · ▾ · + à direita. */
.um-lista-topo { border-bottom: 1px solid #D9D9D9; padding: 15px 12px 15px; box-sizing: border-box; min-height: 73px; height: 73px; }
.um-lista-topo-esq { gap: 8px; }
.um-lista-topo-esq .um-contador-total { height: 42px; padding: 0 4px; }
.um-equipe { position: relative; width: auto; min-width: 42px; padding: 0 4px; gap: 4px; }
.um-equipe-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--um-primary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.um-equipe-badge[hidden] { display: none; }
.um-ico-btn--aceso { color: var(--um-primary); background: var(--um-ativo); }
.um-lista-busca { padding: 8px 12px; border-bottom: 1px solid #D9D9D9; }
.um-abas { margin: 16px 12px; }
/* Linha: avatar centrado na vertical (Umbler), 16 até o texto; badge do canal = quadrado arredondado 24×26 com o ícone do WhatsApp
   encostado no canto inferior esquerdo do avatar. */
.um-linha { column-gap: 16px; }
.um-linha > .um-avatar-wrap { align-self: center; }
.um-badge-canal { width: 24px; height: 26px; box-sizing: border-box; border: 2px solid var(--um-superficie); border-radius: 8px; left: -6px; bottom: -6px; background-size: 16px; }
/* Seleção em massa: checkbox 20 a 16 da borda, avatar 16 depois dele (Umbler: 80 / 112 numa lista que começa em 60); faixa 97
   (16 + 20 + 12 + 32 + 16 + borda) com o ✓ dentro do select de ação. */
.um-linha .um-check { width: 20px; height: 20px; left: 16px; top: 43px; margin: 0; }
.um-linha:has(.um-check) { padding-left: 52px; }
.um-lista .um-massa { padding: 16px 12px 16px 20px; gap: 12px 8px; height: 97px; box-sizing: border-box; border-bottom: 1px solid #D9D9D9; }
/* (select.um-select: a regra da ÁREA D, mais adiante no arquivo, redefine o padding — a especificidade maior mantém o ✓ fora do texto) */
.um-lista .um-massa > select.um-select:first-of-type { height: 32px; border-radius: 30px; padding: 2px 10px 2px 32px; background: var(--um-superficie) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231F1F1F'><path d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/></svg>") 10px center/16px no-repeat; }
:root[data-theme="dark"] .um-lista .um-massa > select.um-select:first-of-type { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23E8EAF0'><path d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/></svg>"); }
/* Modo Números: a coluna da lista mostra os chips (lista.js, numerosListaHtml) em vez de ficar em branco. */
.um-numeros-lista { display: flex; flex-direction: column; flex: 1; min-height: 0; } .um-numeros-lista[hidden] { display: none; }
.um-numeros-lista .um-interno-topo { min-height: 73px; padding: 15px 12px 15px 16px; border-bottom: 1px solid #D9D9D9; }
.um-numeros-lista .um-linha { height: 106px; }
.um-numeros-lista .um-avatar .um-ico { width: 24px; height: 24px; color: var(--um-primary); }
.um-numeros-lista .um-linha-rodape { gap: 8px; } .um-numeros-lista .um-numero-luz { position: static; width: 10px; height: 10px; }
.um-numero--foco { outline: 2px solid var(--um-primary); outline-offset: 2px; }
/* Botão global Relatar (relatos.js) cobria compositor/painel na CONVERSAS: some aqui — a lateral ganha o mesmo atalho. */
body:has(#umApp) .cp-relatar-btn { display: none; }
/* ===== ÁREA B — conversa (cabeçalho, mensagens, balões, anexos, busca na conversa) ===== */
/* Cabeçalho 73px fixos, fundo transparente, borda inferior 1px: caret · avatar 48 · nome 16/600 + linha de chips · 8 ícones de
   42px com passo 50 (auditoria-ui-r1 §1.4). O miolo tem min-width:0 para o nome ganhar ellipsis em vez de empurrar os ícones. */
.um-cabecalho { height: 73px; min-height: 73px; box-sizing: border-box; padding: 0 12px 0 8px; gap: 8px; flex: none; background: transparent; }
.um-cabecalho > .um-ico-btn { flex: none; }
.um-cabecalho > .um-avatar-wrap { margin-left: 4px; }
.um-cab-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-left: 4px; }
.um-cab-meio .um-nome { font-size: 16px; line-height: 22px; font-weight: 600; }
.um-cab-chips { display: flex; align-items: center; gap: 6px; height: 22px; min-width: 0; overflow: hidden; white-space: nowrap; }
.um-cab-chips > * { flex: none; }
.um-cab-chips .um-etiqueta .um-ico { width: 14px; height: 14px; }
.um-cab-chips .um-chip-setor { max-width: 140px; height: 22px; line-height: 20px; border-radius: var(--um-raio-pilula); padding: 0 10px; }
.um-cab-chips .um-etiqueta--vazia { width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; border: 1px dashed var(--um-texto-3); background: transparent; color: var(--um-texto-3); box-sizing: border-box; } .um-cab-chips .um-etiqueta--vazia .um-ico { width: 12px; height: 12px; }
.um-vendo { display: inline-flex; align-items: center; margin-left: 4px; } .um-vendo:empty { display: none; }
.um-vendo .um-avatar--sm { margin-left: -6px; border: 2px solid var(--um-superficie); box-sizing: content-box; } .um-vendo .um-avatar--sm:first-child { margin-left: 0; }
.um-cab-icones { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.um-cab-icones .um-ico-btn { width: 42px; height: 42px; }
/* R2-5 (b) — conversa estreita (≤ 719px: 1440 com a sidebar do Terminal dá 686px; o Umbler colapsa a 675px): os 8 ícones
   (392px) deixavam 143px para o nome. Somem todos menos o X e entra o "⋮" com as mesmas ações; o nome ganha a linha inteira.
   Container query na largura da CONVERSA (o .um-cab-slot ocupa a coluna), não do viewport. */
.um-cab-slot { container-type: inline-size; }
.um-cab-mais { display: none; }
@container (max-width: 719px) {
  .um-cab-icones > .um-ico-btn:not(.um-cab-mais):not([data-cab="fechar"]) { display: none; }
  .um-cab-mais { display: inline-flex; }
}
.um-menu--cab { min-width: 220px; } .um-menu--cab button .um-ico { width: 18px; height: 18px; flex: none; color: var(--um-texto-2); }
/* Busca na conversa ocupa o lugar do cabeçalho (captura 02e): mesma altura, caret · calendário (em breve) · lupa + campo sem borda · X à direita. */
.um-busca-conv { display: flex; align-items: center; gap: 8px; height: 73px; box-sizing: border-box; padding: 0 12px 0 8px; background: transparent; border-bottom: 1px solid var(--um-borda); flex: none; }
.um-busca-conv .um-ico-btn[disabled] { opacity: .45; cursor: default; } .um-busca-conv .um-ico-btn[disabled]:hover { background: transparent; }
.um-busca-conv[hidden] { display: none; }
.um-busca-conv .um-busca { flex: 1; min-width: 0; margin: 0 0 0 8px; border: 0; padding: 0; font-size: 16px; color: var(--um-texto-2); background: transparent; }
.um-busca-conv .um-busca input { font-size: 16px; color: var(--um-texto); } .um-busca-conv .um-busca input::placeholder { color: var(--um-texto-2); } .um-busca-conv .um-busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.um-busca-conv > .um-ico-btn { flex: none; }
/* Área de mensagens em grade de 2 colunas: dia/evento/balão recebido ocupam a linha toda; o balão enviado fica na coluna 1
   encostado à direita e o avatar de quem enviou (irmão seguinte no DOM — o E2E depende de `.um-balao + .um-balao-autor`)
   cai na coluna 2 da MESMA linha. Antes o avatar caía numa linha só dele, à esquerda. Sem scroll horizontal. */
.um-mensagens { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 16px; align-content: start; padding: 12px 24px 16px; overflow-x: hidden; overflow-y: auto; }
.um-mensagens > * { grid-column: 1 / -1; min-width: 0; }
.um-mensagens > .um-balao--in, .um-mensagens > .um-carregar-mais { justify-self: start; }
.um-mensagens > .um-balao--out, .um-mensagens > .um-balao--nota { grid-column: 1; justify-self: end; }
.um-mensagens > .um-balao-autor { grid-column: 2; align-self: start; justify-self: start; width: 36px; height: 36px; font-size: 13px; }
/* Topo da conversa (captura 02b): 2 botões redondos brancos de 38px — Conversa anterior (seta) e Ver todas as conversas (lista). */
.um-conv-topo { display: flex; justify-content: center; gap: 20px; padding: 8px 0 4px; }
.um-conv-topo-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--um-superficie); box-shadow: var(--um-sombra-balao); color: var(--um-texto-2); } .um-conv-topo-btn:hover { background: var(--um-bg-hover); color: var(--um-texto); } .um-conv-topo-btn .um-ico { width: 18px; height: 18px; }
.um-mensagens > .um-dia, .um-mensagens > .um-evento { justify-self: center; }
.um-mensagens > .um-vazio { justify-self: stretch; font-size: 14px; font-weight: 400; color: var(--um-texto-2); padding: 24px; }
.um-dia { margin: 0; height: 32px; line-height: 32px; padding: 0 10px; border-radius: 16px; font-size: 12px; box-sizing: border-box; }
.um-evento { max-width: 100%; text-align: center; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 12px; line-height: 18px; } .um-evento .um-ico { width: 14px; height: 14px; } .um-evento .um-hora { font-size: 12px; }
.um-carregar-mais { height: 28px; padding: 0 12px; font-size: 13px; color: var(--um-texto-2); background: var(--um-superficie); border: 1px solid var(--um-borda); }
/* Balão: bloco (não grade) para a hora flutuar à direita da última linha do texto, como no Umbler ("Certo  12:16" = 42px;
   antes a hora era uma linha própria e o mesmo balão tinha 57px). Máx 70% da coluna (auditoria §1.5); quebra palavra comprida. */
.um-balao { display: flow-root; max-width: 70%; box-sizing: border-box; line-height: 1.5; overflow-wrap: anywhere; }
.um-balao > .um-nota-rotulo, .um-balao > .um-encaminhada, .um-balao > .um-citacao, .um-balao > .um-botao, .um-balao > .um-anexo, .um-balao > .um-anexo-img, .um-balao > .um-anexo-video, .um-balao > audio, .um-balao > .um-transcricao, .um-balao > .um-balao-editar { display: block; margin: 0 0 6px; }
.um-balao > .um-nota-rotulo { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 16px; } .um-balao > .um-nota-rotulo .um-ico { width: 14px; height: 14px; }
.um-balao-texto { display: inline; }
.um-balao > .um-hora { float: right; display: inline-flex; align-items: center; gap: 4px; margin: 7px 0 0 10px; font-size: 8.75px; line-height: 14px; white-space: nowrap; color: var(--um-texto-2); }
.um-balao > .um-hora .um-ico { width: 14px; height: 14px; } .um-balao > .um-hora .um-ico--lido { color: var(--um-primary); } .um-balao > .um-hora .um-ico--falhou { color: var(--um-erro); }
.um-balao--out > .um-hora { color: var(--um-balao-out-texto); opacity: .8; }
.um-balao--destaque { outline: 2px solid var(--um-primary); outline-offset: 2px; }
.um-citacao { border-left: 3px solid var(--um-primary); background: rgba(0,0,0,.05); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.3; max-height: 60px; overflow: hidden; }
.um-reacao { right: 8px; bottom: -10px; min-width: 32px; height: 18px; padding: 0 6px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; box-shadow: var(--um-sombra-balao); box-sizing: border-box; }
/* Barra flutuante do balão (captura 02c): pílula branca com 5 botões de 30px AO LADO do balão — à direita do recebido, à esquerda do
   enviado — centrada na altura, só no hover. O ::after invisível cobre o vão de 14px para o mouse não perder o hover a caminho. */
.um-hover-bar { top: 50%; right: auto; left: calc(100% + 14px); transform: translateY(-50%); height: 36px; box-sizing: border-box; padding: 3px; gap: 2px; border-radius: 30px; z-index: 2; }
.um-balao--out .um-hover-bar, .um-balao--nota .um-hover-bar { left: auto; right: calc(100% + 14px); }
.um-hover-bar::after { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 14px; } .um-balao--out .um-hover-bar::after, .um-balao--nota .um-hover-bar::after { right: auto; left: 100%; }
.um-hover-bar .um-ico-btn { width: 30px; height: 30px; border-radius: 50%; } .um-hover-bar .um-ico { width: 18px; height: 18px; }
/* Menu da mensagem (captura 02d): divisor antes de Encaminhar e Apagar em vermelho — o markup vive em paineis-acao.js (área D), aqui só o estilo. */
.um-menu button[data-menu-msg="encaminhar"] { border-top: 1px solid var(--um-borda); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 10px; }
.um-menu button[data-menu-msg="apagar"], .um-menu button[data-menu-msg="apagar-todos"] { color: var(--um-erro); }
/* Anexos: cartão com ícone quadrado (PDF roxo) + nome em negrito + tipo; imagem/vídeo máx 320×320 com raio; áudio 300px. */
.um-anexo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 2px 2px 4px; min-width: 0; }
.um-anexo .um-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; padding: 8px; box-sizing: border-box; background: var(--um-texto-2); color: #fff; }
.um-anexo .um-ico--file-pdf { background: #7B3FE4; }
.um-anexo > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.um-anexo > span > b { font-weight: 600; font-size: 14px; color: var(--um-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.um-anexo > span > small { font-size: 12px; color: var(--um-texto-2); }
.um-anexo--ensaio { font-size: 13px; color: var(--um-texto-2); } .um-anexo--ensaio .um-ico { background: var(--um-desabilitado); color: var(--um-texto-2); }
.um-anexo-img { display: block; width: 320px; max-width: 100%; } .um-anexo-img img { display: block; width: 100%; height: 270px; border-radius: 6px; object-fit: cover; background: var(--um-desabilitado); }
.um-anexo-video { display: block; max-width: 320px; max-height: 320px; border-radius: 12px; background: #000; }
.um-balao > audio { width: 300px; max-width: 100%; height: 40px; border-radius: 20px; }
.um-transcricao { font-size: 13px; line-height: 1.4; } .um-transcricao small { display: block; font-size: 11px; color: var(--um-texto-2); margin-bottom: 2px; }
.um-transcrever { height: 28px; padding: 0 10px; font-size: 13px; border: 1px solid var(--um-borda); background: var(--um-superficie); margin-bottom: 4px; }
/* Estado vazio (captura 01): ilustração de "cartão de conversa" desenhada em CSS + "Selecione uma conversa" 24/600, centralizados. */
.um-conversa > .um-vazio { gap: 40px; font-size: 24px; font-weight: 600; color: var(--um-texto); }
.um-conversa > .um-vazio > .um-ico { display: none; }
.um-conversa > .um-vazio::before { content: ''; width: 320px; height: 120px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.08); background: radial-gradient(circle at center, var(--um-borda) 0 23px, transparent 24px) 24px 50% / 48px 48px no-repeat, linear-gradient(var(--um-borda), var(--um-borda)) 92px 42px / 120px 12px no-repeat, linear-gradient(var(--um-borda), var(--um-borda)) 92px 68px / 190px 12px no-repeat, var(--um-superficie); }
/* ===== ÁREA C — compositor (topo, modos, textarea, ferramentas, popovers, rápidas, emojis, cota) ===== */
/* Medidas do Umbler (auditoria-ui-r1 §1.6/§3.4, capturas r1-umbler-04-*): caixa 220 em repouso, padding 16, r=16, borda 2px
   --um-borda (azul SÓ com foco), sombra --um-sombra-compositor; linha 1 = switch 40×20 + nome 14/600 + lápis; à direita pílulas
   Mensagem 121×36 / Notas 86×36 num wrap --um-bg; textarea 72 mín (14px/24), 6 linhas máx; ferramentas 40×40 passo 48: anexo ·
   emoji · rápidas · chatbot · figurinhas ┃ lápis … mic 37 azul na ponta direita. 2+16+36+12+84+12+40+16+2 = 220. */
.um-compositor-slot { flex: none; position: relative; min-width: 0; }
.um-compositor { margin: 16px; padding: 16px; border-radius: 16px; border-color: var(--um-borda); gap: 12px; grid-template-columns: minmax(0, 1fr); position: relative; min-width: 0; box-sizing: border-box; transition: border-color .12s; }
.um-compositor:focus-within { border-color: var(--um-primary); }
.um-compositor > * { min-width: 0; }
.um-comp-topo { display: flex; align-items: center; gap: 6px; height: 36px; }
.um-comp-assinatura { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.um-comp-assinatura > b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* R9-1 (V-1): o switch é o INPUT — escopado em `input.um-assinatura` para nunca mais pegar outro elemento com o nome parecido (o <b> do balão herdou a pílula + bolinha). */
input.um-assinatura { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 20px; margin: 0; border-radius: 10px; background: var(--um-borda); position: relative; cursor: pointer; transition: background .15s; }
input.um-assinatura::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
input.um-assinatura:checked { background: var(--um-primary); } input.um-assinatura:checked::after { left: 22px; }
input.um-assinatura:focus-visible { outline: 2px solid var(--um-primary); outline-offset: 2px; }
.um-comp-topo > [data-comp="assinatura"] { width: 28px; height: 28px; flex: none; } .um-comp-topo > [data-comp="assinatura"] .um-ico { width: 16px; height: 16px; }
/* Select de canal (só nosso; o Umbler não tem): controle pequeno à direita do nome, nunca uma linha própria. */
.um-comp-canal { margin-left: auto; flex: none; width: auto; max-width: 180px; height: 32px; padding: 0 26px 0 10px; font-size: 13px; color: var(--um-texto-2); border-radius: var(--um-raio-pilula); background: var(--um-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236F7380' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; appearance: none; -webkit-appearance: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-comp-modos { margin-left: auto; flex: none; display: inline-flex; align-items: center; background: var(--um-bg); border-radius: var(--um-raio-pilula); }
.um-comp-canal + .um-comp-modos { margin-left: 0; }
.um-comp-modos .um-pilula { height: 36px; padding: 0 12px; font-size: 14px; white-space: nowrap; gap: 8px; } .um-comp-modos .um-pilula .um-ico { width: 20px; height: 20px; }
/* Modo Notas (r1-umbler-04-notas): a linha da assinatura SOME; só as pílulas ficam, à direita. */
.um-compositor--nota:focus-within { border-color: var(--um-nota-texto); }
.um-compositor--nota .um-comp-assinatura, .um-compositor--nota .um-comp-topo > [data-comp="assinatura"], .um-compositor--nota .um-comp-canal { display: none; }
.um-compositor--nota .um-comp-modos { margin-left: auto; background: transparent; } /* R4-A: sem wrap cinza (r3-umbler-04-notas) */
.um-compositor--nota .um-comp-modos .um-pilula--ativa { background: var(--um-nota-pilula); border-color: var(--um-nota-pilula); color: #fff; } /* Notas dourada rgb(212,136,6) */
/* Textarea auto-crescente sem JS: field-sizing:content (Chrome 123+); sem suporte fica nas 3 linhas mínimas com rolagem. */
.um-compositor .um-comp-texto { display: block; width: 100%; box-sizing: content-box; min-height: 72px; max-height: 144px; padding: 6px 0; font-size: 14px; line-height: 24px; overflow-y: auto; resize: none; field-sizing: content; }
.um-comp-texto::placeholder { color: var(--um-texto-3); }
.um-comp-rodape { display: flex; align-items: center; gap: 8px; height: 40px; }
.um-comp-ferramentas { display: flex; align-items: center; gap: 8px; flex: none; }
.um-comp-ferramentas > .um-ico-btn { width: 40px; height: 40px; }
.um-comp-ferramentas .um-ico-btn:disabled { opacity: .4; cursor: not-allowed; }
.um-comp-divisor { width: 1px; height: 24px; background: var(--um-borda); margin: 0 4px; flex: none; }
.um-comp-mais { display: none; }
.um-comp-cota { flex: 1; min-width: 0; text-align: right; font-size: 12px; color: var(--um-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-comp-enviar { flex: none; margin-left: auto; width: 37px; height: 37px; }
.um-comp-enviar.um-gravando { background: var(--um-erro); animation: um-pulso 1s ease-in-out infinite; }
@keyframes um-pulso { 50% { box-shadow: 0 0 0 6px rgba(245,34,45,.25); } }
.um-comp-aviso { display: flex; align-items: center; min-height: 32px; box-sizing: border-box; }
/* O "+" das ferramentas só entra no MODO COMPACTO da conversa (bloco R3-6 no fim do arquivo) — nunca pela largura do compositor. */
/* Citação pendente (barra azul + texto + x) e anexo pendente (miniatura + nome + x) — uma linha, sem quebrar. */
.um-comp-citacao { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-left: 3px solid var(--um-primary); border-radius: 8px; background: var(--um-bg); font-size: 13px; color: var(--um-texto-2); }
.um-comp-citacao > .um-ico { flex: none; color: var(--um-primary); }
.um-comp-citacao > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-comp-citacao > .um-ico-btn, .um-comp-anexo > .um-ico-btn { flex: none; width: 28px; height: 28px; margin-left: auto; } .um-comp-citacao .um-ico-btn .um-ico, .um-comp-anexo .um-ico-btn .um-ico { width: 16px; height: 16px; }
.um-comp-citacao[hidden] { display: none; }
.um-comp-anexo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; box-sizing: border-box; padding: 4px 6px 4px 8px; border: 1px solid var(--um-borda); border-radius: 8px; background: var(--um-superficie); font-size: 13px; }
.um-comp-anexo > .um-ico { flex: none; color: var(--um-texto-2); }
.um-comp-anexo-img { flex: none; width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.um-comp-anexo-nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-comp-anexo[hidden] { display: none; }
.um-compositor-slot.um-arrastando .um-compositor { border-style: dashed; background: var(--um-bg-hover); }
/* Popover: flutua ACIMA do compositor (não empurra a caixa), 400 de largura, máx 430 de altura com rolagem interna, raio 12,
   sombra; X fixo no canto. Variantes: --emoji (picker 400×430 com busca "Nome do emoji" e rótulo "Pessoas") e --menu (Anexar). */
.um-comp-popover { position: absolute; left: 16px; bottom: calc(100% - 8px); width: 400px; max-width: calc(100% - 32px); max-height: 430px; box-sizing: border-box; overflow: auto; padding: 12px; background: var(--um-superficie); border: 1px solid var(--um-borda); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 20; display: grid; gap: 8px; font-size: 14px; }
.um-comp-popover[hidden] { display: none; }
.um-comp-popover > .um-pop-fechar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; } .um-comp-popover > .um-pop-fechar .um-ico { width: 16px; height: 16px; }
.um-comp-popover > p { margin: 0; padding-right: 32px; }
.um-comp-popover > label:not(.um-busca) { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--um-texto-2); padding-right: 32px; }
.um-comp-popover > .um-pilula { justify-self: start; }
.um-comp-popover audio { width: 100%; }
.um-comp-popover .um-pop-cab { display: flex; align-items: center; gap: 8px; padding-right: 32px; min-width: 0; height: 28px; }
.um-comp-popover .um-pop-cab > b { font-size: 16px; white-space: nowrap; margin-right: auto; }
.um-comp-popover .um-busca { margin: 0; height: 40px; box-sizing: border-box; }
.um-comp-popover--emoji { height: 430px; grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; }
.um-emojis-rotulo { font-size: 14px; font-weight: 600; }
.um-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; align-content: start; overflow-y: auto; min-height: 0; }
.um-emojis button { height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.um-emojis button:hover { background: var(--um-bg-hover); } .um-emojis button[hidden] { display: none; } .um-emojis[hidden] { display: none; }
.um-comp-popover--menu { width: auto; min-width: 200px; padding: 6px; gap: 0; }
.um-comp-popover--menu > .um-pop-fechar { display: none; }
.um-comp-op { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--um-texto); text-align: left; cursor: pointer; white-space: nowrap; }
.um-comp-op:hover:not(:disabled) { background: var(--um-bg-hover); } .um-comp-op:disabled { opacity: .45; cursor: not-allowed; } .um-comp-op .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); }
/* Respostas rápidas (Umbler: offcanvas 500 — aqui o mínimo pedido: popover 400×430 com rolagem; busca + Todas/Minhas com
   ícone + itens ícone 36 + título 700 + texto). */
.um-rapidas-abas { justify-self: start; margin-left: 0; } .um-rapidas-abas .um-pilula { height: 36px; padding: 0 12px; font-size: 14px; gap: 6px; } .um-rapidas-abas .um-pilula .um-ico { width: 18px; height: 18px; }
.um-rapidas-lista { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto; }
.um-rapidas-lista > p { margin: 0; padding: 8px 10px; color: var(--um-texto-2); }
.um-rapida { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; width: 100%; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; color: var(--um-texto); cursor: pointer; }
.um-rapida:hover { background: var(--um-bg-hover); }
.um-rapida-ico { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 8px; background: var(--um-bg); color: var(--um-primary); display: inline-flex; align-items: center; justify-content: center; } .um-rapida-ico .um-ico { width: 18px; height: 18px; }
.um-rapida > b { font-size: 14px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-rapida > small { font-size: 12px; color: var(--um-texto-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-rapida[hidden] { display: none; } .um-rapidas-lista[hidden] { display: none; }
/* R3-2 — select "Canal de envio" (só nosso): chip pequeno à direita do nome, e só existe com mais de um canal possível
   (compositor.js canaisDe — antes aparecia em toda ficha com 158×32). 28 de altura, 12px, no máximo 150 de largura. */
.um-comp-canal { height: 28px; max-width: 150px; padding: 0 22px 0 10px; font-size: 12px; border: 1px solid var(--um-borda); background-position: right 6px center; background-size: 12px; }
/* R3-2 — janela de 24 h fechada (r2-umbler-02-conversa-aberta.png: caixa 934×212): cadeado 24 · pílulas à direita · texto 16px em
   2 linhas + ⓘ · "Enviar template" 176×40 azul + "Executar bot" 156×40 com borda · relógio 32 à direita. Sem textarea/ferramentas.
   2+16+36+28+48+20+40+16+2 = 208 (Umbler 212; o ⓘ pode quebrar linha em coluna estreita). */
.um-compositor--travado { gap: 20px; }
.um-compositor--travado:focus-within { border-color: var(--um-borda); }
.um-comp-cadeado { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: var(--um-primary); }
.um-comp-cadeado .um-ico { width: 24px; height: 24px; }
.um-comp-travado-texto { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--um-texto); overflow-wrap: anywhere; }
/* R5-2 (b060): o ⓘ é botão (clique/toque abre o popover com o texto; title continua no desktop). */
.um-comp-info { display: inline-flex; vertical-align: middle; color: var(--um-primary); cursor: pointer; background: none; border: 0; padding: 0; margin: 0; font: inherit; }
.um-comp-info .um-ico { width: 18px; height: 18px; }
.um-comp-popover--info { width: 360px; } .um-comp-popover--info .um-comp-info-texto { font-size: 14px; line-height: 1.4; color: var(--um-texto); }
/* R5-2 (b136): ícone do cabeçalho "aguardando" a resposta do servidor (POST privar levou 6 s em produção): apagado, sem 2º clique. */
.um-ico-btn[aria-busy="true"] { opacity: .45; pointer-events: none; cursor: progress; }
.um-comp-travado-acoes { display: flex; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.um-comp-travado-acoes > .um-pilula { height: 40px; padding: 0 16px; font-size: 16px; gap: 8px; white-space: nowrap; flex: none; }
.um-comp-travado-acoes > .um-pilula .um-ico { width: 20px; height: 20px; }
.um-comp-travado-acoes > .um-pilula--borda { border: 1px solid var(--um-borda); }
.um-comp-travado-acoes > .um-pilula--borda:hover { background: var(--um-bg-hover); }
/* SMS/Chip (nosso extra — o Umbler não tem SMS): chips pequenos depois dos botões, sem competir com eles. */
.um-comp-alternativos { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.um-comp-alternativo { height: 28px; padding: 0 10px; border: 1px solid var(--um-borda); border-radius: var(--um-raio-pilula); background: var(--um-superficie); color: var(--um-texto-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.um-comp-alternativo:hover { background: var(--um-bg-hover); color: var(--um-texto); }
.um-comp-relogio { margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--um-borda); border-radius: 50%; color: var(--um-texto-2); flex: none; }
.um-comp-relogio .um-ico { width: 18px; height: 18px; }
@media (max-height: 800px) { .um-conversa .um-compositor--travado { gap: 10px; } .um-conversa .um-comp-travado-texto { margin-top: 0; } }
/* R3-2 — painel "Enviar template" (compositor travado e aba do Finalizar; r2-umbler-03-finalizar.png): select do canal 158×40 +
   busca 40 + "+" 40 azul redondo; lista de templates como linhas de opção; vazio centrado em 20px/700. Envio só pelo Umbler. */
.um-template-topo { display: flex; align-items: center; gap: 8px; margin: 24px 0 16px; padding: 0 24px; min-width: 0; } /* R4-A: padding 24 do painel (Q1) */
.um-template-topo .um-template-canal { flex: none; width: 158px; height: 40px; box-sizing: border-box; padding: 0 28px 0 12px; border: 1px solid var(--um-borda); border-radius: var(--um-raio-pilula); font-size: 14px; color: var(--um-texto-2); background: var(--um-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236F7380' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; appearance: none; -webkit-appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.um-template-topo .um-busca { flex: 1; min-width: 0; margin: 0; height: 40px; box-sizing: border-box; border: 1px solid var(--um-borda); border-radius: var(--um-raio-pilula); }
.um-template-topo .um-template-criar { flex: none; width: 40px; height: 40px; text-decoration: none; }
.um-template-vazio { padding: 48px 8px; text-align: center; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--um-texto); }
.um-template { cursor: default; }
.um-template .um-opcao-txt > small { display: block; color: var(--um-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-template-link { margin-right: auto; font-size: 13px; text-decoration: underline; color: var(--um-primary); white-space: nowrap; }
.um-painel-acao .um-abas .um-pilula[data-tipo="template"]::before { background-color: var(--um-ambar-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23614700'><path d='M100,56H40A16,16,0,0,0,24,72v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,100,56Zm0,80H40V72h60ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Zm0,80H156V72h60Z'/></svg>"); }
/* ===== ÁREA D — painéis, filtros, nova conversa, agendar, toast, chat interno, números ===== */
/* Medidas do Umbler ao vivo (auditoria-ui-r1.md §1.7/§3.3/§3.5 + capturas r1-umbler-03-… · 04-chatbot · 05-chat-interno, 1440×900):
   offcanvas 500px com fundo escuro (clicar fora fecha), cabeçalho X · avatar 88 · nome 2 linhas · telefone · LID, abas 16px
   sublinhadas, seções com rótulo 14/600, linhas-link de 76px com ícone redondo 36, campos de 76px (rótulo em cima, valor/Adicionar
   à direita), listas de rádio com 1 linha de 81px por item, rodapé com textarea 90 + botão cheio 40. */
.um-painel-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); z-index: 4; } /* R3-5: preto 0.5 = .offcanvas-backdrop do Umbler */
.um-app .um-painel { width: 500px; max-width: 100%; overflow-x: hidden; overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,.12); font-size: 14px; }
.um-app .um-painel-acao { display: flex; flex-direction: column; overflow: hidden; }
.um-painel-acao > .um-painel-lista, .um-painel-acao > .um-nova-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.um-painel-acao > .um-secao { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* cabeçalho dos painéis de ação: X à esquerda, título 20/600 */
.um-painel-acao .um-offcanvas-cab { display: flex; align-items: center; gap: 12px; padding: 24px 24px 16px 20px; min-height: 80px; font-size: 20px; font-weight: 600; box-sizing: border-box; }
.um-painel-acao .um-offcanvas-cab > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-painel-quem { display: flex; align-items: center; gap: 12px; padding: 0 24px 16px; font-size: 16px; min-width: 0; }
.um-painel-quem .um-avatar--sm { width: 40px; height: 40px; font-size: 14px; flex: none; }
.um-painel-quem b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* cabeçalho do painel Contato: X · avatar 88 · nome (até 2 linhas) + lápis · telefone + copiar · LID */
.um-painel > .um-offcanvas-cab:has(.um-avatar--lg) { display: grid; grid-template-columns: 36px 88px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 24px 24px 16px 12px; font-size: 18px; }
.um-painel > .um-offcanvas-cab:has(.um-avatar--lg) > .um-ico-btn:first-child { align-self: start; }
.um-avatar--lg { width: 88px; height: 88px; font-size: 28px; }
.um-painel-cab-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.um-painel-cab-txt .um-nome { white-space: normal; overflow: visible; font-size: 18px; line-height: 1.25; font-weight: 600; display: flex; align-items: flex-start; gap: 4px; overflow-wrap: anywhere; }
.um-painel-cab-txt .um-nome .um-ico-btn { width: 28px; height: 28px; flex: none; margin-left: auto; }
.um-painel-fone { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.um-painel-cab-txt small { display: block; font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-painel-cab-txt .um-input { font-size: 14px; }
.um-ico-btn--xs { width: 28px; height: 28px; } .um-ico-btn--xs .um-ico { width: 16px; height: 16px; }
.um-texto-2 { color: var(--um-texto-2); } .um-erro { color: var(--um-erro); }
/* abas sublinhadas (Contato | Detalhes · Setor | Atendente | Canal · Finalizar | Enviar mensagem | Chatbot) */
.um-painel .um-offcanvas-abas { display: flex; gap: 28px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; flex: none; }
.um-painel .um-offcanvas-abas::-webkit-scrollbar { display: none; }
.um-painel .um-offcanvas-abas button { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 2px; font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--um-texto-2); margin-bottom: -1px; }
.um-painel .um-offcanvas-abas button .um-ico { width: 18px; height: 18px; }
.um-painel .um-offcanvas-abas button:disabled { opacity: .5; cursor: not-allowed; }
/* seções */
.um-painel .um-secao { padding: 20px 24px; }
.um-painel .um-secao h4 { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.um-painel .um-secao > .um-ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; color: var(--um-texto-2); }
.um-painel-corpo { font-size: 14px; }
.um-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.um-chips .um-etiqueta { height: 24px; }
.um-etiqueta .um-ico-btn--xs { width: 18px; height: 18px; margin-right: -4px; color: inherit; border-radius: 50%; } .um-etiqueta .um-ico-btn--xs .um-ico { width: 12px; height: 12px; }
.um-add-etiqueta-btn, .um-etiqueta--vazia { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px dashed var(--um-texto-3); background: transparent; color: var(--um-texto-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.um-add-etiqueta-btn .um-ico, .um-etiqueta--vazia .um-ico { width: 14px; height: 14px; }
.um-add-etiqueta-btn:hover { border-color: var(--um-primary); color: var(--um-primary); }
.um-add-etiqueta { display: flex; gap: 8px; align-items: center; margin-top: 12px; } .um-add-etiqueta[hidden] { display: none; }
.um-add-etiqueta .um-select { flex: 1; min-width: 0; height: 40px; }
.um-add-etiqueta .um-pilula { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; border: 1px solid var(--um-borda); }
/* linhas-link (Observações ›, Logs ›, Todas as conversas ›, Baixar ›): 76px, ícone redondo azul 36, chevron à direita */
.um-painel details.um-secao { padding: 0 24px; }
.um-painel details.um-secao > summary { list-style: none; display: flex; align-items: center; gap: 16px; min-height: 76px; cursor: pointer; font-size: 15px; }
.um-painel details.um-secao > summary::-webkit-details-marker, .um-painel details.um-secao > summary::marker { display: none; content: ""; }
.um-painel details.um-secao > summary b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.um-painel details.um-secao > summary > .um-ico:first-child, .um-painel .um-linha-link > .um-ico:first-child { width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--um-primary); color: #fff; flex: none; }
.um-painel details.um-secao > summary > .um-ico:last-child, .um-painel .um-linha-link > .um-ico:last-child { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; transition: transform .15s; }
.um-painel details[open].um-secao > summary > .um-ico:last-child { transform: rotate(90deg); }
.um-painel details.um-secao > :not(summary) { margin-left: 0; }
.um-painel details.um-secao > p, .um-painel details.um-secao > .um-campo, .um-painel details.um-secao > .um-vinculos { margin: 0 0 12px; }
.um-painel details.um-secao > .um-pilula, .um-painel details.um-secao > .um-obs-nova { margin-bottom: 16px; }
.um-painel .um-linha-link { display: flex; width: 100%; align-items: center; gap: 16px; min-height: 76px; padding: 0 24px; background: transparent; border: 0; border-bottom: 1px solid var(--um-borda); font: inherit; font-size: 15px; color: var(--um-texto); cursor: pointer; text-align: left; box-sizing: border-box; }
.um-painel .um-linha-link b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-painel .um-linha-link:hover, .um-painel details.um-secao > summary:hover { background: var(--um-bg-hover); }
.um-painel-corpo > .um-secao > .um-linha-link { padding: 12px 0; min-height: 44px; border-bottom: 0; font-size: 14px; }
/* campos: rótulo em cima (com "Adicionar"/"Ocultar" à direita na mesma linha), valor embaixo, 76px */
.um-painel .um-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 12px; min-height: 76px; box-sizing: border-box; }
.um-painel .um-campo > b { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 600; margin: 0; }
.um-painel .um-campo > .um-link { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; font-size: 14px; color: var(--um-texto-2); }
.um-painel .um-campo > span { grid-column: 1; grid-row: 2; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.um-painel .um-campo > span .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; }
.um-painel .um-campo > .um-ico-btn { grid-column: 2; grid-row: 2; width: 28px; height: 28px; }
.um-painel .um-campo > .um-input { grid-column: 1 / -1; grid-row: 3; }
.um-painel .um-ficha-terminal .um-campo { min-height: 0; padding: 6px 0; row-gap: 2px; }
.um-vinculos { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0; }
.um-vinculos .um-link { margin-right: 0; }
.um-obs { margin: 0 0 10px; padding: 10px 12px; background: var(--um-bg); border-radius: 8px; font-size: 14px; line-height: 1.4; }
.um-obs small, .um-log small { color: var(--um-texto-2); font-size: 12px; }
.um-log { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.um-painel .um-secao > .um-texto-2 { margin: 0; }
/* Detalhes: canal, setor, atendente, quem está vendo */
.um-badge-canal-inline { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #25D366; vertical-align: -4px; margin-right: 8px; }
.um-atendente { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 0 0 10px; }
.um-atendente .um-avatar--sm { width: 32px; height: 32px; font-size: 12px; grid-row: 1 / span 2; background: var(--um-primary); color: #fff; }
.um-atendente b { font-size: 16px; font-weight: 500; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-atendente small { font-size: 14px; color: var(--um-texto-2); grid-column: 2; }
.um-painel .um-secao > .um-avatar--sm { width: 32px; height: 32px; font-size: 12px; background: var(--um-primary); color: #fff; margin-right: 6px; }
/* botões do rodapé do Contato: cheios, 40px, raio 30; Excluir em vermelho */
.um-painel-botoes { display: flex; flex-direction: column; gap: 8px; }
.um-painel-botoes .um-pilula { justify-content: center; height: 40px; font-size: 16px; }
.um-pilula--borda { border: 1px solid var(--um-borda); } .um-pilula--borda:hover { background: var(--um-bg-hover); }
.um-pilula--perigo { border: 1px solid var(--um-erro); color: var(--um-erro); } .um-pilula--perigo:hover { background: var(--um-vermelho-bg); }
/* busca dentro do painel (Transferir, Chatbot, Encaminhar): 40px, raio 8 */
.um-painel-acao > .um-busca { margin: 16px 24px; padding: 0 12px; height: 40px; border: 1px solid var(--um-borda); border-radius: 8px; box-sizing: border-box; flex: none; }
.um-painel-acao > .um-busca .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; }
.um-painel-acao > .um-busca input { min-width: 0; font-size: 16px; }
.um-painel-acao > .um-busca input::placeholder { color: var(--um-texto-3); }
/* uma linha por setor/atendente/fluxo/etiqueta: 81px, ícone 48 quadrado, nome 700, "Online" à direita, rádio 20 */
.um-opcao { display: flex; align-items: center; gap: 16px; min-height: 81px; padding: 0 24px; border-bottom: 1px solid var(--um-borda); cursor: pointer; font-size: 15px; box-sizing: border-box; }
.um-opcao:hover { background: var(--um-bg-hover); }
.um-opcao:has(input:checked) { background: var(--um-ativo); }
.um-opcao > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.um-opcao > small, .um-opcao-txt small { font-size: 12px; color: var(--um-texto-2); white-space: nowrap; } .um-opcao .um-online { color: var(--um-nao-lidas); }
.um-opcao-txt { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.um-opcao-txt b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.um-opcao .um-avatar--sm { width: 48px; height: 48px; border-radius: 12px; background: var(--um-primary); color: #fff; font-size: 14px; flex: none; }
.um-opcao .um-avatar--sm .um-ico { width: 24px; height: 24px; }
.um-opcao .um-avatar--bot { width: 40px; height: 40px; background: var(--um-ambar-bg); color: var(--um-ambar-texto); }
.um-opcao > .um-radio, .um-opcao > .um-check { flex: none; width: 20px; height: 20px; margin: 0 0 0 auto; }
.um-opcao > .um-etiqueta { margin-right: auto; }
.um-painel-acao .um-secao:has(> .um-opcao) { padding: 0; border-bottom: 0; }
.um-opcao:has(> .um-etiqueta) { min-height: 56px; }
/* rodapé: textarea 90, checkbox, botão cheio 40 (desabilitado = cinza) */
.um-painel-rodape { margin-top: auto; padding: 16px 24px 24px; border-top: 1px solid var(--um-borda); background: var(--um-superficie); display: flex; flex-direction: column; gap: 12px; flex: none; }
.um-painel-rodape > label { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.um-painel-rodape .um-check { width: 20px; height: 20px; }
.um-motivo { min-height: 90px; resize: none; }
.um-painel-ok { width: 100%; justify-content: center; height: 40px; font-size: 16px; }
.um-painel-ok:disabled { background: var(--um-desabilitado); border-color: var(--um-desabilitado); color: var(--um-texto-3); cursor: not-allowed; }
.um-painel-rodape:has(> .um-pilula + .um-pilula) { flex-direction: row; } .um-painel-rodape:has(> .um-pilula + .um-pilula) > .um-pilula { flex: 1; justify-content: center; height: 40px; font-size: 16px; }
.um-painel-rodape > .um-pilula:not(.um-pilula--ativa) { border-color: var(--um-borda); }
/* formulários (Finalizar, Agendar, Nova conversa): rótulo 14 em cima, input 40 raio 8, textarea alta */
.um-painel .um-secao > label:not(.um-opcao), .um-nova-form .um-secao > label:not(.um-opcao) { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; margin: 0 0 16px; }
.um-painel input.um-input, .um-painel .um-select { height: 40px; padding: 8px 14px; font-size: 16px; box-sizing: border-box; }
.um-painel textarea.um-input { min-height: 96px; padding: 10px 14px; font-size: 16px; line-height: 1.4; resize: vertical; box-sizing: border-box; }
.um-painel .um-final-msg { min-height: 155px; }
.um-painel .um-agendar-texto { min-height: 120px; }
.um-painel p.um-secao { margin: 0; font-size: 15px; line-height: 1.5; color: var(--um-texto-2); }
.um-agendar-texto-wrap[hidden], .um-agendar-bot-wrap[hidden] { display: none; }
/* hidden vence qualquer display: declarado acima (label do formulário, chips, opções) — dentro dos painéis desta área. */
.um-painel [hidden], .um-filtros [hidden], .um-interno [hidden] { display: none !important; }
/* Agendar: as 3 opções (mensagem · nota · bot) como linhas de 70px com ícone quadrado 36 + chevron (r1-umbler-03-agendar) */
.um-painel-acao .um-abas { display: flex; flex-direction: column; gap: 0; background: transparent; border-radius: 0; margin: 0 -24px 16px; padding: 0; }
.um-painel-acao .um-abas .um-pilula { flex: none; justify-content: flex-start; gap: 16px; height: 70px; padding: 0 24px; border: 0; border-bottom: 1px solid var(--um-borda); border-radius: 0; font-size: 15px; color: var(--um-texto); background: transparent; }
.um-painel-acao .um-abas .um-pilula::before { content: ""; width: 36px; height: 36px; border-radius: 10px; background: var(--um-azul-bg) center / 20px no-repeat; flex: none; }
.um-painel-acao .um-abas .um-pilula::after { content: ""; width: 18px; height: 18px; margin-left: auto; background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236F7380'><path d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/></svg>"); }
.um-painel-acao .um-abas .um-pilula[data-tipo="mensagem"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23557CF2'><path d='M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78l.09-.07L83,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0Zm176-32H80a8,8,0,0,0-5.2,1.92L40,224V64H216Z'/></svg>"); }
.um-painel-acao .um-abas .um-pilula[data-tipo="nota"]::before { background-color: var(--um-ambar-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23614700'><path d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200Z'/></svg>"); }
.um-painel-acao .um-abas .um-pilula[data-tipo="bot"]::before { background-color: var(--um-ambar-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23614700'><path d='M200,48H136V16a8,8,0,0,0-16,0V48H56A32,32,0,0,0,24,80V192a32,32,0,0,0,32,32H200a32,32,0,0,0,32-32V80A32,32,0,0,0,200,48Zm16,144a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V80A16,16,0,0,1,56,64H200a16,16,0,0,1,16,16Zm-52-56H92a28,28,0,0,0,0,56h72a28,28,0,0,0,0-56Zm-28,16v24H120V152Zm-56,12a12,12,0,0,1,12-12h12v24H92A12,12,0,0,1,80,164Zm84,12H152V152h12a12,12,0,0,1,0,24ZM72,108a12,12,0,1,1,12,12A12,12,0,0,1,72,108Zm88,0a12,12,0,1,1,12,12A12,12,0,0,1,160,108Z'/></svg>"); }
.um-painel-acao .um-abas .um-pilula--ativa { background: var(--um-ativo); color: var(--um-texto); }
.um-painel-acao .um-abas .um-pilula:disabled { opacity: .5; cursor: not-allowed; }
.um-agendada { position: relative; padding: 12px 40px 12px 0; border-bottom: 1px solid var(--um-borda); font-size: 14px; line-height: 1.45; }
.um-agendada small { color: var(--um-texto-2); overflow-wrap: anywhere; }
.um-agendada .um-ico-btn { position: absolute; right: 0; top: 8px; width: 32px; height: 32px; }
/* Nova conversa = modal central 800×844 (r1-umbler-03-nova-conversa): abas em pílula, passos 1 → 2, lista de contatos 95px */
.um-app .um-painel--modal { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 800px; max-width: calc(100% - 32px); height: min(844px, calc(100% - 24px)); border: 0; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.24); }
.um-painel--modal .um-offcanvas-cab { flex-direction: row-reverse; padding: 20px 20px 8px 24px; min-height: 64px; font-size: 18px; }
.um-painel--modal .um-offcanvas-cab > span { text-align: left; }
.um-painel--modal .um-offcanvas-abas { background: var(--um-bg); border-radius: var(--um-raio-pilula); padding: 2px; margin: 4px 24px 8px; border-bottom: 0; gap: 0; overflow: hidden; }
.um-painel--modal .um-offcanvas-abas button { flex: 1; justify-content: center; height: 36px; border-radius: var(--um-raio-pilula); border-bottom: 0; margin: 0; font-size: 14px; color: var(--um-texto); }
.um-painel--modal .um-offcanvas-abas button.ativa { background: var(--um-primary); color: #fff; }
.um-painel--modal .um-offcanvas-abas button:disabled { color: var(--um-texto-3); opacity: 1; }
.um-passos { display: flex; align-items: flex-start; justify-content: center; gap: 0; padding: 20px 24px 12px; font-size: 14px; }
.um-passo { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--um-texto-2); white-space: nowrap; }
.um-passo-n { width: 28px; height: 28px; border-radius: 50%; background: var(--um-bg); color: var(--um-texto-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.um-passo--ativo { color: var(--um-texto); } .um-passo--ativo .um-passo-n { background: var(--um-primary); color: #fff; }
.um-passo-linha { width: 100px; height: 1px; background: var(--um-borda); margin: 14px 8px 0; flex: none; }
.um-nova-busca { padding: 12px 24px; }
.um-nova-busca .um-busca { margin: 0; height: 40px; padding: 0 14px; box-sizing: border-box; border-color: var(--um-primary); }
.um-nova-busca .um-busca input { font-size: 16px; min-width: 0; }
.um-nova-contato { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 18px; column-gap: 12px; align-items: center; width: 100%; min-height: 95px; padding: 12px 24px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--um-borda); background: transparent; text-align: left; font: inherit; font-size: 14px; color: var(--um-texto); cursor: pointer; }
.um-nova-contato:hover { background: var(--um-bg-hover); }
.um-nova-contato .um-avatar { width: 48px; height: 48px; }
.um-nova-contato--novo .um-avatar { background: var(--um-primary); color: #fff; }
.um-nova-contato-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.um-nova-contato-txt .um-nome { white-space: normal; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.um-nova-contato-txt .um-nome small { font-size: 14px; font-weight: 400; color: var(--um-texto-2); white-space: nowrap; }
.um-nova-contato-txt > small { font-size: 14px; }
.um-nova-contato > .um-chips { justify-content: flex-end; }
.um-nova-contato > .um-ico:last-child { color: var(--um-texto-2); width: 18px; height: 18px; }
.um-painel--modal .um-nova-form > .um-secao { max-width: 520px; margin: 0 auto; border-bottom: 0; }
.um-painel--modal .um-painel-lista .um-secao { padding: 32px 24px; text-align: center; }
/* toast: canto inferior direito, branco, ícone verde (Umbler 18/09 captura 07); erro = ícone vermelho */
.um-toast { left: auto; right: 24px; bottom: 24px; min-width: 300px; max-width: 480px; padding: 12px 12px 12px 16px; border-left: 0; border-radius: 8px; line-height: 1.35; box-sizing: border-box; }
.um-toast::before { content: ""; flex: none; width: 22px; height: 22px; background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2352C41A'><path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/></svg>"); }
.um-toast--erro::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23F5222D'><path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/></svg>"); }
.um-toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.um-toast-desfazer { height: 32px; padding: 0 14px; flex: none; }
.um-toast-fechar { width: 32px; height: 32px; flex: none; font-size: 20px; line-height: 1; color: var(--um-texto-2); }
/* filtros: conteúdo enquadrado em 292px (r1-umbler-01e-filtros): rótulo 14, select 258×32 raio 8, "+ Salvar Atalho", "Atalhos salvos" */
.um-filtros { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; font-size: 14px; background: var(--um-superficie); }
.um-filtros .um-offcanvas-cab { padding: 14px 12px 8px 20px; min-height: 52px; font-size: 16px; gap: 8px; box-sizing: border-box; }
.um-filtros .um-offcanvas-cab > .um-ico { width: 16px; height: 16px; color: var(--um-texto-2); }
.um-filtros-fechar { margin-left: auto; width: 32px; height: 32px; }
.um-filtros-form { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.um-filtro { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--um-texto); padding: 0 8px; min-width: 0; }
.um-filtro .um-select, .um-filtro .um-input { height: 32px; padding: 4px 10px; font-size: 14px; width: 100%; min-width: 0; box-sizing: border-box; }
.um-filtro-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
.um-filtro:has(> .um-check) { flex-direction: row; align-items: center; gap: 8px; }
.um-filtros-salvar { align-self: center; height: 32px; font-size: 13px; color: var(--um-texto-2); }
.um-filtros-salvar .um-ico { width: 16px; height: 16px; }
.um-filtros .um-secao { padding: 16px 24px; border-top: 1px solid var(--um-borda); border-bottom: 0; }
.um-filtros .um-secao h4 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.um-atalho { display: flex; align-items: center; gap: 4px; min-width: 0; }
.um-atalho .um-pilula { flex: 1; min-width: 0; display: block; height: 32px; line-height: 30px; padding: 0 10px; font-size: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-atalho .um-ico-btn { width: 32px; height: 32px; flex: none; }
/* seleção em massa (lista): faixa de 2 linhas — checkbox "Selecione uma conversa" + X · select 32 + Aplicar 32 (r1-umbler-01f) */
.um-lista .um-massa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "todos todos fechar" "acao etiqueta aplicar"; align-items: center; gap: 4px 8px; padding: 8px 12px 10px 20px; flex-wrap: nowrap; }
.um-lista .um-massa[hidden] { display: none; }
.um-lista .um-massa > label { grid-area: todos; font-weight: 600; gap: 10px; min-width: 0; }
.um-lista .um-massa > label .um-check { width: 20px; height: 20px; }
.um-lista .um-massa > .um-select:first-of-type { grid-area: acao; height: 32px; padding: 2px 10px; font-size: 14px; min-width: 0; }
.um-lista .um-massa > .um-select:nth-of-type(2) { grid-area: etiqueta; height: 32px; padding: 2px 10px; font-size: 14px; max-width: 140px; }
.um-lista .um-massa > .um-pilula { grid-area: aplicar; height: 32px; padding: 0 16px; }
.um-lista .um-massa > .um-pilula:disabled { background: var(--um-desabilitado); border-color: var(--um-desabilitado); color: var(--um-texto-3); cursor: not-allowed; }
.um-lista .um-massa > .um-ico-btn { grid-area: fechar; width: 32px; height: 32px; justify-self: end; }
/* chat interno: topo com "+", busca, pílulas soltas e linhas iguais à lista (r1-umbler-05-chat-interno) */
.um-interno { display: flex; flex-direction: column; flex: 1; min-height: 0; } .um-interno[hidden] { display: none; }
.um-interno-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 2px 16px; min-height: 52px; box-sizing: border-box; }
.um-interno-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--um-texto-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-interno-busca { padding: 0 12px; } .um-interno-busca .um-busca { margin: 8px 0; height: 40px; box-sizing: border-box; }
.um-interno-busca .um-busca input { min-width: 0; }
.um-abas--interno { background: transparent; margin: 4px 12px 8px; padding: 0; gap: 4px; }
.um-abas--interno .um-pilula { flex: 0 0 auto; padding: 4px 16px; }
.um-abas--interno[hidden] { display: none; }
.um-linhas--interno { flex: 1; min-height: 0; }
.um-linha--interna { align-items: center; }
.um-linha--interna .um-linha-meio, .um-linha--interna .um-linha-dir { height: auto; }
.um-linha--interna .um-avatar { background: var(--um-primary); color: #fff; }
.um-linha--interna .um-avatar .um-ico { width: 24px; height: 24px; }
.um-linha--interna .um-linha-dir { min-width: 48px; gap: 8px; }
.um-linha--interna .um-hora { font-size: 12px; }
.um-linhas--interno .um-vazio--lista { font-weight: 400; }
/* números (extra do Terminal, o Umbler não tem): grade de cartões enquadrada */
.um-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-content: start; padding: 16px 20px; }
.um-numeros-topo, .um-numero-novo, .um-numero-vazio, .um-qr { grid-column: 1 / -1; }
.um-numeros-topo { min-height: 36px; }
.um-numero-novo { align-items: center; } .um-numero-novo .um-input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; }
.um-numero { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 14px 40px; min-height: 96px; position: relative; box-sizing: border-box; }
.um-numero-luz { position: absolute; left: 16px; top: 22px; width: 12px; height: 12px; }
.um-numero-txt { flex: none; }
.um-numero-nome { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-numero-status { line-height: 1.4; }
.um-numero-acoes { margin-top: auto; }
.um-qr { max-width: 420px; justify-self: start; }
/* tema escuro: etiqueta e chip de setor dentro dos painéis/opções com contraste (só as classes desta área) */
:root[data-theme="dark"] .um-painel .um-etiqueta, :root[data-theme="dark"] .um-opcao .um-etiqueta, :root[data-theme="dark"] .um-nova-contato .um-etiqueta { background: #1F3A26; color: #BFE8C4; }
:root[data-theme="dark"] .um-painel .um-chip-setor { border-color: #4A5366; color: #C9CFDA; }
:root[data-theme="dark"] .um-painel-fundo { background: rgba(0, 0, 0, .65); }
:root[data-theme="dark"] .um-add-etiqueta-btn, :root[data-theme="dark"] .um-etiqueta--vazia { border-color: #8A93A3; color: #C9CFDA; }
:root[data-theme="dark"] .um-painel-ok:disabled, :root[data-theme="dark"] .um-lista .um-massa > .um-pilula:disabled { background: #2C3240; border-color: #2C3240; color: #8A93A3; }
@media (max-width: 900px) { .um-app .um-painel { width: 100%; } .um-app .um-painel--modal { width: 100%; max-width: 100%; height: 100%; border-radius: 0; } }
/* --- D, R3-7 (auditoria-ui-r2 §2.1/§2.6 · r2-umbler-05-chat-interno): topo do chat interno = topo da lista (73px, ícones 42,
   badge das não lidas ao lado do ícone da equipe), busca sem borda, linha pessoa/grupo com a anatomia da lista; toast como pílula
   no topo da coluna da conversa ("Conectado!" do Umbler, ~110×37 logo abaixo do cabeçalho); linhas-fantasma enquanto a lista carrega. */
.um-interno-topo { min-height: 73px; padding: 15px 12px 0; }
.um-interno-topo .um-lista-topo-esq { gap: 4px; }
.um-interno-topo .um-ico-btn { width: auto; min-width: 42px; padding: 0 6px; gap: 4px; box-sizing: border-box; }
.um-interno-topo .um-ico-btn--ativo { background: var(--um-ativo); color: var(--um-primary); }
.um-badge-topo { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 50px; background: var(--um-primary); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }
.um-interno-busca .um-busca { border: 0; }
.um-linha--interna img.um-avatar { object-fit: cover; }
.um-linha--interna .um-avatar--grupo { background: var(--um-ativo); color: var(--um-primary); }
.um-toast--pilula { position: absolute; top: 88px; right: auto; bottom: auto; transform: translateX(-50%); min-width: 0; max-width: min(520px, 90%); height: 37px; padding: 0 14px 0 12px; border-radius: var(--um-raio-pilula); box-shadow: 0 2px 8px rgba(0,0,0,.14); gap: 8px; white-space: nowrap; }
.um-toast--pilula > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-toast--pilula::before { width: 18px; height: 18px; }
.um-toast--pilula .um-toast-desfazer { height: 28px; padding: 0 12px; }
.um-toast--pilula .um-toast-fechar { width: 28px; height: 28px; font-size: 18px; }
/* linhas-fantasma: classes próprias (nunca .um-linha — os testes e o E2E contam .um-linha) com a mesma grade da linha real */
.um-linhas--esqueleto { flex: 1; min-height: 0; overflow: hidden; pointer-events: none; }
#umLinhas:not(:empty) ~ .um-linhas--esqueleto, .um-lista:has(.um-interno:not([hidden])) .um-linhas--esqueleto { display: none; }
#umLinhas:empty { display: none; } /* sem dado ainda, a coluna vazia (flex:1) empurrava as linhas-fantasma para o rodapé */
.um-fantasma { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; height: 106px; padding: 12px 16px; box-sizing: border-box; border-bottom: 1px solid var(--um-borda); }
.um-fantasma-avatar, .um-fantasma-nome, .um-fantasma-previa { background: var(--um-borda); animation: um-pulso 1.2s ease-in-out infinite; }
.um-fantasma-avatar { width: 48px; height: 48px; border-radius: 50%; }
.um-fantasma-nome { height: 14px; width: 55%; border-radius: 7px; margin: 0 0 10px; }
.um-fantasma-previa { height: 12px; width: 80%; border-radius: 6px; }
@keyframes um-pulso { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ===== ÁREA E — etiquetas ===== */
/* R4-C (auditoria-ui-r3.md D-3/§1.8): o Umbler usa 20 nomes de cor PRÓPRIOS (Tangerine/Umblerito/
   Tomato/Salmon/Violet/Skyblue/Aquamarine/Gold/Magenta/Green/Blue/Cyan/Kiwi/Amber/Chocolate/Rose/
   Pink/Grape/Gray/Silver) — a paleta Ant Design da R3-4 jogava 8 das 12 etiquetas do catálogo real no
   verde padrão e saía com o tom errado até nas 4 que "batiam" pelo nome. `estiloEtiqueta()`
   (etiquetas.js) resolve {bg, texto=borda=acento, bgEscuro, cor, emoji} pela tabela real e o JS grava
   as "3 cores" do tíquete no `style=""` do chip — --um-etq-bg (bg claro), --um-etq-acento (borda +
   texto do label + fundo do ícone) e --um-etq-bg-escuro (bg no tema escuro) — mais `data-cor` com o
   nome da paleta (para quem monta o ícone por fora — R4-B). Sem essas variáveis (harness antigo, chip
   sem catálogo) cai no mesmo verde que a área anterior já usava — nada regride. Sobrescreve só
   cor/borda/tamanho da label, nunca a forma (raio/altura já resolvidos acima). */
.um-etiqueta { background: var(--um-etq-bg, rgb(217,247,190)); color: var(--um-etq-acento, var(--um-verde-texto)); border-color: var(--um-etq-acento, var(--um-nao-lidas)); font-size: 12px; }
/* `.um-etiqueta-ico`: ícone do chip (emoji do catálogo — raro; escopo como ph-user é markup do R4-B),
   fundo = acento, traço claro fixo (rgb(211,214,221), igual ao "ícone branco" do Umbler nos 2 temas). */
.um-etiqueta-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; line-height: 1; font-size: 10px; border-radius: 50%; background: var(--um-etq-acento, var(--um-verde-texto)); color: rgb(211, 214, 221); }
/* Escuro (§1.8): bg vira o tom escuro da PRÓPRIA cor (nunca reaproveita o --um-etq-bg claro) e o
   label sai num cinza-claro fixo — só a borda continua no acento. `.um-app` (raiz de toda a aba)
   iguala a especificidade da regra antiga (`.um-painel`/`.um-opcao`/`.um-nova-contato`, ÁREA D) e,
   vindo depois no arquivo, garante que a lista/cabeçalho também ganhem o bg escuro real, não só os
   chips dentro de painéis. */
:root[data-theme="dark"] .um-app .um-etiqueta { background: var(--um-etq-bg-escuro, #1F3A26); color: rgb(211, 214, 221); border-color: var(--um-etq-acento, var(--um-nao-lidas)); }
/* Select nativo de etiqueta (filtro): background/color por <option> é best-effort (nem todo motor de
   navegador pinta a lista fechada de <select>) — o emoji no texto garante a distinção em qualquer um. */
select.um-select option { background: var(--um-superficie); color: var(--um-texto); }

/* ---- R3-5 (loop de paridade r3): painéis como o Umbler (r2-umbler-03-contato/transferir/agendar/finalizar/nova-conversa) ---- */
/* Contato: cabeçalho + abas fixos, corpo rola, rodapé FIXO com Bloquear/Excluir (Umbler: 451×40 cada, fora do scroll) */
.um-app .um-painel:has(> .um-painel-corpo) { display: flex; flex-direction: column; overflow: hidden; }
.um-painel > .um-offcanvas-cab, .um-painel > .um-offcanvas-abas { flex: none; }
.um-painel > .um-painel-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.um-app .um-painel > .um-painel-rodape--contato { flex-direction: column; gap: 8px; padding: 12px 24px 16px; }
.um-app .um-painel > .um-painel-rodape--contato > .um-pilula { flex: none; width: 100%; justify-content: center; height: 40px; font-size: 16px; }
/* "Ver mais campos": linha de 88px com o chevron para baixo; aberta, o chevron vira */
.um-painel .um-ver-mais { min-height: 88px; }
.um-painel .um-ver-mais > .um-ico:first-child { background: var(--um-bg); color: var(--um-primary); }
.um-painel .um-ver-mais--aberto > .um-ico:last-child { transform: rotate(180deg); }
.um-mais-campos { border-top: 1px solid var(--um-borda); }
.um-mais-campos[hidden] { display: none; }
/* Transferir / Nova conversa: busca + botão de ordenar (40×40, borda, raio 8) na mesma linha */
.um-painel-acao > .um-painel-busca-linha { display: flex; align-items: center; gap: 12px; padding: 16px 24px; flex: none; overflow: visible; }
.um-painel-busca-linha .um-busca { flex: 1; min-width: 0; margin: 0; height: 40px; padding: 0 12px; border-radius: 8px; box-sizing: border-box; }
.um-painel-busca-linha .um-busca .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; }
.um-painel-busca-linha .um-busca input { min-width: 0; font-size: 16px; }
.um-painel-ordenar { width: 40px; height: 40px; flex: none; border: 1px solid var(--um-borda); border-radius: 8px; color: var(--um-texto-2); }
.um-painel-ordenar .um-ico { width: 18px; height: 18px; }
/* ponto verde no ícone do setor/atendente com alguém online (Umbler: bolinha 10px no canto superior direito do quadrado 48) */
.um-opcao .um-avatar--sm { position: relative; }
.um-opcao .um-avatar--online::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #52C41A; border: 2px solid var(--um-superficie); }
/* Agendar: a linha do tipo escolhido (com o voltar) fica azul-claro como a seleção do Umbler; abas quebram em 2 linhas quando não cabem */
.um-painel-acao .um-abas .um-pilula[data-tipo-voltar]::after { display: none; }
.um-painel-acao .um-secao > .um-abas:last-child { margin-bottom: -20px; }
.um-painel-acao .um-abas .um-pilula[data-tipo-voltar]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23557CF2'><path d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/></svg>"); }
.um-painel-acao > .um-offcanvas-abas { flex-wrap: wrap; row-gap: 0; }
/* Nova conversa: busca + Etiquetas ▾ (select 140×40) + ordenar + "+" azul redondo (Umbler: 1050,252 → 40×40) */
.um-nova-busca { display: flex; align-items: center; gap: 10px; }
.um-nova-busca .um-busca { flex: 1; min-width: 0; }
.um-nova-etiqueta { flex: none; width: 150px; height: 40px; padding: 4px 12px; font-size: 14px; box-sizing: border-box; border-radius: 8px; }
.um-nova-busca .um-ico-btn--primary { width: 40px; height: 40px; flex: none; }
.um-painel--modal .um-nova-form:last-child { padding-bottom: 8px; }
:root[data-theme="dark"] .um-painel-ordenar { border-color: #4A5366; color: #C9CFDA; }

/* ---- D, R4-E (loop de paridade r4): chat interno = pessoas da equipe; Transferir e Nova conversa (auditoria-ui-r3 §2.6, §4 Q6/Q7) ---- */
/* Chat interno: topo com o "+99" da Entrada (pílula azul como o Umbler) e linha "Sem conversa ainda" do atendente sem DM */
.um-interno-topo .um-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 50px; background: var(--um-primary); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }
.um-linha--sem-conversa .um-previa { color: var(--um-texto-3); font-style: italic; }
.um-linha--sem-conversa .um-avatar { background: var(--um-bg); color: var(--um-primary); }
/* Transferir: respiro entre a busca e o 1º setor (Umbler: 25px; a linha da busca já dá 16) */
.um-painel-acao > .um-painel-busca-linha + .um-painel-lista { padding-top: 8px; }
/* Nova conversa (modal): o <form> era quem rolava, e a barra nascia colada nas abas. Agora o form é coluna sem rolagem:
   passos e busca ficam fixos, só a lista de contatos rola (barra fina, começa abaixo da busca); passo 2 / Atendentes / Grupo
   rolam dentro da própria seção quando não cabem. */
.um-painel--modal > .um-nova-form { display: flex; flex-direction: column; overflow: hidden; }
.um-painel--modal .um-nova-form > .um-passos, .um-painel--modal .um-nova-form > .um-nova-busca { flex: none; }
.um-painel--modal .um-nova-form > .um-painel-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; }
.um-painel--modal .um-nova-form > .um-secao { flex: 0 1 auto; min-height: 0; overflow-y: auto; width: 100%; box-sizing: border-box; }

/* ===== ÁREA R — responsivo ===== */
/* R2-1 (19/09): 1366×768 · 1080p · QHD · 4K · 21:9 · 32:9, com DPR 1 / 1.25 / 1.5 / 2. Antes a conversa esticava com a tela
   (a 5120×1440 a área de mensagens tinha 4546px: balões nas duas pontas, compositor de 4514px — ilegível). Regras:
   (1) a lista nasce em clamp(350px, 30%, 500px) da largura DEPOIS da barra de 60 — a regra do Umbler (`--conv-list-width`,
       auditoria-ui-r2 §6.1: 414 a 1440, 392 a 1366, 500 de 1920 em diante); numa faixa da grade a % resolve contra o .um-app
       inteiro, daí calc(30% - 18px) = 0.3 × (W − 60). Redimensionável (mín. 350); o valor arrastado (px) entra como estilo
       inline em .um-app e vence o clamp (index.js só grava/inline quando o usuário arrastou). Com o painel de Filtros aberto
       (.um-app--filtros, R3-1) a lista vai a 350 fixos pela faixa da grade — acima do inline — e a conversa recebe o resto
       (R3-6 entra no modo compacto pela mesma classe);
   (2) o CONTEÚDO da conversa (cabeçalho, busca na conversa, mensagens, compositor) fica limitado a --um-conteudo-max (1200px até o
       auditor trazer o número do Umbler; o controlador ajusta aqui) e centralizado na coluna: a sobra vira padding lateral de cada
       faixa, então fundo, borda inferior e barra de rolagem continuam de ponta a ponta da coluna, e o balão segue 70% DO CONTEÚDO
       (a % do max-width resolve contra a área da grade, que exclui o padding). --um-margem-conteudo usa 100% do bloco que contém
       cada faixa (= a coluna .um-conversa), por isso vale igual nas quatro e no popover do compositor;
   (3) altura de viewport ≤ 800px: compositor em repouso 160px (2+12+36+10+36+10+40+12+2) e cabeçalho/busca 60px;
   (4) tudo em px CSS / vw — nada lê px de tela, então DPR 1.25/1.5/2 dá as mesmas medidas.
   Painel 500 (encostado à direita) e modal 800 (centrado) já são absolutos dentro de .um-app e não mudam com a largura. */
/* mín. 380 (Umbler: 350) porque no Terminal a sidebar tira 196px do app — a 1440 a lista ficaria com 355; 380 dá o respiro do nome. */
.um-app { --um-lista-w: clamp(380px, calc(30% - 18px), 500px); --um-conteudo-max: 1200px; }
@media (min-width: 901px) { .um-app--filtros { grid-template-columns: 60px auto 350px 1fr; } }
.um-conversa { --um-margem-conteudo: max(0px, calc((100% - var(--um-conteudo-max)) / 2)); }
.um-conversa > .um-cab-slot > .um-cabecalho { padding-left: calc(8px + var(--um-margem-conteudo)); padding-right: calc(12px + var(--um-margem-conteudo)); }
.um-conversa > .um-busca-conv { padding-left: calc(8px + var(--um-margem-conteudo)); padding-right: calc(12px + var(--um-margem-conteudo)); }
.um-conversa > .um-mensagens { padding-left: calc(24px + var(--um-margem-conteudo)); padding-right: calc(24px + var(--um-margem-conteudo)); }
.um-conversa > .um-compositor-slot { padding-left: var(--um-margem-conteudo); padding-right: var(--um-margem-conteudo); }
.um-compositor-slot .um-comp-popover { left: calc(16px + var(--um-margem-conteudo)); }
@media (max-height: 800px) {
  .um-conversa > .um-cab-slot > .um-cabecalho { height: 60px; min-height: 60px; }
  .um-conversa > .um-busca-conv { height: 60px; }
  .um-conversa .um-compositor { margin: 8px 16px; padding: 12px; gap: 10px; }
  .um-conversa .um-compositor .um-comp-texto { min-height: 24px; }
}

/* ===== R3-6 — modo compacto da conversa + compositor (rápidas offcanvas, emoji por categoria, figurinhas, Notas) ===== */
/* Modo compacto (auditoria-ui-r2 §2.3/§2.5/§6.1; r2-umbler-01e-filtros.png): o Umbler entra nele quando a COLUNA da conversa tem
   ≤ ~720px (Filtros aberto a 1440, laptop 1366 com a sidebar do Terminal) — cabeçalho ‹ + nome + ⋮ (R2-5 já faz, pelo mesmo limiar
   719 medido no .um-cab-slot), compose bar SEM cartão (colada no rodapé da coluna: sem margem, raio, borda lateral nem sombra),
   pílulas Mensagem/Notas no RODAPÉ e ferramentas colapsadas no "+". O gatilho é a largura da conversa (container "conversa"),
   nunca a largura do compositor nem a classe do painel de Filtros: fora do compacto NUNCA colapsa. As pílulas mudam de linha sem
   mexer no HTML: topo e rodapé viram `display: contents`, os filhos entram direto na grade do compositor (5 colunas) e `order` põe
   ferramentas · cota · pílulas · microfone na última linha. Seletores com .um-conversa para vencer a regra de altura ≤ 800 da área R. */
.um-conversa { container-type: inline-size; container-name: conversa; }
@container conversa (max-width: 719px) {
  .um-conversa > .um-compositor-slot { padding: 0; }
  .um-conversa .um-compositor { margin: 0; padding: 12px 16px 16px; border-radius: 0; border-width: 1px 0 0; border-color: var(--um-borda); box-shadow: none; gap: 8px; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; }
  .um-conversa .um-compositor:focus-within { border-color: var(--um-borda); }
  .um-comp-topo, .um-comp-rodape { display: contents; }
  .um-comp-assinatura { grid-column: 1; }
  .um-comp-topo > [data-comp="assinatura"] { grid-column: 2; }
  .um-comp-canal { grid-column: 3; justify-self: start; margin-left: 0; }
  .um-comp-citacao, .um-comp-anexo, .um-comp-aviso, .um-compositor .um-comp-texto { grid-column: 1 / -1; }
  /* travado pela janela de 24 h (R3-2): cadeado no topo, texto e botões na linha inteira, pílulas descem com o resto */
  .um-comp-cadeado { grid-column: 1; }
  .um-comp-travado-texto, .um-comp-travado-acoes { grid-column: 1 / -1; }
  .um-comp-ferramentas { order: 8; grid-column: 1 / 3; }
  .um-comp-cota { order: 9; grid-column: 3; }
  .um-comp-modos { order: 10; grid-column: 4; margin-left: 0; }
  .um-comp-enviar { order: 11; grid-column: 5; margin-left: 0; }
  .um-comp-ferramentas > .um-ico-btn:not(.um-comp-mais), .um-comp-divisor { display: none; }
  .um-comp-mais { display: inline-flex; }
}
/* Modo Notas: borda dourada (#F2D272, 2px, medida em r1-umbler-04-notas.png) — a regra de área C (.um-compositor border-color
   --um-borda) vinha depois da antiga e a vencia; aqui a nota vence com e sem foco, inclusive no compacto (só a borda de cima). */
.um-app { --um-nota-borda: #F2D272; }
.um-compositor.um-compositor--nota, .um-compositor.um-compositor--nota:focus-within { border-color: var(--um-nota-borda); }
/* Respostas rápidas como offcanvas 500 (r1-umbler-04-rapidas): busca 40 + "+" azul 40, pílulas Todas/Minhas à esquerda, uma linha
   por resposta com ícone 36 + título 16/700 + texto INTEIRO (o popover antigo truncava em 140). */
.um-rapidas-topo { display: flex; align-items: center; gap: 12px; padding: 16px 24px 12px; flex: none; }
.um-rapidas-topo > .um-busca { flex: 1; min-width: 0; margin: 0; height: 40px; box-sizing: border-box; padding: 0 12px; }
.um-rapidas-topo > .um-busca input { min-width: 0; font-size: 16px; }
.um-rapidas-nova { flex: none; width: 40px; height: 40px; border-radius: 8px; } .um-rapidas-nova:disabled { opacity: .5; cursor: not-allowed; }
.um-painel-acao .um-rapidas-abas { margin: 0 24px 8px; align-self: flex-start; flex: none; }
.um-painel-acao .um-rapidas-lista { padding: 4px 12px 24px; gap: 4px; }
.um-painel-acao .um-rapida { padding: 12px; align-items: start; row-gap: 4px; }
.um-painel-acao .um-rapida > b { font-size: 16px; white-space: normal; line-height: 22px; }
.um-painel-acao .um-rapida > small { white-space: normal; font-size: 14px; line-height: 1.5; color: var(--um-texto); }
.um-painel-acao .um-rapidas-lista > p { padding: 8px 12px; }
/* Teclado de emoji (r1-umbler-04-emoji): barra de 8 categorias (ícone 18, a ativa azul) entre a busca e o corpo; o corpo rola com
   rótulo + grade por categoria (a grade em si não rola mais). Categoria sem resultado na busca some (hidden). */
.um-emojis-cats { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid var(--um-borda); border-radius: 8px; overflow: hidden; }
.um-emojis-cats button { height: 32px; padding: 0; border: 0; border-right: 1px solid var(--um-borda); background: transparent; color: var(--um-texto-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.um-emojis-cats button:last-child { border-right: 0; } .um-emojis-cats button .um-ico { width: 18px; height: 18px; } .um-emojis-cats button:hover { background: var(--um-bg-hover); }
.um-emojis-cats button.ativa { background: var(--um-primary); color: #fff; }
.um-emojis-corpo { overflow-y: auto; min-height: 0; display: grid; gap: 8px; align-content: start; }
.um-emojis-corpo .um-emojis { overflow: visible; }
.um-emojis-corpo[hidden], .um-emojis-grupo[hidden] { display: none; }
/* ===== R4-B — lista: coluna direita fixa, gutter da scrollbar, etiqueta 65 com ícone do escopo, "+99", altura sem vão, "vendo" ===== */
/* auditoria-ui-r3 §1.1–1.4, §2.2, §4 Q3/Q4/Q5 (r3-umbler-02-conversa-aberta.png / r3-umbler-1366.png):
   (1) altura: o app tinha calc(100vh − 120px) com o topo real do Terminal em 80 → 41 px de cinza embaixo em toda resolução.
       index.js mede o topo REAL (getBoundingClientRect do #umApp, na montagem, ao voltar para a aba e no resize) e grava
       --um-topo; o CSS só subtrai. Sem a variável (harness antigo) vale 120 como antes. border-box para a borda de 1 px não
       estourar a página;
   (2) linha: o Umbler tem flex `avatar 64 (48 + pe-3) · meio 257 · lado 57 FIXO` numa linha de 410 (lista 414, scrollbar
       overlay). A nossa grade era `48 · 1fr · auto` com gap 16 — o lado crescia com 3 avatares + chip (74 → 130) e o meio caía
       a 122 ("GUSTAVO DE CAS…"). Agora `48 · resto · 57`, gap só depois do avatar. `scrollbar-gutter: stable` + barra fina:
       a linha não muda de largura quando a barra aparece, e o padding direito da linha é o que sobra dos 16 depois da barra;
   (3) chip do setor 49×22, 11.5 px cinza (Umbler) com teto de 70 px medido na captura ("Pós Ven…"/"Pré-prot…" = 69 px: o chip
       é maior que a coluna de 57 e vaza 13 px para a esquerda, alinhado à direita — igual ao Umbler; o tíquete dizia 57, a
       captura diz 70); avatares dos atendentes empilhados (−6 px) e a bolinha das não lidas ao lado;
   (4) etiqueta: texto truncado com o nome inteiro no title — 65 px na lista ("Repes…", só texto, como a captura ampliada) e
       82 no cabeçalho, onde o chip de CONTATO ganha o bloco do ícone do escopo (`ph-user`) colado à esquerda (Umbler
       `.tag-icon`: bloco na cor do acento com traço claro — a COR é do R4-C, bloco E, via --um-etq-*; aqui só a forma).
       A regra antiga `.um-etiqueta .um-ico { display:none }` fica vencida só dentro de .um-etiqueta-ico;
   (5) cabeçalho a 1366 (Q3): o miolo tem 200 px e a etiqueta de 107 empurrava o avatar "TP está vendo" para a borda do
       miolo (cortado, encostado no ícone Contato). A etiqueta encolhe (flex 0 1 auto, ellipsis) e setor + vendo nunca;
   (6) "+99" do cabeçalho da lista era texto solto — vira a pílula azul 20 do Umbler (o "(1)" da equipe já era). */
.um-app { height: calc(100vh - var(--um-topo, 120px)); box-sizing: border-box; }
.um-lista .um-linhas { scrollbar-gutter: stable; scrollbar-width: thin; }
.um-lista .um-linha { grid-template-columns: 48px minmax(0, 1fr) 57px; column-gap: 0; padding-right: var(--um-linha-pad-dir, 6px); }
.um-lista .um-linha > .um-avatar-wrap { margin-right: 16px; }
.um-lista .um-linha-meio { padding-right: 4px; }
.um-lista .um-linha-dir { width: 57px; min-width: 57px; flex: none; }
.um-lista .um-linha-dir .um-chip-setor { max-width: 70px; box-sizing: border-box; font-size: 11.5px; color: var(--um-texto-3); padding: 0 7px; }
.um-lista .um-atendentes { gap: 0; }
.um-lista .um-atendentes .um-avatar--sm { margin-left: -6px; } .um-lista .um-atendentes .um-avatar--sm:first-child { margin-left: 0; }
.um-lista .um-atendentes .um-nao-lidas { margin-left: 4px; }
.um-lista .um-linha .um-etiqueta { max-width: 65px; box-sizing: border-box; padding: 0 8px; font-size: 12px; }
.um-lista .um-linha .um-etiqueta--vazia { padding: 0; }
.um-etiqueta-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-etiqueta--contato .um-etiqueta-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: stretch; width: 21px; margin: 0 2px 0 -8px; border-radius: 30px 0 0 30px; }
.um-etiqueta--contato .um-etiqueta-ico .um-ico { display: block; width: 14px; height: 14px; }
.um-cab-chips .um-etiqueta { flex: 0 1 auto; min-width: 0; max-width: 82px; box-sizing: border-box; gap: 0; padding: 0 8px; font-size: 12px; }
.um-cab-chips .um-etiqueta--vazia { flex: none; padding: 0; }
.um-cab-chips .um-chip-setor { flex: none; }
.um-cab-chips .um-vendo { flex: none; }
.um-lista-topo .um-contador-total .um-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--um-primary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }

/* Figurinhas: desde R4-A não é popover — o cartão do compositor troca de conteúdo (bloco R4-A no fim do arquivo). */

/* ===== R4-A — figurinhas no cartão do compositor + Notas ===== */
/* Figurinhas (r3-umbler-04-figurinhas, §1.6c): o CARTÃO do compositor (mesma borda/raio/sombra/margem) troca de conteúdo:
   busca 300×40 (borda azul no foco) + "?" azul pequeno, X redondo 42 com borda encostado à direita; faixa "Nada a mostrar"
   (--um-bg, r8, largura toda); "Nenhuma figurinha salva ainda." centrado. Altura mínima = a do compositor em repouso. */
.um-compositor--figurinhas { min-height: 220px; align-content: start; gap: 16px; }
.um-figurinhas-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.um-figurinhas-topo > .um-busca { flex: 0 1 300px; min-width: 0; margin: 0; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--um-borda); border-radius: 8px; }
.um-figurinhas-topo > .um-busca:focus-within { border-color: var(--um-primary); }
.um-figurinhas-topo > .um-busca input { min-width: 0; font-size: 16px; }
.um-figurinhas-topo > [data-figurinhas-ajuda] { flex: none; width: 32px; height: 32px; color: var(--um-primary); } .um-figurinhas-topo > [data-figurinhas-ajuda] .um-ico { width: 18px; height: 18px; }
.um-figurinhas-fechar { flex: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--um-borda); border-radius: 50%; color: var(--um-texto); } .um-figurinhas-fechar .um-ico { width: 18px; height: 18px; }
.um-figurinhas-vazio { background: var(--um-bg); border-radius: 8px; padding: 10px 16px; font-size: 14px; line-height: 20px; }
.um-figurinhas-nada { margin: 8px 0 0; text-align: center; color: var(--um-texto); font-size: 14px; }
@container conversa (max-width: 719px) { .um-compositor--figurinhas > * { grid-column: 1 / -1; } }
/* Modo Notas (r3-umbler-04-notas, §1.6c): fundo creme #FFFBE6 (token --um-nota), borda #F2D272 (R3-6), pílula Notas ativa dourada
   #D48806 sem o wrap cinza (regras na área C). O balão de nota usa o mesmo token de fundo. */

/* ===== R5-3 — UI r3 baixas restantes (auditoria-ui-r3.md §1.2–§1.7, §2; loop-paridade/tiquetes-r5.md) ===== */
/* Tooltip em balão escuro (--um-tooltip) no lugar do title nativo — a UX do Umbler. index.js troca title ↔ data-tip no hover
   (o title continua no markup para os testes). O balão em si era um ::after/::before aqui (position:absolute — cortado pelo overflow
   da lista, D5) e desde o R7-2 é o <div class="um-tip"> fixo do bloco R7-2. O SVG não recebe o ponteiro: o <title> dentro dele
   viraria tooltip nativo por cima do nosso. */
.um-app .um-ico-btn > .um-ico { pointer-events: none; }
:root[data-theme="dark"] .um-app { --um-tooltip: #E8EAF0; }
/* Cabeçalho da conversa (§1.4): voltar ‹ 42×42 (era 36), borda inferior #D9D9D9, chip do setor 49×22 em 12 px cinza (era 14 px preto). */
.um-cabecalho > .um-ico-btn[data-cab="recolher"], .um-busca-conv > .um-ico-btn[data-cab="recolher"] { width: 42px; height: 42px; }
.um-conversa > .um-cab-slot > .um-cabecalho { border-bottom-color: #D9D9D9; }
.um-cab-chips .um-chip-setor { font-size: 12px; color: var(--um-texto-3); padding: 0 8px; height: 22px; line-height: 20px; box-sizing: border-box; }
/* Balão (§1.5): hora 10.5 px, no enviado rgb(67,140,67) sem opacidade; avatar do autor 40 (foto do catálogo — conversa.js). */
.um-balao > .um-hora { font-size: 10.5px; }
.um-balao--out > .um-hora { color: rgb(67, 140, 67); opacity: 1; }
:root[data-theme="dark"] .um-app .um-balao--out > .um-hora { color: var(--um-balao-out-texto); }
.um-mensagens > .um-balao-autor { width: 40px; height: 40px; font-size: 14px; object-fit: cover; }
/* Evento de sistema (§1.5): cor rgba(34,34,34,.75) do .chat-metadata-part do Umbler (era --um-texto-2); no escuro fica o token. */
.um-mensagens > .um-evento { color: rgba(34, 34, 34, .75); }
:root[data-theme="dark"] .um-app .um-mensagens > .um-evento { color: var(--um-texto-2); }
/* Hover bar (§1.5, r3-umbler-02c-hover-balao): 174×38 r16, 5 botões de 30 com passo 34 (era 164×36 r30 passo 32). */
.um-hover-bar { height: 38px; padding: 4px; gap: 4px; border-radius: 16px; }
/* Menu ⋮ da mensagem: "Apagar para mim" na cor do texto; só "Apagar para todos" fica vermelho (regra da área B vencida aqui). */
.um-menu button[data-menu-msg="apagar"] { color: var(--um-texto); }
/* Painel Contato (§1.7): X 39×42 r30 com borda, nome 20/600 em até 2 linhas com o lápis no alto, Excluir com borda #DA606E. */
.um-painel > .um-offcanvas-cab:has(.um-avatar--lg) { grid-template-columns: 39px 88px minmax(0, 1fr); padding-top: 24px; }
.um-painel > .um-offcanvas-cab:has(.um-avatar--lg) > .um-ico-btn:first-child { width: 39px; height: 42px; box-sizing: border-box; border: 1px solid var(--um-borda); border-radius: 30px; }
.um-painel-cab-txt .um-nome { font-size: 20px; line-height: 24px; }
.um-painel-cab-txt .um-nome .um-ico-btn { align-self: flex-start; }
.um-app .um-painel > .um-painel-rodape--contato > .um-pilula--perigo { border-color: #DA606E; }
/* Transferir (§2.4, r3-umbler-03-transferir): sem a linha do contato; ícone do setor/atendente redondo. Só este painel tem os rádios `destino`. */
.um-painel-acao:has(input[name="destino"]) .um-painel-quem { display: none; }
.um-painel-acao:has(input[name="destino"]) .um-opcao .um-avatar--sm { border-radius: 50%; }
/* Rápidas (§1.6c): X 30 (era 36). Só este painel tem o topo das rápidas. */
.um-painel-acao:has(.um-rapidas-topo) > .um-offcanvas-cab > .um-ico-btn { width: 30px; height: 30px; }
/* Nova conversa (§2.4): "Etiquetas ▾" como dropdown de 186 (era <select> nativo de 150). */
.um-nova-etiqueta { width: 186px; appearance: none; -webkit-appearance: none; padding-right: 30px; background: var(--um-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236F7380' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; cursor: pointer; }
/* Anexar (§1.6c, r3-umbler-04-anexar): dropdown 127×114 r16 com itens de 28 (era 200×158 r12 com 36). */
.um-comp-popover--menu { width: 127px; min-width: 0; padding: 0; border-radius: 16px; overflow: hidden; }
.um-comp-popover--menu > .um-comp-op { height: 28px; padding: 0 12px; gap: 8px; border-radius: 0; font-size: 14px; }
.um-comp-popover--menu > .um-comp-op .um-ico { width: 14px; height: 14px; }
/* Filtros aberto (§1.2/§2.2): a lista continua com a largura de sempre (Umbler 414); a conversa recebe o resto e entra no modo
   compacto pelo container (R3-6). A regra da área R fixava 350. */
@media (min-width: 901px) { .um-app--filtros { grid-template-columns: 60px auto var(--um-lista-w) 1fr; } }
/* Compacto (§1.6b): compose bar sem cartão mas COM borda 2px (Umbler) — a R3-6 deixava 1px só em cima. */
@container conversa (max-width: 719px) { .um-conversa .um-compositor { border-width: 2px; } }
/* Tema escuro: chip do setor com contraste também na lista e no cabeçalho (a regra da área D só cobria os painéis). */
:root[data-theme="dark"] .um-app .um-chip-setor { border-color: #4A5366; color: #C9CFDA; }

/* R5-1 (b044/b045): Encaminhar para — uma linha por FICHA: nome em cima, telefone · setor · data embaixo; sentinela da rolagem */
.um-opcao[data-ficha] .um-opcao-txt { flex-direction: column; align-items: flex-start; gap: 2px; }
.um-opcao[data-ficha] .um-opcao-txt > small { white-space: normal; }
.um-painel-sentinela { height: 1px; }
/* R5-1 (a049): erro de validação NO campo (o modal não fecha) */
.um-input[aria-invalid="true"] { border-color: var(--um-erro); }
.um-campo-erro { display: block; margin-top: 4px; font-size: 12px; color: var(--um-erro); }

/* ===== R6-2 ===== */
/* Miúdos visuais restantes (auditoria-final.md §1 itens 14, 28, 38 e §6). */
/* (1) Cabeçalho compacto = ‹ + nome + ⋮ como o Umbler (r2-umbler-01e-filtros): o X some junto com os outros ícones — "Fechar
   conversa" é o último item do menu ⋮ (conversa.js, mesma porta data-cab="fechar"). A regra R2-5 poupava o X; esta vence. */
@container (max-width: 719px) { .um-cab-icones > .um-ico-btn[data-cab="fechar"] { display: none; } }
/* (1b) No compacto a linha da assinatura tem 2 colunas de auto + o canal: o nome truncava "teste_playwr…" — fica só o switch
   (o nome inteiro continua no popover do lápis, "Customizar assinatura"). */
@container conversa (max-width: 719px) { .um-conversa .um-comp-assinatura > b { display: none; } }
/* (2) Chip de etiqueta do painel Contato = o mesmo da lista/cabeçalho (chipEtiquetaHtml: ícone do escopo 21px colado à esquerda,
   cor do catálogo, nome com ellipsis) — trunca em 120px, com o X de tirar (18px) sempre inteiro à direita. */
.um-painel .um-chips .um-etiqueta { max-width: 120px; box-sizing: border-box; gap: 0; padding: 0 6px 0 8px; }
.um-painel .um-chips .um-etiqueta .um-ico-btn--xs { flex: none; margin: 0 0 0 2px; }
/* (3) "+" das rápidas: azul cheio como o Umbler mesmo desabilitado (era opacity .5 = azul-claro/cinza); habilitado só com
   podeCriar (compositor.js) — hoje ninguém cria pelo Terminal, o title diz "só pelo Umbler". */
.um-rapidas-nova:disabled { opacity: 1; background: var(--um-primary); color: #fff; cursor: not-allowed; }
/* (4) Filtros › Data: o <select> usa .um-select do .um-filtro; os 2 inputs dd/mm/aaaa só aparecem em "Personalizado" — guarda
   do `hidden` (a regra `.um-filtros [hidden]` já cobre, mas o teste hidden-guard pede a guarda pela classe). */
.um-filtro-datas[hidden] { display: none; }
/* ===== R6-4 ===== */
/* Lista 414 e nome inteiro a 1440/1366 (auditoria-final §6 item 4, §1 item 7). A sidebar do Terminal (196px) tira largura do
   .um-app (1440 → 1242, 1366 → 1168, 1920 → 1722 de clientWidth) e a fórmula do Umbler (30% depois da barra de 60, ÁREA R) dava
   355 a 1440 → clamp 380 → "GUSTAVO DE CASTRO PEREI…" (o nome mede 242px em Plus Jakarta Sans 700 16px e a área dele é a lista
   − 142). Fórmula nova: 38% − 57 → 414,96 a 1440 (Umbler 414), 386,84 a 1366 (nome cabe: 244,8 ≥ 242; e a conversa fica com
   1168 − 60 − 386,84 = 721 > 719, fora do modo compacto — 400 a 1366, como o tíquete sugeria, daria 708 e entraria), 500 a
   partir de 1466 de app (viewport ≈ 1662; 1920 já está no teto). Mín. 380 e teto 500 como antes; o px arrastado pelo usuário
   continua inline em .um-app e vence esta regra (a regra é de classe, sem forçar prioridade). Filtros aberto (R5-3) continua usando --um-lista-w. */
.um-app { --um-lista-w: clamp(380px, calc(38% - 57px), 500px); }
/* Na linha o nome ganha o espaço que a lista mais larga sobra: o chip do setor cabe na coluna direita de 57 (a R4-B deixava 70 e
   ele vazava 13px sobre o meio), a hora fica em 12px à direita e o meio tem min-width:0 (só o nome trunca, com ellipsis). */
.um-lista .um-linha-meio { min-width: 0; }
.um-lista .um-linha-dir .um-hora { font-size: 12px; }
.um-lista .um-linha-dir .um-chip-setor { max-width: 57px; }
/* ===== R7-1 ===== */
/* Etiqueta: o X de tirar (botaoTirarEtiquetaHtml, lista.js — cabeçalho da conversa, painel Contato, painel Detalhes) mora dentro
   do chip, à direita, e só aparece com o mouse em cima ou com foco por teclado (o botão continua na ordem do Tab, transparente:
   `:focus-within` no chip o revela). Cor = acento da etiqueta (no escuro fica a cor do rótulo, porque o acento sobre o fundo
   escuro da mesma cor não se lê). A lista (`.um-linha`) não recebe o X (o Umbler não tem).
   R7-4 (auditoria-ui-r7-micro D19/D44): o chip NÃO cresce e não há transição (o Umbler mostra o X seco, chip fixo em 82/59 e o
   rótulo encurta "Repes…" → "Repe", "Cliente" → "Clier"): o X é absoluto no canto direito do chip, pílula 24×18 com o FUNDO do
   chip, por cima do fim do rótulo — o rótulo continua com min-width:0 + ellipsis, e o que fica embaixo do X some. Nada muda de
   medida entre repouso e hover, em nenhum chip (nem nos curtos, que o max-width não segura).
   O seletor de 4 classes repete o de `.um-painel .um-chips .um-etiqueta .um-ico-btn--xs` (R6-2, margin) para vencê-lo. */
.um-etiqueta { position: relative; }
.um-etiqueta .um-etiqueta-x, .um-painel .um-chips .um-etiqueta .um-etiqueta-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 18px; margin: 0; padding: 0; opacity: 0; border-radius: 9px; background: var(--um-etq-bg, rgb(217,247,190)); color: var(--um-etq-acento, var(--um-verde-texto)); transition: none; }
.um-etiqueta .um-etiqueta-x .um-ico { display: block; width: 12px; height: 12px; }
.um-etiqueta:hover .um-etiqueta-x, .um-etiqueta:focus-within .um-etiqueta-x, .um-painel .um-chips .um-etiqueta:hover .um-etiqueta-x, .um-painel .um-chips .um-etiqueta:focus-within .um-etiqueta-x { opacity: 1; }
.um-etiqueta .um-etiqueta-x:hover { background: var(--um-etq-bg-escuro, rgba(0,0,0,.08)); color: rgb(211,214,221); }
:root[data-theme="dark"] .um-app .um-etiqueta .um-etiqueta-x { background: var(--um-etq-bg-escuro, #1F3A26); }
/* No toque não há hover: o X volta ao fluxo (o chip nasce com o espaço dele) e fica sempre visível. */
@media (hover: none) { .um-etiqueta .um-etiqueta-x, .um-painel .um-chips .um-etiqueta .um-etiqueta-x { position: static; opacity: 1; transform: none; margin-left: 2px; flex: none; } }
/* Pedido no ar (tirarEtiqueta, etiquetas.js): chip apagado e sem 2º clique até a resposta — acao:feita o tira, acao:falhou o devolve. */
.um-etiqueta[aria-busy="true"] { opacity: .5; pointer-events: none; }
:root[data-theme="dark"] .um-app .um-etiqueta .um-etiqueta-x { color: inherit; }
/* ===== R7-5 ===== */
/* Mensagens: mínimos detalhes do Umbler (auditoria-ui-r7-micro.md §1.3 D25–D30, §3). Markup em conversa.js (balaoHtml/eventoHtml). */
/* D25 — a barra do balão fica SEMPRE no DOM e aparece por opacity + transform em .12s (o Umbler; antes era display none→flex, sem
   fade). Escondida ela não recebe o mouse nem o Tab (visibility, atrasada pela duração do fade ao esconder; imediata ao mostrar).
   O translateY(-50%) é a centragem vertical de sempre (regra da área B); escondida ela nasce 4px abaixo e sobe. Aberto o menu ⋮
   (um-balao--menu, conversa.js) ela continua visível com o mouse no menu. */
.um-hover-bar { display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) translateY(4px); transition: opacity .12s ease-in-out, transform .12s ease-in-out, visibility 0s linear .12s; }
.um-balao:hover > .um-hover-bar, .um-balao--menu > .um-hover-bar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%); transition-delay: 0s, 0s, 0s; }
/* Ícones da barra: peso "bold" (traço de 8 no viewBox 256 engrossa o path regular do Phosphor para o do ph-bold), 16px, cor #1F1F1F em
   repouso e no hover — só o fundo muda (rgba(0,0,0,.06)); nada de azul. O ⋮ aberto fica com o fundo pressionado. */
.um-hover-bar .um-ico-btn { color: #1F1F1F; transition: background-color .15s ease-in-out; }
.um-hover-bar .um-ico-btn:hover { background: rgba(0, 0, 0, .06); color: #1F1F1F; }
.um-hover-bar .um-ico-btn[aria-expanded="true"] { background: rgba(0, 0, 0, .06); }
.um-hover-bar .um-ico { width: 16px; height: 16px; } .um-hover-bar .um-ico path { stroke: currentColor; stroke-width: 8; stroke-linejoin: round; }
:root[data-theme="dark"] .um-app .um-hover-bar .um-ico-btn { color: var(--um-texto); } :root[data-theme="dark"] .um-app .um-hover-bar .um-ico-btn:hover, :root[data-theme="dark"] .um-app .um-hover-bar .um-ico-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: var(--um-texto); }
/* Tooltip por atributo estático (data-tip nasce no markup, não só no hover como nos botões do index.js): enquanto o renderizador do
   R7-2 não chega, o ::after da R5-3 só aparece com o mouse em cima e respeita o \n das 3 linhas. Some junto com o ::after. */
.um-mensagens [data-tip]:not(:hover)::after, .um-mensagens [data-tip]:not(:hover)::before { content: none; }
.um-mensagens [data-tip]::after { white-space: pre; width: max-content; text-align: left; }
/* D26 — menu ⋮ (markup de paineis-acao.js, menuMsgHtml): raio 16, borda #F0F0F0, sombra tripla do Umbler, itens de 32 com padding 5/12 e
   raio 12, hover #FAFAFA; divisor antes de Encaminhar continua (área B), sem o raio de canto que a regra antiga dava ao item.
   Posição acima do ⋮: conversa.js (ancorarMenuMsg). */
.um-menu:has([data-menu-msg]) { min-width: 142px; padding: 4px; border-radius: 16px; border-color: #F0F0F0; box-shadow: 0 5px 12px 4px rgba(0,0,0,.09), 0 3px 6px rgba(0,0,0,.12), 0 1px 2px -2px rgba(0,0,0,.16); }
.um-menu:has([data-menu-msg]) > button { height: 32px; padding: 5px 12px; border-radius: 12px; box-sizing: border-box; white-space: nowrap; line-height: 22px; }
.um-menu:has([data-menu-msg]) > button:hover { background: #FAFAFA; }
.um-menu:has([data-menu-msg]) > button .um-ico { width: 16px; height: 16px; flex: none; }
.um-menu:has([data-menu-msg]) > button[data-menu-msg="encaminhar"] { border-top: 0; border-radius: 12px; margin-top: 5px; padding-top: 5px; position: relative; }
.um-menu:has([data-menu-msg]) > button[data-menu-msg="encaminhar"]::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; border-top: 1px solid var(--um-borda); }
:root[data-theme="dark"] .um-menu:has([data-menu-msg]) { border-color: var(--um-borda); } :root[data-theme="dark"] .um-menu:has([data-menu-msg]) > button:hover { background: var(--um-bg-hover); }
/* D27 — hora/✓✓ do balão como link: cursor pointer e o tooltip de 3 linhas (data-tip). */
.um-balao > .um-hora { cursor: pointer; transition: color .2s; }
/* D28 — evento de sistema clicável: cursor pointer, ▾ de 12px ao fim, detalhe ("por Fulano · data completa") numa linha própria
   abaixo, aberto pelo clique/Enter (aria-expanded). Foco só por teclado (anel do R7-2 quando chegar; aqui nada de anel preto). */
.um-mensagens > .um-evento { cursor: pointer; transition: color .2s; padding: 0 4px; border-radius: 8px; outline: none; }
.um-mensagens > .um-evento:hover { color: rgba(34, 34, 34, .95); } :root[data-theme="dark"] .um-app .um-mensagens > .um-evento:hover { color: var(--um-texto); }
.um-evento .um-evento-caret { width: 12px; height: 12px; margin-left: 2px; transition: transform .15s ease-in-out; } .um-evento[aria-expanded="true"] .um-evento-caret { transform: rotate(180deg); }
.um-evento .um-hora { cursor: pointer; }
.um-evento-detalhe { flex-basis: 100%; width: 100%; font-size: 12px; line-height: 18px; opacity: .85; cursor: default; }
.um-evento-detalhe[hidden] { display: none; }
/* D29 — separador de dia: pílula #FAFAFA sem sombra, texto #83858C, tooltip da data (data-tip = dd/mm/aaaa). */
.um-mensagens > .um-dia { background: #FAFAFA; box-shadow: none; color: #83858C; cursor: default; }
:root[data-theme="dark"] .um-app .um-mensagens > .um-dia { background: var(--um-superficie); color: var(--um-texto-2); }
/* Movimento reduzido: sem fade nem giro. */
@media (prefers-reduced-motion: reduce) { .um-hover-bar, .um-evento .um-evento-caret { transition: none; } }

/* ===== R7-2 ===== */
/* Tokens de micro-interação (auditoria-ui-r7-micro §3) + o componente de tooltip (D24/D5). Regras genéricas em `:where()` têm
   especificidade zero: só valem onde nenhuma regra específica já decide (o chevron .um-linha-menu e o X do chip mantêm o fade
   de opacity deles; o .um-lateral e o --primary mantêm as cores no hover). */
/* (1) Ícone NÃO muda de cor no hover — só o fundo (D1: Umbler #5B5B5B → #5B5B5B); :active fica azul (D13); primário active #4564C3. */
:where(.um-app) .um-ico-btn:where(:not(.um-ico-btn--primary, .um-ico-btn--aceso, .um-ico-btn--ativo)):hover { color: var(--um-texto-2); }
:where(.um-app) .um-ico-btn:where(:not(.um-ico-btn--primary)):active { color: var(--um-primary); }
.um-app .um-ico-btn--primary:active { background: var(--um-primary-active); }
/* (2) Transições do Umbler (Bootstrap): botões .15s ease-in-out em cor/fundo/borda/sombra; linha da lista background .3s (D54). */
:where(.um-app) :where(.um-ico-btn, .um-pilula, .um-menu button, .um-opcao, .um-rapida, .um-linha-link) { transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
:where(.um-app) :where(.um-linha) { transition: background-color .3s; }
/* (3) Duplo clique num ícone não seleciona texto (D56). */
.um-app .um-ico-btn, .um-app .um-ico { user-select: none; -webkit-user-select: none; }
/* (4) Desabilitado = opacity .65 + sem ponteiro, logo sem hover (D60). O "+" das rápidas fica azul cheio (decisão do R6-2). */
.um-app :is(button, .um-ico-btn, .um-pilula):disabled { opacity: .65; pointer-events: none; }
.um-app .um-rapidas-nova:disabled { opacity: 1; }
/* (5) Scrollbar 4 px, thumb #B1B6C7 raio 100, trilho transparente (D57) na lista, nas mensagens e no corpo do painel. Firefox só
   aceita thin + scrollbar-color; no Chrome 121+ essas duas propriedades DESLIGAM o ::-webkit-scrollbar, por isso voltam a auto
   onde o ::-webkit-scrollbar existe. Overlay (barra por cima do conteúdo) não é controlável por CSS. */
.um-app .um-linhas, .um-app .um-mensagens, .um-app .um-painel-corpo { scrollbar-width: thin; scrollbar-color: #B1B6C7 transparent; }
@supports selector(::-webkit-scrollbar) {
  .um-app .um-linhas, .um-app .um-mensagens, .um-app .um-painel-corpo { scrollbar-width: auto; scrollbar-color: auto; }
  .um-app .um-linhas::-webkit-scrollbar, .um-app .um-mensagens::-webkit-scrollbar, .um-app .um-painel-corpo::-webkit-scrollbar { width: 4px; height: 4px; }
  .um-app .um-linhas::-webkit-scrollbar-thumb, .um-app .um-mensagens::-webkit-scrollbar-thumb, .um-app .um-painel-corpo::-webkit-scrollbar-thumb { background: #B1B6C7; border-radius: 100px; }
  .um-app .um-linhas::-webkit-scrollbar-track, .um-app .um-mensagens::-webkit-scrollbar-track, .um-app .um-painel-corpo::-webkit-scrollbar-track { background: transparent; } }
/* (6) Foco (D55, decisão do controlador): o mouse nunca vê anel; teclado (:focus-visible) vê 2px #557CF2 offset 2 em botões, linhas,
   chips e pílulas — nunca o anel preto nativo. Campos de texto não ganham anel (neles o Chrome liga :focus-visible até no clique);
   o foco é a borda (compositor já faz; painéis no R7-7/D46). Na linha o anel fica por dentro (o overflow da lista cortaria). */
.um-app :is(button, [role="button"], .um-linha, .um-etiqueta, .um-pilula, a, input, select, textarea):focus { outline: none; }
.um-app :is(button, [role="button"], .um-linha, .um-etiqueta, .um-pilula, a, input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--um-primary); outline-offset: 2px; }
.um-app .um-linha:focus-visible { outline-offset: -2px; }
.um-app .um-lateral .um-ico-btn:focus-visible { outline-color: #fff; }
.um-app :is(input:where(:not([type="checkbox"], [type="radio"])), select, textarea):focus-visible { outline: none; }
/* (7) Tooltip (D24): UM <div class="um-tip" role="tooltip"> fixo em #umApp (index.js ligarTooltips) — sai de qualquer overflow.
   bg #31343B (escuro #E8EAF0/texto #1F1F1F), 13px/19.5 400, pad 5/8, raio 4, sombra 0 0 12px #444, max-width 256 com quebra e
   `pre-line` (o "\n" do data-tip vira linha: datas em 3 linhas), seta losango 11 px (rotate 45) embaixo quando acima do alvo e em
   cima quando abaixo; --um-tip-seta = onde a seta aponta (index.js). */
.um-tip { position: fixed; top: 0; left: 0; z-index: 9999; box-sizing: border-box; max-width: 256px; padding: 5px 8px; border-radius: 4px; background: var(--um-tooltip); color: var(--um-tooltip-texto); font: 400 13px/19.5px var(--um-fonte); text-align: center; white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 0 12px #444; pointer-events: none; }
.um-tip::after { content: ""; position: absolute; left: var(--um-tip-seta, 50%); width: 11px; height: 11px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.um-tip[data-lado="acima"]::after { bottom: -4px; }
.um-tip[data-lado="abaixo"]::after { top: -4px; }
.um-tip[hidden] { display: none; }

/* ===== R7-6 ===== */
/* Compositor (auditoria-ui-r7-micro §1.4 D34/D35/D39/D40/D41 e §3; tiquetes-r7.md R7-6). Tokens locais: no Umbler os 4 ícones
   do meio (emoji · rápidas · chatbot · figurinhas) descansam em #1F1F1F e no hover mudam SÓ o fundo (rgba(0,0,0,.06)); anexar e
   os dois lápis descansam em #31343B e no hover mudam SÓ a cor (#212529). Tudo em .15s ease-in-out. No escuro a cor de repouso é
   a do texto e o hover clareia. */
.um-compositor { --um-comp-ico: #1F1F1F; --um-comp-ico-2: #31343B; --um-comp-ico-hover: #212529; --um-comp-hover: rgba(0,0,0,.06); }
:root[data-theme="dark"] .um-app .um-compositor { --um-comp-ico: var(--um-texto); --um-comp-ico-2: var(--um-texto-2); --um-comp-ico-hover: var(--um-texto); --um-comp-hover: rgba(255,255,255,.08); }
.um-comp-ferramentas > .um-ico-btn { color: var(--um-comp-ico); transition: color .15s ease-in-out, background-color .15s ease-in-out; }
.um-comp-ferramentas > .um-ico-btn:hover { background: var(--um-comp-hover); color: var(--um-comp-ico); }
.um-comp-ferramentas > [data-comp="anexar"], .um-comp-ferramentas > [data-comp="atalhos-chatbot"], .um-comp-topo > [data-comp="assinatura"] { color: var(--um-comp-ico-2); transition: color .15s ease-in-out, background-color .15s ease-in-out; }
.um-comp-ferramentas > [data-comp="anexar"]:hover, .um-comp-ferramentas > [data-comp="atalhos-chatbot"]:hover, .um-comp-topo > [data-comp="assinatura"]:hover { background: transparent; color: var(--um-comp-ico-hover); }
/* Desabilitado (lápis dos atalhos, chatbot sem suporte, anexar em SMS): opacity .65 (§3) e NENHUM hover; o cursor não acusa
   "proibido" (o tooltip continua explicando). Vence o `.um-comp-ferramentas .um-ico-btn:disabled` da área C (opacity .4). */
.um-comp-ferramentas > .um-ico-btn:disabled, .um-comp-ferramentas > .um-ico-btn:disabled:hover { opacity: .65; cursor: default; background: transparent; color: var(--um-comp-ico); }
.um-comp-ferramentas > [data-comp="anexar"]:disabled:hover, .um-comp-ferramentas > [data-comp="atalhos-chatbot"]:disabled:hover { color: var(--um-comp-ico-2); }
/* D35: pílulas Mensagem/Notas com hover — ativa escurece (#557CF2 → #4869CE, borda #4463C2), inativa ganha o fundo do hover;
   em Notas a ativa é #D4B106 (medida ao vivo no r7 — o rgb(212,136,6) anotado na área C era #D48806, mais laranja) → #BA9C06. */
.um-comp-modos > .um-pilula { transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; }
.um-comp-modos > .um-pilula:not(.um-pilula--ativa):hover { background: var(--um-comp-hover); color: var(--um-comp-ico); }
.um-comp-modos > .um-pilula--ativa:hover { background: #4869CE; border-color: #4463C2; color: #fff; }
.um-compositor--nota .um-comp-modos > .um-pilula--ativa { background: #D4B106; border-color: #D4B106; color: #fff; }
.um-compositor--nota .um-comp-modos > .um-pilula--ativa:hover { background: #BA9C06; border-color: #BA9C06; color: #fff; }
/* D40: busca do picker de emoji com foco = borda 2px #557CF2 (o padding cai 1px para o campo não pular; altura fixa 40). */
.um-comp-popover--emoji > .um-busca { transition: border-color .15s ease-in-out; }
.um-comp-popover--emoji > .um-busca:focus-within { border: 2px solid #557CF2; padding: 5px 9px; }
/* D41: X das figurinhas — hover só cor (azul), sem fundo; o "?" fica como está (só o tooltip mudou, no compositor.js). */
.um-figurinhas-fechar { transition: color .15s ease-in-out, background-color .15s ease-in-out; }
.um-figurinhas-fechar:hover { background: transparent; color: #557CF2; }
/* D39: popover Anexar — borda #F0F0F0 + sombra tripla do §3, itens raio 12 pad 0/12 com hover #FAFAFA. A altura fica em 28 (a medida
   do R5-3, 127×114, e o passo de 28 px dos itens em r7-umbler-15) — o "32" do tíquete é o do menu Ordenar, não deste. */
.um-comp-popover--menu { border-color: #F0F0F0; box-shadow: 0 5px 12px 4px rgba(0,0,0,.09), 0 3px 6px rgba(0,0,0,.12), 0 1px 2px -2px rgba(0,0,0,.16); }
.um-comp-popover--menu > .um-comp-op { border-radius: 12px; padding: 0 12px; transition: background-color .15s ease-in-out; }
.um-comp-popover--menu > .um-comp-op:hover:not(:disabled) { background: #FAFAFA; }
:root[data-theme="dark"] .um-app .um-comp-popover--menu { border-color: var(--um-borda); } :root[data-theme="dark"] .um-app .um-comp-popover--menu > .um-comp-op:hover:not(:disabled) { background: var(--um-bg-hover); }
/* Ponte para o renderizador atual (R5-3: `[data-tip]::after`, que pinta sempre que o atributo existe): com o data-tip FIXO no
   markup o balão só pode aparecer no hover. Quando o R7-2 trocar o ::after pelo <div class="um-tip"> esta regra vira letra morta. */
.um-compositor [data-tip]:not(:hover)::after, .um-compositor [data-tip]:not(:hover)::before { content: none; }
/* ===== R7-4 ===== */
/* Etiquetas e cabeçalho nos mínimos detalhes do Umbler (auditoria-ui-r7-micro.md §1.2 D19–D23, §1.5 D44/D45, §2, §3). O ajuste
   do chip (X absoluto, chip fixo, 0 ms) está no bloco R7-1 acima; aqui o resto. */
/* (D20/D21/D45) "Adicionar etiquetas" (botaoAddEtiquetaHtml, etiquetas.js): círculo 22px, 1px dashed #D3D6DD, ícone tag —
   escondido em repouso (visibility: o lugar fica reservado, nada pula) e visível no hover/foco da área de chips do cabeçalho
   (.um-cab-chips) e dos painéis (.um-chips); sempre visível quando é o único (sem chip: `--sempre`) e no toque. */
.um-add-etiqueta-btn { width: 22px; height: 22px; border: 1px dashed #D3D6DD; color: #D3D6DD; box-sizing: border-box; flex: none; visibility: hidden; }
.um-add-etiqueta-btn .um-ico { width: 12px; height: 12px; }
.um-add-etiqueta-btn:hover { border-color: #D3D6DD; color: #D3D6DD; background: var(--um-bg-hover); }
.um-cab-chips:hover .um-add-etiqueta-btn, .um-cab-chips:focus-within .um-add-etiqueta-btn, .um-chips:hover .um-add-etiqueta-btn, .um-chips:focus-within .um-add-etiqueta-btn, .um-add-etiqueta-btn--sempre { visibility: visible; }
@media (hover: none) { .um-add-etiqueta-btn { visibility: visible; } }
/* (D20/D44) o chip dos painéis trunca em 82 como o do cabeçalho — o Umbler mostra "Repes…" (82×22) no Contato e no Detalhes; o
   R6-2 tinha 120 (o nome inteiro "Repescagem" = 107, que o Umbler corta). */
.um-painel .um-chips .um-etiqueta { max-width: 82px; }
/* Popover do cabeçalho (abrirPopoverEtiqueta): um .um-menu no body, ancorado abaixo do botão, com o mesmo formulário do painel. */
.um-menu--etiqueta { min-width: 308px; padding: 8px; font-family: var(--um-fonte); color: var(--um-texto); } /* no body, fora do .um-app: a fonte não vem sozinha */
.um-menu--etiqueta .um-add-etiqueta { margin-top: 0; }
/* (D21/D23) avatar do cabeçalho é botão (abre o Contato). O badge do canal e o setor levam `data-tip` estático: o balão é o
   `.um-tip` do R7-2 (index.js), que serve qualquer elemento. */
.um-cabecalho > .um-avatar-wrap[role="button"] { cursor: pointer; }
/* Nome do cabeçalho inteiro a 1440 (prod-r7-1-hover.png: conversa de 767px com a sidebar do Terminal → o miolo ficava com 233px
   e "GUSTAVO DE CASTRO PEREIRA" mede 242): abaixo de 900px de conversa os 8 ícones ficam com passo 46 (gap 4) e o avatar/miolo
   perdem os 4px de margem — 36px a mais para o nome (269), que só trunca quando realmente não cabe. Acima de 900 nada muda. */
@container (max-width: 899px) { .um-cabecalho > .um-avatar-wrap, .um-cab-meio { margin-left: 0; } .um-cab-icones { gap: 4px; } }
/* ===== R7-3 ===== */
/* Lista com os mínimos detalhes do Umbler (loop-paridade/auditoria-ui-r7-micro.md §1.1, capturas r7-umbler-01*). D2: a linha
   ATIVA mantém o fundo azul (--um-ativo) e a barra inset no hover — antes trocava para --um-bg-hover e perdia o destaque. */
.um-linha--ativa:hover { background: var(--um-ativo); }
/* D1/D3: "Atribuir para mim" (botaoAtribuirHtml, lista.js) — círculo 26 px tracejado no lugar do avatar do atendente, só nas
   fichas sem operador; nasce invisível e entra no hover da linha (ou foco por teclado) com backInRight .2s. Continua na ordem do
   Tab. `.um-ico-btn` base é 36 px: aqui 26. Pedido no ar = disabled (apagado, sem 2º clique). */
@keyframes um-back-in-right { from { transform: translateX(16px) scale(.7); opacity: .7; } to { transform: none; opacity: 1; } }
.um-lista .um-atribuir { width: 26px; height: 26px; padding: 0; border: 1px dashed rgba(0,0,0,.15); border-radius: 50%; background: var(--um-superficie); color: rgba(0,0,0,.45); opacity: 0; box-sizing: border-box; flex: none; }
.um-lista .um-atribuir .um-ico { width: 14px; height: 14px; }
.um-linha:hover .um-atribuir, .um-atribuir:focus-visible { opacity: 1; animation: um-back-in-right .2s both; }
.um-lista .um-atribuir:hover { background: var(--um-bg-hover); color: var(--um-texto-2); border-color: rgba(0,0,0,.3); }
.um-lista .um-atribuir:disabled { opacity: .5; pointer-events: none; }
:root[data-theme="dark"] .um-lista .um-atribuir { border-color: rgba(255,255,255,.25); color: var(--um-texto-2); }
/* D4: chevron 16×24 caret-down bold (iconeBold) à direita do chip do setor. Só o fade de opacity (.12s, ÁREA A) — sem o
   translateX do backInRight: o chevron que desliza debaixo do mouse parado dispara mouseout/mouseover no alvo do tooltip
   (.um-tip do R7-2) e o balão some no meio do hover (E2E r7-2-tooltip-portal). */
.um-lista .um-linha-menu { width: 16px; height: 24px; padding: 0; border-radius: 4px; margin-right: 0; } /* padding 0: o 1px 6px nativo do button esmagava o svg para 4px */
.um-lista .um-linha-menu .um-ico { width: 16px; height: 16px; }
/* D6: X no chip da LISTA (R7-1 `.um-etiqueta-x`, agora também aqui). Sem transição (o Umbler mostra seco) e o chip NÃO ganha
   max-width no hover: fica no teto de 65 (R4-B) e o rótulo encurta ("Clier ✕" na captura 01e). */
.um-lista .um-linha .um-etiqueta { gap: 0; }
.um-lista .um-linha .um-etiqueta .um-etiqueta-x { transition: none; }
/* D11: abas — a ativa escurece (--um-primary-hover; R7-2 leva o token a #4869CE), a inativa só escurece o texto. */
.um-abas .um-pilula--ativa:hover { background: var(--um-primary-hover); border-color: var(--um-primary-hover); }
.um-abas .um-pilula:not(.um-pilula--ativa):hover { color: var(--um-texto); }
/* D16: menu Ordenar — a opção ATUAL (aria-current, abrirMenu) com o fundo --um-ativo. */
.um-menu button[aria-current="true"] { background: var(--um-ativo); }
/* ===== R7-7 ===== */
/* Painéis + toast: entrada animada, foco dos campos, hovers dos botões (auditoria-ui-r7-micro §1.5 D43/D46–D53, §1.7 D59). */
/* (D50) Offcanvas entra como o do Umbler: nasce fora da tela à direita e desliza com `transform .3s ease-in-out` — a classe
   `--aberto` entra no frame seguinte à inserção (camadas.js animarEntrada) e sai antes do nó deixar o DOM (animarSaida, ≤ 350 ms).
   O backdrop preto .5 (R3-5) só muda a opacidade (.15s linear). O modal Nova cai 50px com fade, como o `.modal.fade` do Bootstrap. */
.um-app .um-painel { transform: translateX(100%); transition: transform .3s ease-in-out; }
.um-app .um-painel.um-painel--aberto { transform: none; }
.um-painel-fundo { opacity: 0; transition: opacity .15s linear; }
.um-painel-fundo.um-painel-fundo--aberto { opacity: 1; }
.um-app .um-painel--modal { transform: translate(-50%, calc(-50% - 50px)); opacity: 0; transition: transform .3s ease-out, opacity .15s linear; }
.um-app .um-painel--modal.um-painel--aberto { transform: translate(-50%, -50%); opacity: 1; }
.um-painel--saindo { pointer-events: none; }
/* (D43) X do painel Contato/Detalhes sem borda (a R5-3 punha 1px #DFDFDF; mesma especificidade, esta vence por vir depois);
   hover de todo X de offcanvas = `rgba(0,0,0,.05)` + texto, como o `btn-offcanvas` do Umbler. */
.um-painel > .um-offcanvas-cab:has(.um-avatar--lg) > .um-ico-btn:first-child { border: 0; }
.um-painel .um-offcanvas-cab > .um-ico-btn[data-painel="fechar"] { transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.um-painel .um-offcanvas-cab > .um-ico-btn[data-painel="fechar"]:hover { background: rgba(0,0,0,.05); color: var(--um-texto); }
/* (D46/D49) Campos dos painéis e dos Filtros: foco = borda #6689F3, nunca o anel preto nativo (textarea do motivo, textarea do
   Finalizar, selects, inputs do Nova e dos Filtros); a busca dos painéis leva a borda no <label> — azul no focus-within. */
.um-painel .um-input:focus, .um-painel .um-select:focus, .um-filtros .um-input:focus, .um-filtros .um-select:focus { outline: none; border-color: #6689F3; }
.um-painel .um-input, .um-painel .um-select, .um-filtros .um-input, .um-filtros .um-select, .um-painel .um-busca { transition: border-color .15s ease-in-out; }
.um-painel .um-busca:focus-within { border-color: #6689F3; }
.um-painel .um-busca > input:focus { outline: none; }
/* (D53) Selects dos Filtros com hover de borda azul, como as pílulas de filtro do Umbler. */
.um-filtros .um-select:hover, .um-filtros .um-input:hover { border-color: #6689F3; }
.um-filtros-titulo { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.um-filtros-titulo > .um-ico { width: 16px; height: 16px; color: var(--um-texto-2); }
/* (D47) Links "Adicionar" (fixo/e-mail/gênero/endereço) em pílula com o hover `btn-hover` do Umbler (bg rgba(0,0,0,.02), texto
   #6F7380 → #5B5B5B). */
.um-painel .um-campo > .um-link { padding: 4px 10px; border-radius: var(--um-raio-pilula); transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.um-painel .um-campo > .um-link:hover { background: rgba(0,0,0,.02); color: #5B5B5B; }
/* (D48) Rodapé do Contato: "Excluir contato" hover = fundo vermelho cheio + texto branco; "Bloquear" hover = texto azul. */
.um-app .um-painel > .um-painel-rodape--contato > .um-pilula { transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; }
.um-app .um-painel > .um-painel-rodape--contato > .um-pilula--perigo:hover { background: #DA606E; border-color: #DA606E; color: #fff; }
.um-app .um-painel > .um-painel-rodape--contato > .um-pilula--borda:hover { color: var(--um-primary); }
/* Opções do Agendar (3 linhas de 70px) e linhas de setor/atendente/bot/contato com o hover neutro #FAFAFA do Umbler (D51, "Agendar"). */
.um-painel-acao .um-abas .um-pilula { transition: background-color .15s ease-in-out; }
.um-painel-acao .um-abas .um-pilula:not(:disabled):not(.um-pilula--ativa):hover { background: #FAFAFA; }
.um-painel-acao .um-opcao { transition: background-color .15s ease-in-out; }
.um-painel-acao .um-opcao:hover { background: #FAFAFA; }
/* (D59) Toast entra/sai com opacity .15s (toast.js: `--visivel` no frame seguinte; some no fim do tempo com o mesmo fade). */
.um-toast { opacity: 0; transition: opacity .15s linear; }
.um-toast.um-toast--visivel { opacity: 1; }
/* Tema escuro: os hovers medidos são do tema claro do Umbler (não há escuro lá); no nosso escuro ficam os tons da superfície. */
:root[data-theme="dark"] .um-painel .um-offcanvas-cab > .um-ico-btn[data-painel="fechar"]:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .um-painel .um-campo > .um-link:hover { background: rgba(255,255,255,.04); color: var(--um-texto); }
:root[data-theme="dark"] .um-painel-acao .um-abas .um-pilula:not(:disabled):not(.um-pilula--ativa):hover, :root[data-theme="dark"] .um-painel-acao .um-opcao:hover { background: var(--um-bg-hover); }
/* Quem pediu menos movimento não vê transição nenhuma: painel, backdrop, modal e toast aparecem e somem secos (o JS também pula
   o frame de espera e o transitionend). */
@media (prefers-reduced-motion: reduce) { .um-app .um-painel, .um-painel-fundo, .um-app .um-painel--modal, .um-toast { transition: none; } }
/* ===== R8-3 ===== */
/* CSS global igual ao Umbler (loop-paridade/auditoria-ui-r8.md §1.1 U-4/U-5/U-17/U-21/U-22/U-23, §1.3 U-37, §1.7 U-66/U-67/U-68, §2, §3;
   capturas r8-umbler-01/09/20). Os blocos antigos `.um-ico-btn` (r800, --um-ico) e `.um-menu` (fonte, r16, item 42) foram editados no
   lugar — uma regra no fim do arquivo venceria também `.um-ico-btn--aceso`/`.um-menu--cab`, que vêm depois deles. */
:root { --um-ico: #5B5B5B; } /* cor de repouso dos botões de ícone (U-68); no escuro cai no cinza claro da aba */
:root[data-theme="dark"] { --um-ico: var(--um-texto-2); }
:root[data-theme="dark"] .um-menu { border-color: var(--um-borda); }
/* U-22 (regressão da r7) + U-21: o Umbler tem `avatar 48 + pe-3 16` = coluna de 64 antes do texto; a R4-B punha margin-right 16 no
   avatar dentro de uma coluna de 48 — a margem vazava por cima do meio e o círculo encostava no nome (0 px). Coluna 64 (o avatar fica
   nos 48 da esquerda) e pad-direita 12 + gutter da barra 4 = coluna direita a 16 da borda da lista, como lá (era 6 + 4 = 10). A lista
   continua 414 a 1440 (R6-4); o meio perde os 22 px que estavam "sobrando" — a 1366 (386,84) o nome de 242 px (700) passa a
   truncar; a R8-2 deixa 700 só na linha aberta e o nome em 400 cabe. */
.um-lista .um-linha { grid-template-columns: 64px minmax(0, 1fr) 57px; padding-right: 12px; }
.um-fantasma { grid-template-columns: 64px minmax(0, 1fr); gap: 0; padding-right: 12px; }
/* U-17: título "Ordenar por:" 14/21 (nunca teve regra: saía com os 13 px do Terminal). */
.um-menu-titulo { font-size: 14px; line-height: 21px; padding: 4px 10px 8px; color: var(--um-texto); }
/* U-4: `svg.channel-icon` do Umbler = círculo 24 sem borda em (−5, +29) do avatar 48, na cor do canal (WhatsApp da Umbler = roxo
   #7662FA medido na captura 01; o verde #25D366 era o do WhatsApp "puro"). O desenho branco do WhatsApp continua no background-image. */
.um-badge-canal { width: 24px; height: 24px; border: 0; border-radius: 50%; left: -5px; bottom: -5px; background-color: #7662FA; background-size: 16px; }
/* U-5: "sem etiqueta" (lista, cabeçalho, painéis) e "+ etiqueta" = `button.edit-tag` 22×22 transparente, 1 px DOTTED #4E4E4E, `ph-tag`
   16 #D3D6DD. A lista saía verde (a ÁREA E pinta todo .um-etiqueta) e 24; o cabeçalho, dashed #D3D6DD. O `.um-add-etiqueta-btn` fica
   em :where para o hover da R7-4 (0,2,0) continuar vencendo. */
.um-app .um-etiqueta--vazia { width: 22px; height: 22px; padding: 0; box-sizing: border-box; border: 1px dotted #4E4E4E; background: transparent; color: #D3D6DD; border-radius: 50%; }
:where(.um-app) .um-add-etiqueta-btn { border: 1px dotted #4E4E4E; color: #D3D6DD; }
.um-app .um-etiqueta--vazia .um-ico, .um-add-etiqueta-btn .um-ico { width: 16px; height: 16px; }
:root[data-theme="dark"] .um-app .um-etiqueta--vazia, :root[data-theme="dark"] :where(.um-app) .um-add-etiqueta-btn { border-color: #8A93A3; color: #C9CFDA; }
/* U-66/U-13/U-23: o Umbler usa a fonte Phosphor regular em `ph-lg` = 18,67 px nos botões de 42 do topo da lista e do cabeçalho; os
   nossos SVG (mesmos paths, preenchimento) saíam em 20 — 7 % maiores, traço mais grosso. O "+" primário e o compositor (R8-5) ficam
   fora. ‹ recolher = `ph-caret-left` 14 #979CAD (U-23). */
.um-lista-topo .um-ico-btn:not(.um-ico-btn--primary) > .um-ico, .um-cab-icones .um-ico-btn > .um-ico, .um-busca-conv > .um-ico-btn > .um-ico { width: 18.67px; height: 18.67px; }
.um-cabecalho > .um-ico-btn[data-cab="recolher"], .um-busca-conv > .um-ico-btn[data-cab="recolher"] { color: #979CAD; }
.um-cabecalho > .um-ico-btn[data-cab="recolher"] > .um-ico, .um-busca-conv > .um-ico-btn[data-cab="recolher"] > .um-ico { width: 14px; height: 14px; }
/* U-23: ícones do cabeçalho com gap 4 e 8 px até a borda (x 1036…1386 no Umbler; era gap 8 / pad 12). */
.um-cab-icones { gap: 4px; }
.um-conversa > .um-cab-slot > .um-cabecalho { padding-right: calc(8px + var(--um-margem-conteudo)); }
/* U-37: separador de dia `chat-divisor-hour` 34 px = 12/18 + pad 8 (era 32 com line-height 32 e pad 0/10). */
.um-mensagens > .um-dia { height: 34px; line-height: 18px; padding: 8px; }
/* O menu ⋮ do balão (R7-5) tem item 32 medido no Umbler: o min-height 42 do `.um-menu button` (menus da lista) não vale nele. */
.um-menu:has([data-menu-msg]) > button { min-height: 32px; }
/* Botão "equipe" do topo com o badge de não lidas: `.um-lista-topo .um-ico-btn { width: 42px }` (0,2,0) vencia o `width: auto` de
   `.um-equipe` (0,1,0) e o SVG era esmagado a 10 px para caber ao lado do badge (`[equipe 1]` do Umbler é mais largo que 42). */
.um-lista-topo .um-ico-btn.um-equipe { width: auto; } .um-equipe > .um-ico { flex: none; }

/* ===== R8-4 ===== */
/* Mensagens (auditoria-ui-r8.md §1.2 U-27/U-28, §1.3 U-29…U-39; tiquetes-r8.md R8-4). Medido no Umbler em 20/09. */
/* (U-29) O verde #405E40 do Umbler fica no CONTÊINER `.chat-bubble`; o texto `.chat-message-ballon` é #31343B 14/22 (o <b> 700 na
   mesma cor). Nota idem (U-33): texto #31343B sobre #FFFAEB. O balão recebido continua na cor de sempre. */
.um-balao { line-height: 22px; }
.um-balao .um-balao-texto { color: #31343B; font-size: 14px; line-height: 22px; }
.um-balao--nota .um-balao-texto { color: #31343B; }
.um-balao--out .um-balao-texto b, .um-balao--out .um-balao-texto strong, .um-balao--nota .um-balao-texto b, .um-balao--nota .um-balao-texto strong { color: #31343B; font-weight: 700; }
.um-balao--nota { background: #FFFAEB; }
/* (U-30) Hora do balão: `a.no-link` 8,75/13,1 #6F7380 + `ph-bold ph-checks` 14 #6F7380 (a "10,5 verde" da r3 era o contêiner
   `.chat-message-hour`). A R5-3 punha o verde rgb(67,140,67); aqui a mesma especificidade, vindo depois, vence. Falhou continua vermelho. */
.um-balao > .um-hora { font-size: 8.75px; line-height: 13.1px; color: #6F7380; opacity: 1; margin-top: 8px; }
.um-balao--out > .um-hora, .um-balao--nota > .um-hora { color: #6F7380; opacity: 1; }
.um-balao > .um-hora .um-ico { width: 14px; height: 14px; color: #6F7380; }
.um-balao > .um-hora .um-ico path { stroke: currentColor; stroke-width: 8; stroke-linejoin: round; }
.um-balao > .um-hora .um-ico--lido { color: #6F7380; }
.um-balao > .um-hora .um-ico--falhou { color: var(--um-erro); }
.um-balao > .um-hora .um-ico--note-blank path { stroke-width: 0; }
/* (U-31) Evento recolhido: ator e valores em <strong> 700 na linha; a hora na cor do evento rgba(34,34,34,.75), não #6F7380. */
.um-mensagens > .um-evento .um-hora { color: inherit; font-size: 12px; line-height: 18px; }
.um-mensagens > .um-evento strong { font-weight: 700; }
/* (U-32) Citação: `summary-bg` bg rgba(0,0,0,.06), borda-esq 4 currentColor, r6, pad 6/6/6/12, texto `summary-body` 10,5/15,75;
   o <b> (assinatura *Fulano:*) em azul #557CF2; gap 10 até o texto. Sem limite de altura artificial: o Umbler mostra o trecho inteiro. */
.um-balao > .um-citacao { background: rgba(0, 0, 0, .06); border-left: 4px solid currentColor; border-radius: 6px; padding: 6px 6px 6px 12px; font-size: 10.5px; line-height: 15.75px; margin: 0 0 10px; max-height: none; color: #31343B; }
.um-balao > .um-citacao b { color: #557CF2; font-weight: 700; }
/* (U-34) Documento em linha (`a.chat-file-bubble`): ícone 42×42 bg #722ED1 r6 + `ph-file-pdf` 21 branco · nome 600 14/21 · "PDF"
   12,25 rgba(34,34,34,.75). */
.um-balao > .um-anexo--doc { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 8px; } /* `.um-balao > .um-anexo` (área B) punha display:block — era o "em coluna" da U-34 */
.um-anexo--doc .um-ico { width: 42px; height: 42px; border-radius: 6px; padding: 10.5px; }
.um-anexo--doc .um-ico--file-pdf { background: #722ED1; }
.um-anexo--doc > span { line-height: 21px; }
.um-anexo--doc > span > b { font-size: 14px; line-height: 21px; color: #31343B; max-width: 420px; }
.um-anexo--doc > span > small { font-size: 12.25px; line-height: 18px; color: rgba(34, 34, 34, .75); }
/* (U-35) Avatar só no 1º balão do bloco: nos seguintes o placeholder 40×0 mantém a coluna sem desenhar nada. */
.um-mensagens > .um-balao-autor--vazio { height: 0; min-height: 0; visibility: hidden; }
/* (U-37) Espaço entre balões 8 (o Umbler tem `mt-1` = 4 entre balões consecutivos do mesmo bloco; a grade usa 16 — aqui 8 nas
   linhas de balão, o separador de dia fica com o R8-3). */
.um-mensagens { row-gap: 8px; }
.um-mensagens > .um-dia { margin: 8px 0; }
/* (U-38) Barra do balão: botões 30 r30 com ícones `ph-bold` 14 (eram svg 16 r50%). */
.um-hover-bar .um-ico-btn { border-radius: 30px; }
.um-hover-bar .um-ico { width: 14px; height: 14px; }
/* (U-28) X da busca na conversa: `ph-x` 16 #000 em 40×48. */
.um-busca-conv > [data-busca-fechar] { width: 40px; height: 48px; color: #000; border-radius: 30px; }
.um-busca-conv > [data-busca-fechar] .um-ico { width: 16px; height: 16px; }
/* (U-27) Conversa FINALIZADA: o compositor some (classe posta por conversa.js — compositor.js não sabe) e no lugar entra o cartão
   branco r16 (captura r8-umbler-71): `ph-check` azul 24, frase 14/22 #31343B e o botão primário "Nova conversa" 133×42 r30.
   Mesmas margens/largura do compositor (16 + a margem de conteúdo do R3-6). */
.um-conversa--finalizada > .um-compositor-slot { display: none; }
.um-finalizada { flex: none; margin: 16px; margin-left: calc(16px + var(--um-margem-conteudo, 0px)); margin-right: calc(16px + var(--um-margem-conteudo, 0px)); background: #FFFFFF; border-radius: 16px; box-shadow: var(--um-sombra-compositor); padding: 24px 16px 16px; display: grid; gap: 16px; justify-items: start; min-width: 0; box-sizing: border-box; }
.um-finalizada[hidden] { display: none; }
.um-finalizada > .um-ico { width: 24px; height: 24px; color: #557CF2; }
.um-finalizada > .um-ico path { stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.um-finalizada > p { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: #31343B; }
.um-finalizada-nova { height: 42px; padding: 0 16px; border-radius: 30px; border: 0; background: var(--um-primary); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease-in-out; }
.um-finalizada-nova:hover { background: var(--um-primary-hover); }
.um-finalizada-nova:focus-visible { outline: 2px solid var(--um-primary); outline-offset: 2px; }
@container conversa (max-width: 719px) { .um-conversa .um-finalizada { margin: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--um-borda); padding: 16px; } }
/* Tema escuro: as cores medidas são do tema claro do Umbler; no escuro ficam os tokens da superfície. */
:root[data-theme="dark"] .um-app .um-balao .um-balao-texto, :root[data-theme="dark"] .um-app .um-balao--out .um-balao-texto b, :root[data-theme="dark"] .um-app .um-balao--out .um-balao-texto strong { color: var(--um-texto); }
:root[data-theme="dark"] .um-app .um-balao--nota { background: var(--um-nota); } :root[data-theme="dark"] .um-app .um-balao--nota .um-balao-texto { color: var(--um-texto); }
:root[data-theme="dark"] .um-app .um-balao > .um-hora, :root[data-theme="dark"] .um-app .um-balao > .um-hora .um-ico { color: var(--um-texto-2); }
:root[data-theme="dark"] .um-app .um-balao > .um-citacao { color: var(--um-texto); background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .um-app .um-anexo--doc > span > b { color: var(--um-texto); } :root[data-theme="dark"] .um-app .um-anexo--doc > span > small { color: var(--um-texto-2); }
:root[data-theme="dark"] .um-app .um-busca-conv > [data-busca-fechar] { color: var(--um-texto); }
:root[data-theme="dark"] .um-app .um-finalizada { background: var(--um-superficie); } :root[data-theme="dark"] .um-app .um-finalizada > p { color: var(--um-texto); }
/* ===== R8-5 ===== */
/* Compositor igual ao do Umbler (auditoria-ui-r8 §1.4 U-40…U-49; capturas r8-umbler-30/34/35/36/39/40). Só o compositor, o
   modal de assinatura, os popovers dele e o corpo das rápidas no offcanvas. */
/* (U-45) Citação = 1ª linha do cartão, acima do switch: 60 de altura, bg #F0F0F0 r8, borda-esq 4 px azul, texto 13 px renderizado
   (negrito da assinatura, sem asteriscos), ⊗ `x-circle` vermelho 32 à direita. */
.um-comp-citacao { min-height: 60px; box-sizing: border-box; gap: 12px; padding: 8px 12px 8px 16px; border-left: 4px solid var(--um-primary); border-radius: 8px; background: #F0F0F0; font-size: 13px; line-height: 20px; color: var(--um-texto); }
.um-comp-citacao > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.um-comp-citacao > span b { font-weight: 700; }
.um-comp-citacao > .um-comp-citacao-x { width: 32px; height: 32px; padding: 0; color: #DA606E; border-radius: 50%; } /* padding 0: o 1px/6px do <button> nativo encolhia o svg (flex) para 20 */
.um-comp-citacao .um-comp-citacao-x .um-ico { width: 32px; height: 32px; flex: none; } /* vence o `.um-comp-citacao .um-ico-btn .um-ico` 16 da área C */
.um-comp-citacao > .um-comp-citacao-x:hover { background: transparent; color: #C4404F; }
/* (U-41) Linha do switch: 40 px; switch 44×22 r44 (bolinha 18); lápis 30×22 r30 com o ícone 14 #31343B. */
.um-comp-topo { height: 40px; gap: 8px; }
input.um-assinatura { width: 44px; height: 22px; border-radius: 44px; } /* R9-1 (V-1): escopado no input, como o bloco da área C */
input.um-assinatura::after { width: 18px; height: 18px; }
input.um-assinatura:checked::after { left: 24px; }
.um-comp-topo > [data-comp="assinatura"] { width: 30px; height: 22px; border-radius: 30px; color: var(--um-comp-ico-2, #31343B); }
.um-comp-topo > [data-comp="assinatura"] .um-ico { width: 14px; height: 14px; }
/* (U-40) Grupo Mensagem/Notas com o anel de 2 px #EEF2FE (40 de altura) e pílulas 36 pad 4/8, ícone 18,67 + gap 8 (`me-2`). */
.um-comp-modos { border: 2px solid var(--um-bg); box-sizing: border-box; height: 40px; border-radius: 32px; }
.um-comp-modos .um-pilula { height: 36px; padding: 4px 8px; gap: 8px; box-sizing: border-box; line-height: 22px; }
.um-comp-modos .um-pilula .um-ico { width: 18.67px; height: 18.67px; }
.um-compositor--nota .um-comp-modos { border-color: transparent; }
/* (U-44) Textarea 3 linhas de 24,5 sem padding (72 no Umbler; 73,5 = 3 × 24,5); 16 entre as linhas do cartão. */
.um-compositor .um-comp-texto { min-height: 73.5px; padding: 0; line-height: 24.5px; max-height: 196px; }
@media (min-height: 801px) { .um-conversa .um-compositor { gap: 16px; } } /* ≤ 800 mantém o gap 10 da R4 (1366×768): o cartão em repouso vai a 152,5 = 2+12+40+10+24,5+10+40+12+2 */
/* (U-42/U-43) Ferramentas 40 r30 com ícone Phosphor regular 18,67; divisor 1×30; mic/avião 21 no botão de 37. */
.um-comp-ferramentas > .um-ico-btn { border-radius: 30px; }
.um-comp-ferramentas > .um-ico-btn .um-ico { width: 18.67px; height: 18.67px; }
.um-comp-divisor { height: 30px; }
.um-comp-enviar .um-ico { width: 21px; height: 21px; }
/* (U-46/U-49) Emoji e Anexar SOBREPOSTOS ao compositor: a base fica 70 px acima do fim do slot (margem 16 + pad 16 + rodapé 40 − 2),
   logo acima da linha das ferramentas — antes ficavam inteiros acima do cartão. Busca do emoji em pílula r30, emoji 20, categorias 30. */
.um-comp-popover--emoji, .um-comp-popover--menu { bottom: 70px; }
.um-comp-popover--emoji > .um-busca { border-radius: 30px; }
.um-comp-popover--emoji > .um-busca:focus-within { border-radius: 30px; }
.um-emojis button { font-size: 20px; }
.um-emojis-cats button { height: 30px; }
.um-emojis-rotulo { font-weight: 700; }
/* (U-47) Rápidas no offcanvas: ícone 36 + título 16/600 na 1ª linha; o corpo 16/24 desce para a 2ª linha na LARGURA TODA. */
.um-painel-acao .um-rapida-ico { grid-row: 1; }
.um-painel-acao .um-rapida > small { grid-column: 1 / -1; font-size: 16px; line-height: 24px; }
/* (U-48) Modal "Edição de assinatura": 500 de largura, altura livre, r16, pad 24; título 20/600; input pílula r30 40 com 2 px
   #DFDFDF; ajuda 12 px; botões à direita — "✕ Cancelar" com borda, "💾 Salvar" primário (r30 herdado de .um-pilula). */
.um-assinatura-slot:empty { display: none; }
.um-app .um-assinatura-modal { width: 500px; max-width: calc(100% - 32px); height: auto; max-height: calc(100% - 24px); padding: 24px; border-radius: 16px; box-sizing: border-box; overflow: hidden; font-size: 14px; }
.um-assinatura-form { display: grid; gap: 8px; }
.um-assinatura-modal h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 26px; color: var(--um-texto); }
.um-assinatura-modal .um-assinatura-nome { width: 100%; height: 40px; border-radius: 30px; border: 2px solid var(--um-borda); padding: 0 16px; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--um-texto); background: var(--um-superficie); }
.um-assinatura-modal .um-assinatura-nome:focus { outline: none; border-color: #6689F3; }
.um-assinatura-modal .um-assinatura-nome::placeholder { color: var(--um-texto-3); }
.um-assinatura-ajuda { font-size: 12px; line-height: 18px; color: var(--um-texto); }
.um-assinatura-botoes { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.um-assinatura-botoes .um-pilula { height: 40px; padding: 4px 16px; font-size: 16px; gap: 8px; }
.um-assinatura-botoes .um-pilula .um-ico { width: 16px; height: 16px; }
.um-assinatura-botoes .um-pilula--ativa:hover { background: var(--um-primary-hover); border-color: var(--um-primary-hover); }
:root[data-theme="dark"] .um-comp-citacao { background: var(--um-bg); }
/* ===== R8-2 ===== */
/* Lista: peso do nome, prévia com autor, não lida, chevron, massa, vazio, avatar, topo (loop-paridade/auditoria-ui-r8.md §1.1
   U-1/2/3/6/7/8/9/10/11/13/14/15/16/18; capturas r8-umbler-01/04/05/06/10–12). Só filhos da linha, topo, busca, abas, massa e
   vazio — o grid da .um-linha e o .um-menu são do R8-3. Cores medidas no tema claro do Umbler; no escuro ficam os tokens. */
/* U-1: nome 16 em 400 em TODAS as linhas (inclusive não lidas) e 700 SÓ na conversa aberta (`chat-card-open`); cor #31343B. */
.um-lista .um-linha-meio .um-nome { font-weight: 400; color: #31343B; }
.um-lista .um-linha--ativa .um-linha-meio .um-nome { font-weight: 700; }
/* U-2: prévia 14/21 — última do CONTATO em #83858C; PRÓPRIA em #1F1F1F com o autor da assinatura em <b> 700. */
.um-lista .um-previa--contato { color: #83858C; }
.um-lista .um-previa--propria { color: #1F1F1F; }
.um-lista .um-previa--propria b { font-weight: 700; }
/* U-3/U-8: ✓✓ `ph-bold ph-checks` 14 #1F1F1F antes do texto (lida ou não — o Umbler não muda a cor na lista); áudio = "Áudio" +
   `ph-microphone` 14 #1F1F1F DEPOIS do texto. */
.um-lista .um-previa .um-previa-check { width: 14px; height: 14px; color: #1F1F1F; flex: none; }
.um-lista .um-previa .um-previa-mic { width: 14px; height: 14px; color: #1F1F1F; flex: none; }
/* U-6: linha não lida = hora 12/18 600 e badge 18 #389E0D 12 600. */
.um-lista .um-linha--nao-lida .um-hora { font-weight: 600; }
.um-lista .um-linha--nao-lida .um-nao-lidas { font-weight: 600; }
/* U-7: o chevron "Mais opções" da linha ATIVA também só aparece no hover (a R7-3 o deixava em repouso; regressão da r7). */
.um-lista .um-linha--ativa .um-linha-menu { opacity: 0; }
.um-lista .um-linha--ativa:hover .um-linha-menu, .um-lista .um-linha--ativa .um-linha-menu:focus-visible { opacity: 1; }
/* U-9: avatar do atendente 26×26 sem borda (era 24 + 2 px brancos). */
.um-lista .um-atendentes .um-avatar--sm { width: 26px; height: 26px; border: 0; box-sizing: border-box; }
/* U-10: avatar padrão (avatarPadraoHtml) — sem fundo azul nem sombra por baixo do desenho. */
.um-lista .um-avatar--padrao { background: transparent; box-shadow: none; display: block; overflow: hidden; }
/* U-11: chip do setor 12 px, pad 8 (era 11.5/7); o teto de 57 (R6-4) fica. */
.um-lista .um-linha-dir .um-chip-setor { font-size: 12px; padding: 0 8px; }
/* U-13: topo — os botões 42 r800 #5B5B5B (--um-ico) já vêm do R8-3 (`.um-ico-btn` base); aqui só o olho no grupo da direita
   (lista.js) e o badge "+99" 38×20 12/600 pad 4/8 r800. */
.um-lista-topo .um-contador-total .um-badge { min-width: 38px; height: 20px; padding: 4px 8px; border-radius: 800px; }
/* U-14: busca — lupa `ph-magnifying-glass` 14 #212529 (pad 6/8/6/12), input 14/24.5 pad 6/12; X `ph-bold ph-x` 14 #31343B só com
   texto (umBuscaX, lista.js), no lugar do cancel nativo do <input type=search> (que saía azul). */
.um-lista-busca .um-busca { padding: 6px 12px; gap: 0; }
.um-lista-busca .um-busca > .um-ico { width: 14px; height: 14px; color: #212529; margin-right: 12px; flex: none; }
.um-lista-busca .um-busca input { font-size: 14px; line-height: 24.5px; padding: 0; }
.um-lista-busca .um-busca input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.um-busca-x { width: 24px; height: 24px; padding: 0; margin-left: 4px; color: #31343B; border-radius: 800px; flex: none; }
.um-busca-x .um-ico { width: 14px; height: 14px; } /* a regra base .um-ico (20) vence o atributo width do svg */
.um-busca-x[hidden] { display: none; }
/* U-15: abas — `inset-control` 382×40 (lista 414 − 2×16) bg #EEF2FE + borda 2 px #EEF2FE r32, botão 126×36 14/22, inativo
   #31343B (ativo #557CF2 como antes). */
.um-lista > .um-abas { margin: 16px 16px; padding: 0; border: 2px solid var(--um-bg); border-radius: 32px; box-sizing: border-box; height: 40px; }
.um-lista > .um-abas .um-pilula { line-height: 22px; }
.um-lista > .um-abas .um-pilula:not(.um-pilula--ativa) { color: #31343B; }
/* U-16: "Nenhuma conversa encontrada" 14/21 rgba(34,34,34,.75) a 16 px das abas (a margem das abas já dá os 16); com busca, a
   dica "Use termos completos para melhores resultados" e a ilustração do exemplo ("Thiago|" + ✓ verde) — captura r8-umbler-06. */
.um-vazio--lista { padding: 0 16px 16px; color: rgba(34,34,34,.75); font-size: 14px; line-height: 21px; font-weight: 400; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.um-vazio-dica { display: block; }
.um-vazio-ilustra { display: inline-flex; align-items: center; gap: 8px; margin-top: -8px; padding: 4px 10px; border: 1px solid #DFDFDF; border-radius: 4px; background: #fff; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 20px; color: #31343B; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.um-vazio-cursor { display: inline-block; width: 1px; height: 14px; background: #31343B; margin-left: 1px; }
.um-vazio-ilustra .um-ico { width: 14px; height: 14px; color: var(--um-nao-lidas); }
/* U-18: seleção em massa — rótulo "<b>N conversa(s) selecionada(s)</b>" 14/700 (rotuloMassa, lista.js); checkbox 20 com borda
   2 px #B8B4B4 r4 (marcada: azul com ✓ branco); select 32 com 2 px #DFDFDF r16, ✓ à esquerda e caret rgba(0,0,0,.25) à direita;
   X `ph-bold ph-x` 14 #31343B sem caixa. */
.um-lista .um-massa > label b { font-weight: 700; }
.um-lista .um-massa > label .um-check, .um-lista .um-linha .um-check { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid #B8B4B4; border-radius: 4px; background: var(--um-superficie); cursor: pointer; box-sizing: border-box; }
.um-lista .um-massa > label .um-check:checked, .um-lista .um-linha .um-check:checked { border-color: var(--um-primary); background: var(--um-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'><path d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/></svg>") center/14px no-repeat; }
.um-lista .um-massa > label .um-check:focus-visible, .um-lista .um-linha .um-check:focus-visible { outline: 2px solid #6689F3; outline-offset: 1px; }
.um-lista .um-massa > label .um-check:indeterminate { border-color: var(--um-primary); background: var(--um-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'><path d='M224,128a12,12,0,0,1-12,12H44a12,12,0,0,1,0-24H212A12,12,0,0,1,224,128Z'/></svg>") center/14px no-repeat; }
.um-lista .um-massa > select.um-select:first-of-type { border: 2px solid var(--um-borda); border-radius: 16px; height: 32px; padding: 0 32px 0 32px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231F1F1F'><path d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='rgba(0,0,0,0.25)'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>"); background-position: 10px center, right 10px center; background-size: 16px, 16px; background-repeat: no-repeat; }
.um-lista .um-massa > select.um-select:nth-of-type(2) { border: 2px solid var(--um-borda); border-radius: 16px; height: 32px; }
.um-lista .um-massa > .um-ico-btn { width: 24px; height: 24px; padding: 0; color: #31343B; border-radius: 800px; background: transparent; }
.um-lista .um-massa > .um-ico-btn .um-ico { width: 14px; height: 14px; }
.um-lista .um-massa > .um-ico-btn:hover { color: var(--um-texto); background: transparent; }
/* U-4 (acréscimo do controlador): o badge do canal é ROXO #7662FA (R8-3, padrão) no WhatsApp Starter/Broker e VERDE #25D366 na API
   oficial (r8-umbler-01); o chip Evolution também sai verde e o SMS cinza com o balão de texto. data-canal-tipo vem de canalTipoDe (lista.js). */
.um-badge-canal[data-canal-tipo="api"], .um-badge-canal[data-canal-tipo="evolution"] { background-color: #25D366; }
.um-badge-canal[data-canal-tipo="sms"] { background-color: #8A93A3; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'><path d='M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78l.09-.07L83,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0Zm176-32H80a8,8,0,0,0-5.2,1.92L40,224V64H216Z'/></svg>"); }
/* Tema escuro: as cores medidas são do tema claro do Umbler; aqui ficam os tokens da superfície. */
:root[data-theme="dark"] .um-lista .um-linha-meio .um-nome { color: var(--um-texto); }
:root[data-theme="dark"] .um-lista .um-previa--contato { color: var(--um-texto-3); }
:root[data-theme="dark"] .um-lista .um-previa--propria, :root[data-theme="dark"] .um-lista .um-previa .um-previa-check, :root[data-theme="dark"] .um-lista .um-previa .um-previa-mic { color: var(--um-texto); }
:root[data-theme="dark"] .um-busca-x, :root[data-theme="dark"] .um-lista .um-massa > .um-ico-btn, :root[data-theme="dark"] .um-lista-busca .um-busca > .um-ico { color: var(--um-texto-2); }
:root[data-theme="dark"] .um-lista > .um-abas .um-pilula:not(.um-pilula--ativa) { color: var(--um-texto); }
:root[data-theme="dark"] .um-vazio--lista { color: var(--um-texto-2); }
:root[data-theme="dark"] .um-vazio-ilustra { background: var(--um-superficie); border-color: var(--um-borda); color: var(--um-texto); }
:root[data-theme="dark"] .um-vazio-cursor { background: var(--um-texto); }
:root[data-theme="dark"] .um-lista .um-massa > label .um-check, :root[data-theme="dark"] .um-lista .um-linha .um-check { border-color: #4A5366; }
:root[data-theme="dark"] .um-lista .um-massa > select.um-select:first-of-type { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23E8EAF0'><path d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='rgba(255,255,255,0.35)'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>"); }

/* ===== R8-6 ===== */
/* Painéis e Filtros como o Umbler (auditoria-ui-r8 §1.1 U-19, §1.5 U-52…U-58; tiquetes-r8 R8-6; dumps scratchpad/r8ui/umbler-paineis.txt
   e umbler-lista.txt "filtros"). Tudo escopado em .um-app/.um-filtros para vencer as regras da ÁREA D e das rodadas anteriores. */
/* (U-52) aba ativa de todo offcanvas (Contato/Detalhes · Setor/Atendente/Canal · Finalizar/Enviar/Chatbot · Agendar/Agendadas/
   Concluídas): texto+ícone #557CF2 600 + sublinhado azul 2 px; as outras 16/24 400 #1F1F1F. O modal Nova conversa mantém as pílulas. */
.um-app .um-painel:not(.um-painel--modal) .um-offcanvas-abas button { font-weight: 400; color: var(--um-texto); border-bottom: 2px solid transparent; }
.um-app .um-painel:not(.um-painel--modal) .um-offcanvas-abas button.ativa { color: var(--um-primary); font-weight: 600; border-bottom: 2px solid var(--um-primary); }
/* (U-53) campos dos painéis (Finalizar, Agendar, Transferir, Nova): 2 px #DFDFDF r16, 14 px, pad 6/12; select com chevron fino e
   pad-direita 36; rótulo 14/22 400; textarea do Finalizar 156 de altura, 16/28. */
.um-app .um-painel .um-input, .um-app .um-painel .um-select { border: 2px solid var(--um-borda); border-radius: 16px; font-size: 14px; line-height: 24.5px; padding: 6px 12px; }
.um-app .um-painel .um-select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: var(--um-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23212529'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; }
.um-app .um-painel .um-secao > label:not(.um-opcao), .um-app .um-nova-form .um-secao > label:not(.um-opcao) { font-weight: 400; font-size: 14px; line-height: 22px; }
.um-app .um-painel .um-final-msg { min-height: 156px; font-size: 16px; line-height: 28px; }
.um-app .um-painel .um-motivo { border-radius: 16px; }
/* O modal de assinatura (R8-5) é um .um-painel--modal: o input pílula dele continua r30/16 px (regra do R8-5, especificidade menor). */
.um-app .um-assinatura-modal .um-assinatura-nome { border-radius: 30px; padding: 0 16px; font-size: 16px; line-height: normal; }
/* foco/hover continuam os do R7-7 (D46/D53): a borda de 2 px acima tem a mesma especificidade e vinha depois — repõe aqui. */
.um-app .um-painel .um-input:focus, .um-app .um-painel .um-select:focus, .um-app .um-painel .um-campo-cal:focus-within > .um-filtro-cal { border-color: #6689F3; }
/* (U-54) Detalhes: Canal com o badge do WhatsApp (círculo 24 #6852F6, logo branco 16) e o atendente com a foto 36 redonda (sombra
   do ub-avatar) + nome 16 400 #5B5B5B + "está atendendo" 14. */
.um-app .um-badge-canal-inline { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #6852F6; color: #fff; vertical-align: -7px; margin-right: 8px; }
.um-app .um-badge-canal-inline .um-ico { width: 16px; height: 16px; }
.um-app .um-atendente { grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; }
.um-app .um-atendente .um-avatar--sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; font-size: 13px; box-shadow: 0 0 8px rgba(136,136,136,.2); }
.um-app .um-atendente b { font-weight: 400; color: #5B5B5B; }
/* (U-57) Agendar › tipo escolhido: banner "Atenção!" (alert-warning #FFFBE6 r16 sombra .075, ícone warning-circle 14 #FAAD14),
   "Selecione data e hora para envio *" com o input-group (input r16 à esquerda + botão-calendário 32 à direita), pílula azul
   "Será enviado daqui a…" (#D6E4FF), switch "Assinar" 44×22 r44 (#B8B4B4 → azul), rodapé em coluna Agendar + Cancelar (outline
   2 px rgba(0,0,0,.15) r30). */
.um-alerta { position: relative; border-radius: 16px; padding: 8px 16px 8px 40px; font-size: 14px; line-height: 21px; color: #1F1F1F; box-shadow: 0 2px 4px rgba(0,0,0,.075); margin: 0 0 8px; }
.um-alerta::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: center / contain no-repeat; }
.um-alerta--aviso { background: #FFFBE6; } .um-alerta--aviso::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FAAD14'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E"); }
.um-alerta--info { background: #D6E4FF; margin: 8px 0 16px; } .um-alerta--info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23557CF2'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E"); }
.um-alerta--info b { font-weight: 400; }
.um-obrigatorio { font-style: normal; color: #DA606E; padding: 0 4px; }
.um-campo-cal { display: flex; min-width: 0; }
.um-app .um-painel .um-campo-cal > .um-input { flex: 1; min-width: 0; border-radius: 16px 0 0 16px; border-right: 0; height: 40px; }
.um-app .um-painel .um-campo-cal > .um-filtro-cal { height: 40px; cursor: pointer; }
.um-app .um-painel .um-campo-cal > .um-input::-webkit-calendar-picker-indicator { display: none; } /* o calendário é o botão ao lado (abrirPicker) */
.um-filtro-cal { cursor: pointer; }
.um-app .um-painel .um-secao > .um-switch-linha { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.um-switch { appearance: none; -webkit-appearance: none; width: 44px; height: 22px; border-radius: 44px; margin: 0; flex: none; background: #B8B4B4; position: relative; cursor: pointer; transition: background .15s; }
.um-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.um-switch:checked { background: var(--um-primary); } .um-switch:checked::after { left: 25px; }
.um-switch:focus-visible { outline: 2px solid var(--um-primary); outline-offset: 2px; }
.um-app .um-painel-rodape.um-painel-rodape--coluna { flex-direction: column; gap: 8px; }
.um-app .um-painel-rodape.um-painel-rodape--coluna > .um-pilula { width: 100%; flex: none; justify-content: center; height: 40px; font-size: 16px; }
.um-app .um-painel-rodape.um-painel-rodape--coluna > .um-pilula--borda { border: 2px solid rgba(0,0,0,.15); color: #31343B; background: transparent; }
.um-app .um-painel-rodape.um-painel-rodape--coluna > .um-pilula--borda:hover { background: rgba(0,0,0,.02); }
/* (U-58) Nova conversa: título 16/600 + X 14 cinza; pílulas 12.25 com ícone 12.25; busca 2 px r16 (azul só no foco) + select
   "Etiquetas" 12.25 r16; linha 96 em colunas: avatar 48 · nome 700 14 (quebra) + "– há uma hora" 700 rgba(34,34,34,.75) · telefone
   14 | etiqueta com ícone (truncável) em coluna própria | caret 21 rgba(33,37,41,.5). */
.um-app .um-painel--modal .um-offcanvas-cab { font-size: 16px; font-weight: 600; }
.um-app .um-painel--modal .um-offcanvas-cab > .um-ico-btn .um-ico { width: 14px; height: 14px; color: #5B5B5B; }
.um-app .um-painel--modal .um-offcanvas-abas button { font-size: 12.25px; }
.um-app .um-painel--modal .um-offcanvas-abas button .um-ico { width: 12.25px; height: 12.25px; }
.um-app .um-nova-busca .um-busca { border: 2px solid var(--um-borda); border-radius: 16px; }
.um-app .um-nova-busca .um-busca:focus-within { border-color: #6689F3; }
.um-app .um-nova-busca .um-busca .um-ico { width: 14px; height: 14px; }
.um-app .um-nova-busca .um-busca input { font-size: 14px; }
.um-app .um-nova-etiqueta { border-radius: 16px; font-size: 12.25px; width: 150px; }
.um-app .um-nova-contato { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 21px; column-gap: 8px; min-height: 96px; padding: 16px 24px; }
.um-app .um-nova-contato-txt { gap: 0; }
.um-app .um-nova-contato-txt .um-nome { font-size: 14px; font-weight: 400; line-height: 21px; color: #31343B; }
.um-app .um-nova-contato-txt .um-nome b { font-weight: 700; }
.um-app .um-nova-contato-txt .um-nome small { font-size: 14px; font-weight: 700; color: rgba(34,34,34,.75); }
.um-app .um-nova-contato-txt > small { font-size: 14px; line-height: 19.6px; color: rgba(34,34,34,.75); }
.um-app .um-nova-contato > .um-chips { justify-content: flex-start; min-width: 0; }
.um-app .um-nova-contato .um-etiqueta { max-width: 120px; box-sizing: border-box; }
.um-app .um-nova-contato > .um-ico:last-child { width: 21px; height: 21px; color: rgba(33,37,41,.5); }
/* (U-19) Filtros: título "^ Filtros" 16/600 (caret-down girado, rgba(34,34,34,.75)) + X 14 bold rgba(33,37,41,.45); selects
   259×32 2 px #DFDFDF r16 14 px com chevron 14 escuro; Data num campo só: o select do período num input-group com o botão-calendário
   32 à direita e, em Personalizado, "de — até" dentro de UM campo 2 px r16; "+ Salvar Atalho" 12.25; "Atalhos salvos" 16/600 + lápis
   30 (modo de edição mostra a lixeira de cada atalho). */
.um-ico--cima { transform: rotate(180deg); }
.um-filtros .um-offcanvas-cab { padding: 24px 16px 8px; min-height: 50px; }
.um-filtros-titulo > .um-ico { color: rgba(34,34,34,.75); }
.um-filtros .um-filtros-fechar { width: 24px; height: 24px; padding: 0; color: rgba(33,37,41,.45); }
.um-filtros .um-filtros-fechar .um-ico { width: 14px; height: 14px; }
.um-filtros .um-select { border: 2px solid var(--um-borda); border-radius: 16px; height: 32px; padding: 0 30px 0 8px; font-size: 14px; line-height: 28px; appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23212529'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
.um-filtro-data { display: flex; min-width: 0; }
.um-filtro-data > .um-select { flex: 1; min-width: 0; border-radius: 16px 0 0 16px; border-right: 0; }
.um-filtro-cal { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; box-sizing: border-box; border: 2px solid var(--um-borda); border-left: 0; border-radius: 0 16px 16px 0; color: #31343B; }
.um-filtro-cal .um-ico { width: 14px; height: 14px; }
.um-filtros .um-filtro-datas { display: flex; align-items: center; gap: 4px; margin-top: 6px; height: 32px; box-sizing: border-box; border: 2px solid var(--um-borda); border-radius: 16px; padding: 0 8px; }
.um-filtros .um-filtro-datas[hidden] { display: none; }
.um-filtros .um-filtro-datas > .um-input { border: 0; border-radius: 0; height: 28px; padding: 0; flex: 1; min-width: 0; font-size: 12px; background: transparent; }
.um-filtros .um-filtro-datas > i { font-style: normal; color: var(--um-texto-2); flex: none; }
.um-filtros .um-select:focus, .um-filtros .um-select:hover, .um-filtros .um-filtro-datas:focus-within, .um-filtros .um-filtro-datas:hover, .um-filtros .um-filtro-data:focus-within > .um-filtro-cal, .um-filtros .um-filtro-data:hover > .um-filtro-cal { border-color: #6689F3; }
.um-filtros-salvar { font-size: 12.25px; color: var(--um-texto); opacity: .65; height: 22px; border: 0; gap: 8px; }
.um-filtros-salvar .um-ico { width: 14px; height: 14px; }
.um-filtros-atalhos-cab { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.um-filtros .um-secao .um-filtros-atalhos-cab > h4 { margin: 0; }
.um-atalhos-editar { width: 30px; height: 30px; color: var(--um-texto); }
.um-atalhos-editar .um-ico { width: 14px; height: 14px; }
.um-filtros-atalhos:not(.um-filtros-atalhos--editar) [data-atalho-apagar] { display: none; }
.um-filtros-atalhos--editar .um-atalhos-editar { background: var(--um-ativo); color: var(--um-primary); }
/* (U-56) Transferir: ícone `buildings` 24 no quadrado azul do setor. (U-55) Painel lateral sem sombra (o Umbler só tem o backdrop). */
.um-app .um-opcao .um-avatar--sm .um-ico--buildings { width: 24px; height: 24px; }
.um-app .um-painel:not(.um-painel--modal) { box-shadow: none; }
/* Tema escuro: alertas e chevrons medidos no tema claro do Umbler; no escuro só o chevron muda para a cor do texto. */
:root[data-theme="dark"] .um-app .um-painel .um-select, :root[data-theme="dark"] .um-filtros .um-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23E8EAF0'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .um-filtros-titulo > .um-ico, :root[data-theme="dark"] .um-filtros .um-filtros-fechar, :root[data-theme="dark"] .um-filtro-cal { color: var(--um-texto-2); }
/* ===== R8-2b ===== */
/* Prova em prod pós-#302 + DOM do Umbler (scratchpad/r8ui/umbler-lista.txt, 20/09): a prévia é #83858C em TODAS as linhas — própria
   inclusive ("Áudio" da Naty, linha 488; nota "Transferência…", 226) — e #1F1F1F só na linha ABERTA (chat-card-open, linha 23); o
   R8-2 tinha lido "própria = preta" medindo justamente a linha aberta. O ✓✓ é azul (text-primary do Bootstrap) quando LIDA (linha 486) e
   #1F1F1F nas demais. O "<b>autor:</b>" é a marcação do WhatsApp renderizada (formato.previaWhatsApp), não um campo. */
.um-lista .um-previa--propria, .um-lista .um-previa--contato { color: #83858C; }
.um-lista .um-linha--ativa .um-previa { color: #1F1F1F; }
.um-lista .um-previa .um-previa-check.um-ico--lido { color: var(--um-primary); }
:root[data-theme="dark"] .um-lista .um-previa--propria, :root[data-theme="dark"] .um-lista .um-previa--contato { color: var(--um-texto-3); }
:root[data-theme="dark"] .um-lista .um-linha--ativa .um-previa { color: var(--um-texto); }
/* ===== R8-7 ===== */
/* Chat interno igual ao do Umbler (auditoria-ui-r8 §1.6 U-60 · r8-umbler-86-interno-dm) + toast (U-62). A DM aberta usa o
   cabeçalho, os balões e o compositor da conversa de cliente (chat-interno.js importa cabecalhoHtml/balaoHtml/compositorHtml);
   #umConversa ganha `um-conversa--interna` e este bloco esconde o que é só de cliente. O que fica: ‹ + avatar 48 com selo de
   equipe + nome 16/600 + detalhes · agendar · busca · X; balões; compositor branco com 4 ferramentas (anexar, emoji, rápidas,
   figurinhas) + mic — nunca o "+" compacto, nunca a assinatura/Notas/chatbot. */
.um-conversa--interna > .um-cabecalho { padding-left: calc(8px + var(--um-margem-conteudo)); padding-right: calc(12px + var(--um-margem-conteudo)); border-bottom-color: #D9D9D9; }
.um-conversa--interna > .um-busca-conv { padding-left: calc(8px + var(--um-margem-conteudo)); padding-right: calc(12px + var(--um-margem-conteudo)); }
.um-conversa--interna.um-conversa--buscando > .um-cabecalho { display: none; }
/* cabeçalho: só os 4 ícones do Umbler (o ⋮ compacto some; os 4 ficam mesmo na conversa estreita) e a nota no lugar dos chips */
.um-conversa--interna .um-cab-icones > [data-dm-cab="contato"], .um-conversa--interna .um-cab-icones > [data-dm-cab="transferir"], .um-conversa--interna .um-cab-icones > [data-dm-cab="privar"], .um-conversa--interna .um-cab-icones > [data-dm-cab="liberar"], .um-conversa--interna .um-cab-icones > [data-dm-cab="finalizar"], .um-conversa--interna .um-cab-icones > .um-cab-mais { display: none; }
.um-conversa--interna .um-cab-icones > .um-ico-btn[data-dm-cab="detalhes"], .um-conversa--interna .um-cab-icones > .um-ico-btn[data-dm-cab="agendar"], .um-conversa--interna .um-cab-icones > .um-ico-btn[data-dm-cab="buscar"], .um-conversa--interna .um-cab-icones > .um-ico-btn[data-dm-cab="fechar"] { display: inline-flex; }
.um-conversa--interna .um-cab-chips { display: none; }
.um-conversa--interna .um-dm-nota { display: block; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* selo de equipe no avatar (Umbler: channel-icon azul com o ícone de pessoas), no lugar do badge do WhatsApp */
.um-conversa--interna .um-avatar-wrap > .um-badge-canal { background: var(--um-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'><path d='M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z'/></svg>") center / 16px no-repeat; }
.um-conversa--interna .um-avatar-wrap[role="button"] { cursor: pointer; }
/* balões: sem barra flutuante (reagir/responder/encaminhar não têm rota no chat interno — nada de clique morto); a barra continua
   no DOM (regra R7-5: nunca display none), só não aparece nem no hover */
.um-conversa--interna .um-balao > .um-hover-bar, .um-conversa--interna .um-balao:hover > .um-hover-bar { opacity: 0; visibility: hidden; pointer-events: none; }
/* compositor: sem a linha da assinatura/Notas, sem chatbot/atalhos/"Devolver"/"+" — 4 ferramentas + mic, também no compacto */
.um-conversa--interna .um-comp-topo, .um-conversa--interna .um-comp-divisor, .um-conversa--interna .um-comp-ferramentas > [data-comp="chatbot"], .um-conversa--interna .um-comp-ferramentas > [data-comp="atalhos-chatbot"], .um-conversa--interna .um-comp-ferramentas > [data-comp="larissa"], .um-conversa--interna .um-comp-ferramentas > .um-comp-mais { display: none; }
.um-conversa--interna .um-comp-ferramentas > [data-comp="anexar"], .um-conversa--interna .um-comp-ferramentas > [data-comp="emoji"], .um-conversa--interna .um-comp-ferramentas > [data-comp="rapidas"], .um-conversa--interna .um-comp-ferramentas > [data-comp="figurinhas"] { display: inline-flex; }
@container conversa (max-width: 719px) { .um-conversa--interna .um-comp-rodape { display: flex; grid-column: 1 / -1; } }
/* toast (U-62): o `.alert` do Umbler — r16, sombra 0 8 16 .15, pad 8/16, 14/21 (= 37 de altura, como o "Conectado!"), cor por
   tipo (verde ok / #FFF1F0 erro). O Desfazer e o X da casa (28 px) não engordam a caixa: margem negativa de 3,5 px — ficam
   dentro do padding. Posição continua a do R3-7. */
.um-app .um-toast--pilula { height: auto; min-height: 37px; padding: 8px 16px; border-radius: 16px; box-shadow: 0 8px 16px rgba(0,0,0,.15); font-size: 14px; line-height: 21px; color: #1F1F1F; gap: 8px; }
.um-app .um-toast--pilula.um-toast--ok { background: #F6FFED; }
.um-app .um-toast--pilula.um-toast--erro { background: #FFF1F0; }
.um-app .um-toast--pilula .um-toast-desfazer, .um-app .um-toast--pilula .um-toast-fechar { margin: -3.5px 0; }
.um-app .um-toast--pilula .um-toast-fechar { color: #6F7380; }

/* ===== R8-11 ===== */
/* Conversa como um atendente usa (auditoria-funcional-r8 F-20…F-26, F-31, F-33, F-37, F-65; capturas r8-func-u52/u62b). */
/* F-20: assinatura do Umbler (metadado Prefix) em negrito no topo do balão, na cor do texto. */
.um-balao .um-balao-texto .um-balao-assinatura { font-weight: 700; color: inherit; } /* R9-1 (V-1): classe própria do balão */
/* F-25/F-26: "🗑 Esta mensagem foi excluída" — itálico, cinza, lixeira 14 (Umbler `chat-message-deleted`). */
.um-balao--apagada .um-apagada { display: inline-flex; align-items: center; gap: 4px; font-style: italic; color: #6F7380; font-size: 14px; line-height: 22px; }
.um-balao--apagada .um-apagada .um-ico { width: 14px; height: 14px; color: var(--um-erro); }
/* F-24: "Editado" ao lado da hora, sem itálico exagerado — como o "Edited" do Umbler (mesma cor da hora). */
.um-balao > .um-hora .um-editado { font-style: normal; color: inherit; margin-right: 2px; }
/* F-37: a imagem do balão no tamanho natural até 320×270 (um png 10×10 sai pequeno, não esticado); cursor de zoom. */
.um-anexo-img { width: auto; max-width: 320px; }
.um-anexo-img img { width: auto; height: auto; max-width: 320px; max-height: 270px; object-fit: contain; cursor: zoom-in; }
/* F-37: visualizador próprio — fundo escuro em tela cheia, barra no topo à direita (↺↻ do Umbler ficam de fora), imagem centrada. */
.um-visor { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .86); display: flex; flex-direction: column; font-family: var(--um-fonte); }
.um-visor-barra { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 12px 16px; flex: none; color: #FFFFFF; }
.um-visor-barra .um-ico-btn { color: #FFFFFF; width: 36px; height: 36px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.um-visor-barra .um-ico-btn:hover { background: rgba(255, 255, 255, .16); }
.um-visor-barra .um-ico-btn .um-ico { width: 20px; height: 20px; }
.um-visor-zoom-btn { border: 0; background: transparent; color: #FFFFFF; font: inherit; font-size: 12px; min-width: 48px; height: 36px; border-radius: 30px; cursor: pointer; }
.um-visor-zoom-btn:hover { background: rgba(255, 255, 255, .16); }
.um-visor-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .35); margin: 0 8px; }
.um-visor-corpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-out; }
.um-visor-img { max-width: 92vw; max-height: 84vh; object-fit: contain; transition: transform .12s ease-out; cursor: default; user-select: none; }
/* F-65: busca na conversa — realce amarelo do termo, "i de N" com ▾▴ e "Ver tudo"/"Ver conversa" (r8-func-u62b), acerto atual com anel. */
.um-balao mark { background: #FFE58F; color: inherit; padding: 0 1px; border-radius: 2px; }
.um-balao--busca-atual { outline: 2px solid var(--um-primary); outline-offset: 2px; }
.um-busca-conv .um-busca-extra { display: flex; align-items: center; flex: none; }
.um-busca-nav { display: inline-flex; align-items: center; gap: 4px; }
.um-busca-nav .um-ico-btn { width: 36px; height: 36px; border-radius: 30px; }
.um-busca-nav .um-ico-btn[disabled] { opacity: .35; cursor: default; }
.um-busca-nav .um-ico-btn[disabled]:hover { background: transparent; }
.um-busca-nav .um-ico-btn .um-ico { width: 16px; height: 16px; }
.um-busca-pos { font-size: 16px; color: var(--um-texto); white-space: nowrap; min-width: 56px; text-align: center; }
.um-busca-tudo { border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--um-texto); padding: 6px 12px; border-radius: 30px; cursor: pointer; white-space: nowrap; margin-left: 12px; }
.um-busca-tudo:hover { background: rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .um-app .um-balao mark { background: #8A6D1B; }
:root[data-theme="dark"] .um-app .um-busca-tudo:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .um-app .um-balao--apagada .um-apagada { color: var(--um-texto-2); }
/* ===== R8-10 ===== */
/* Lista por CHAT (decisão do dono, 20/09). (F-17) Prévia de mídia como o Umbler: "Imagem"/"Vídeo"/"Documento" + ícone 14 DEPOIS, na
   mesma cor do mic do áudio. (F-15) Modal "Finalizar N conversas" (r8-func-u13-massa-acao-8): 500 de largura, altura livre, abas
   Finalizar / Enviar template / Chatbot, aviso amarelo dos contatos inativos (#FFFBE6 com ponto laranja), rodapé Cancelar + ação. */
.um-lista .um-previa .um-previa-ico { width: 14px; height: 14px; color: #1F1F1F; flex: none; }
:root[data-theme="dark"] .um-lista .um-previa .um-previa-ico { color: var(--um-texto); }
.um-massa-slot:empty { display: none; }
.um-app .um-massa-modal { width: 500px; max-width: calc(100% - 32px); height: auto; max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; }
.um-massa-modal > .um-offcanvas-cab { justify-content: space-between; } /* título à esquerda, X à direita (u13-massa-acao-8) */
.um-massa-modal > .um-secao { border-bottom: 0; font-size: 14px; line-height: 21px; color: var(--um-texto); }
.um-massa-modal > .um-secao > p { margin: 0 0 12px; }
.um-massa-modal > .um-secao > .um-template-link { display: inline-block; }
.um-massa-modal > .um-painel-lista { flex: 1 1 auto; min-height: 0; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.um-massa-modal > .um-painel-rodape { flex-direction: row; justify-content: flex-end; gap: 8px; border-top: 0; padding-top: 8px; }
.um-massa-aviso { display: flex; gap: 12px; align-items: flex-start; background: #FFFBE6; border: 1px solid #FFE58F; border-radius: 12px; padding: 16px 20px; margin: 0 0 12px; color: #1F1F1F; }
.um-massa-aviso-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FAAD14; margin-top: 6px; }
:root[data-theme="dark"] .um-massa-aviso { background: rgba(250, 173, 20, .12); border-color: rgba(250, 173, 20, .35); color: var(--um-texto); }

/* ===== R8-12 ===== */
/* Compositor: emoji com a aba Recentes (9 abas, F-40); timer da gravação ao lado do botão (F-45, r8-func-u51-gravando); contador
   em vermelho quando o texto passa do teto (F-36); lista de @menção no popover (F-34, r8-func-u40-nota-mencao). */
.um-emojis-cats { grid-template-columns: repeat(9, 1fr); }
.um-comp-timer { flex: none; min-width: 52px; height: 30px; padding: 0 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--um-superficie); border: 1px solid var(--um-borda); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--um-texto); }
.um-comp-cota--excesso { color: var(--um-erro); font-weight: 600; }
.um-comp-popover--mencao { width: 420px; padding: 8px; gap: 0; max-height: 300px; }
.um-comp-popover--mencao > .um-pop-fechar { display: none; }
.um-mencao-lista { display: grid; gap: 2px; }
.um-mencao { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 14px; color: var(--um-texto); text-align: left; cursor: pointer; }
.um-mencao > .um-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.um-mencao > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-mencao > small { font-size: 12px; color: var(--um-texto-3); } .um-mencao > .um-mencao-on { color: #389E0D; }
.um-mencao:hover, .um-mencao--ativa { background: var(--um-bg); }
.um-mencao-vazia { margin: 0; padding: 8px 10px; color: var(--um-texto-2); }
/* Painel Contato/Detalhes: sub-painéis "‹ Título" (F-53/F-57/F-58, r8-func-u56-*/u57-*), como o Umbler troca o offcanvas inteiro. */
.um-painel--sub .um-sub-cab { display: flex; align-items: center; gap: 12px; padding: 24px 24px 16px 20px; min-height: 80px; font-size: 20px; font-weight: 600; box-sizing: border-box; }
.um-painel--sub .um-sub-cab > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-painel--sub .um-sub-cab > .um-ico-btn .um-ico { width: 18px; height: 18px; }
.um-painel--sub .um-sub-cab:has(> span:empty) { min-height: 0; padding-bottom: 0; }
.um-painel--sub > .um-painel-corpo:has(> .um-info-form) { display: flex; flex-direction: column; }
.um-info-form { display: flex; flex-direction: column; flex: 1 0 auto; box-sizing: border-box; }
.um-info-foto { display: flex; justify-content: center; padding: 0 24px 24px; }
.um-avatar--xl { width: 120px; height: 120px; font-size: 40px; }
.um-info-form > h4 { margin: 0; padding: 0 24px 16px; font-size: 16px; font-weight: 600; }
.um-info-form > label { display: flex; flex-direction: column; gap: 8px; padding: 0 24px 16px; font-size: 14px; font-weight: 400; }
.um-info-form > label > .um-input { border-width: 2px; border-color: #DFDFDF; border-radius: 16px; height: 40px; box-sizing: border-box; padding: 0 14px; }
.um-info-form > label > .um-input:read-only { color: var(--um-texto-2); background: var(--um-desabilitado); }
.um-info-form > .um-painel-rodape { flex-direction: row; } .um-info-form > .um-painel-rodape > .um-pilula { flex: 1; justify-content: center; height: 40px; font-size: 16px; }
.um-painel--sub .um-secao.um-obs-form, .um-painel--sub .um-secao.um-baixar-form { border-bottom: 0; }
.um-obs-form > .um-texto-2 { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.um-editor { border: 2px solid #DFDFDF; border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.um-editor-barra { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--um-borda); }
.um-editor-barra > .um-ico-btn { width: 32px; height: 32px; } .um-editor-barra > .um-ico-btn .um-ico { width: 16px; height: 16px; }
.um-editor > .um-obs-nova { border: 0; border-radius: 0; min-height: 96px; resize: vertical; display: block; }
.um-obs-add { width: 100%; justify-content: center; height: 40px; font-size: 16px; margin-bottom: 12px; }
.um-aviso-info { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--um-bg); color: var(--um-texto); font-size: 14px; }
.um-aviso-info > .um-ico { width: 16px; height: 16px; color: var(--um-primary); flex: none; }
.um-log-contato { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--um-borda); }
.um-log-contato > .um-avatar--sm { width: 40px; height: 40px; font-size: 14px; background: var(--um-primary); color: #fff; }
.um-log-contato > div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.5; }
.um-log-contato > div > b { font-weight: 600; } .um-log-contato > div > small { font-size: 14px; color: var(--um-texto-2); }
.um-conv-contato-topo { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--um-borda); }
.um-conv-contato-topo > .um-busca { flex: 1; min-width: 0; } .um-conv-contato-topo > .um-pilula { flex: none; height: 40px; }
.um-painel .um-conv-contato { display: grid; grid-template-columns: 24px auto auto minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 60px; }
.um-painel .um-conv-contato > .um-badge-canal-inline { margin: 0; width: 24px; height: 24px; background: var(--um-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.um-painel .um-conv-contato > .um-badge-canal-inline .um-ico { width: 16px; height: 16px; }
.um-painel .um-conv-contato > b { flex: none; font-weight: 500; }
.um-conv-estado { display: inline-block; height: 22px; line-height: 20px; padding: 0 8px; border-radius: 30px; border: 1px solid var(--um-borda); font-size: 12px; color: var(--um-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; justify-self: start; }
.um-conv-estado--aberta { color: #389E0D; border-color: #B7EB8F; background: #F6FFED; }
.um-painel .um-conv-contato > small { font-size: 12px; color: var(--um-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-baixar-form > label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; margin: 0 0 16px; }
.um-baixar-form > label > .um-select { border-width: 2px; border-color: #DFDFDF; border-radius: 16px; height: 44px; }
.um-baixar-form > .um-pilula { width: 100%; justify-content: center; height: 40px; font-size: 16px; }
:root[data-theme="dark"] .um-conv-estado--aberta { background: #1F3A26; border-color: #2F5C36; color: #BFE8C4; }
:root[data-theme="dark"] .um-info-form > label > .um-input, :root[data-theme="dark"] .um-editor, :root[data-theme="dark"] .um-baixar-form > label > .um-select { border-color: var(--um-borda); }

/* ===== R8-13 ===== */
/* Filtros como o Umbler (auditoria-funcional-r8 F-4/F-5/F-6/F-7/F-9/F-11/F-12; capturas r8-func-u26-drop-setor, u28-data-*,
   u29-coluna-fechada, u30-salvar-atalho/atalhos-lapis). Componente um-multi: caixa 2 px #DFDFDF r16 (a do select do R8-6) com os
   chips dos marcados + badge laranja; dropdown branco r16 com sombra, título 16/600 + X, pesquisa pílula r30 (azul no foco),
   "Exibindo…" 14 texto-2, itens 14 com checkbox. Data: campo igual + popover com abas pílula. Badge do funil 18 laranja #FAAD14. */
.um-multi { position: relative; min-width: 0; }
.um-multi-caixa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: 100%; min-height: 32px; box-sizing: border-box; padding: 2px 30px 2px 8px; border: 2px solid var(--um-borda); border-radius: 16px; background: transparent; color: var(--um-texto); font: inherit; font-size: 14px; line-height: 24px; text-align: left; cursor: pointer; position: relative; }
.um-multi-caixa:hover, .um-multi-caixa[aria-expanded="true"] { border-color: #6689F3; }
.um-multi-caixa > .um-multi-caret { position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: #212529; }
.um-multi-todos { color: var(--um-texto); }
.um-multi-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 120px; height: 22px; padding: 0 4px 0 8px; border-radius: 12px; background: var(--um-ativo); color: var(--um-azul-texto); font-size: 12px; line-height: 22px; white-space: nowrap; }
.um-multi-chip > i { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; font-style: normal; } .um-multi-chip > i:hover { background: rgba(0,0,0,.08); }
.um-multi-chip > i .um-ico { width: 12px; height: 12px; }
.um-multi-mais { font-size: 12px; color: var(--um-texto-2); }
.um-multi-n { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #FAAD14; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; } .um-multi-caixa:has(.um-multi-n) { padding-right: 56px; } /* badge fixo à direita, antes do caret (os chips nunca o empurram para a linha de baixo) */
/* O dropdown vive DENTRO da coluna de Filtros (292 px, overflow:auto — um popover absoluto não escapa dela): largura = a do campo + 8 px de cada lado. */
.um-multi-drop { position: absolute; left: -8px; top: calc(100% + 4px); width: calc(100% + 16px); box-sizing: border-box; padding: 16px 8px 8px; background: var(--um-superficie); border: 1px solid #F0F0F0; border-radius: 16px; box-shadow: 0 5px 12px 4px rgba(0,0,0,.09), 0 3px 6px rgba(0,0,0,.12), 0 1px 2px -2px rgba(0,0,0,.16); z-index: 21; }
.um-multi-drop[hidden] { display: none; } .um-data-drop[hidden] { display: none; } .um-data-cal[hidden] { display: none; } .um-data-intervalos[hidden] { display: none; } .um-multi-caixa[hidden] { display: none; } .um-atalho-novo[hidden] { display: none; } /* guardas do hidden, uma por classe (teste hidden-guard) */
.um-multi-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; margin-bottom: 8px; } .um-multi-cab > b { font-size: 16px; font-weight: 600; }
.um-multi-cab > .um-multi-fechar { width: 24px; height: 24px; padding: 0; color: rgba(33,37,41,.45); } .um-multi-cab > .um-multi-fechar .um-ico { width: 14px; height: 14px; }
.um-multi-pesquisa { display: flex; align-items: center; gap: 8px; margin: 0 8px; height: 40px; box-sizing: border-box; padding: 0 12px; border: 2px solid var(--um-borda); border-radius: 30px; color: var(--um-texto-2); }
.um-multi-pesquisa:focus-within { border-color: #6689F3; } .um-multi-pesquisa .um-ico { width: 16px; height: 16px; flex: none; }
.um-multi-busca { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--um-texto); outline: none; } .um-multi-busca::-webkit-search-cancel-button { -webkit-appearance: none; }
.um-multi-info { margin: 8px 16px 0; padding-bottom: 8px; border-bottom: 1px solid var(--um-borda); font-size: 14px; color: var(--um-texto-2); }
.um-multi-lista { max-height: 300px; overflow: auto; padding: 8px 0 0; }
.um-multi-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--um-texto); cursor: pointer; border-radius: 12px; } .um-multi-item:hover { background: var(--um-bg-hover); }
.um-multi-item > input { width: 16px; height: 16px; margin: 0; accent-color: var(--um-primary); flex: none; } .um-multi-item[hidden] { display: none; }
.um-multi-lista > .um-texto-2 { margin: 0 16px; font-size: 14px; }
/* Data (F-7): campo com o texto do período, X e calendário à direita; popover com as abas Intervalos/Calendário */
.um-filtro--data { position: relative; }
.um-filtros .um-filtro-data-caixa { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 8px; border: 2px solid var(--um-borda); border-right: 0; border-radius: 16px 0 0 16px; background: transparent; color: var(--um-texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.um-filtros .um-filtro-data-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-filtros .um-filtro-data-x { width: 28px; height: 32px; box-sizing: border-box; padding: 0; border: 2px solid var(--um-borda); border-left: 0; border-right: 0; border-radius: 0; color: rgba(33,37,41,.45); } .um-filtros .um-filtro-data-x .um-ico { width: 14px; height: 14px; }
.um-filtros .um-filtro-data:hover > .um-filtro-data-caixa, .um-filtros .um-filtro-data:hover > .um-filtro-data-x, .um-filtros .um-filtro-data:hover > .um-filtro-cal, .um-filtros .um-filtro-data-caixa[aria-expanded="true"], .um-filtros .um-filtro-data-caixa[aria-expanded="true"] ~ .um-filtro-data-x, .um-filtros .um-filtro-data-caixa[aria-expanded="true"] ~ .um-filtro-cal { border-color: #6689F3; }
.um-data-drop { position: absolute; left: -8px; top: calc(100% + 4px); width: calc(100% + 16px); box-sizing: border-box; padding: 16px; background: var(--um-superficie); border: 1px solid #F0F0F0; border-radius: 16px; box-shadow: 0 5px 12px 4px rgba(0,0,0,.09), 0 3px 6px rgba(0,0,0,.12), 0 1px 2px -2px rgba(0,0,0,.16); z-index: 21; }
.um-data-titulo { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.um-data-abas { display: flex; background: var(--um-bg); border-radius: 30px; padding: 2px; margin-bottom: 12px; }
.um-data-aba { flex: 1; height: 32px; border: 0; border-radius: 30px; background: transparent; color: var(--um-texto); font: inherit; font-size: 14px; cursor: pointer; } .um-data-aba--ativa { background: var(--um-primary); color: #fff; }
.um-data-intervalos { display: flex; flex-direction: column; }
.um-data-opcao { border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; line-height: 26px; padding: 0 10px; border-radius: 8px; color: var(--um-texto); cursor: pointer; } .um-data-opcao:hover { background: var(--um-bg-hover); } .um-data-opcao--ativa { color: var(--um-primary); font-weight: 600; }
.um-data-cal { display: grid; grid-template-columns: 1fr; gap: 8px; } .um-data-cal > label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 0; }
.um-filtros .um-data-cal .um-input { height: 32px; padding: 0 8px; border: 2px solid var(--um-borda); border-radius: 16px; font-size: 13px; min-width: 0; box-sizing: border-box; }
.um-data-cal > .um-data-aplicar { grid-column: 1 / -1; justify-content: center; height: 36px; margin-top: 4px; }
/* Cabeçalho: "Limpar" (F-9) entre o título e o X */
.um-filtros-limpar { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 28px; padding: 0 8px; border: 0; border-radius: 30px; background: transparent; font: inherit; font-size: 14px; color: var(--um-texto-2); cursor: pointer; } .um-filtros-limpar:hover { background: var(--um-bg-hover); color: var(--um-texto); }
.um-filtros-limpar .um-ico { width: 16px; height: 16px; } .um-filtros-limpar + .um-filtros-fechar { margin-left: 8px; }
/* Badge do funil (F-9) */
#umFiltroBtn { position: relative; } .um-funil-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #FAAD14; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; pointer-events: none; }
/* Salvar Atalho com nome (F-11) e modo de edição (F-12) */
.um-filtros-salvar-wrap { display: flex; flex-direction: column; align-items: center; }
.um-atalho-novo { width: 100%; display: flex; flex-direction: column; gap: 8px; } .um-atalho-novo > .um-filtro { padding: 0 8px; }
.um-filtros .um-atalho-novo .um-atalho-nome { height: 32px; padding: 0 12px; border: 2px solid var(--um-borda); border-radius: 16px; font-size: 14px; box-sizing: border-box; } .um-filtros .um-atalho-novo .um-atalho-nome:focus { outline: none; border-color: #6689F3; }
.um-atalho-erro { margin: 0 8px; font-size: 13px; color: #DA606E; } .um-atalho-erro[hidden] { display: none; }
.um-atalho-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px; } .um-atalho-botoes > .um-pilula { justify-content: center; height: 32px; }
.um-atalho-botoes > .um-pilula--borda { border: 2px solid rgba(0,0,0,.15); color: #31343B; } .um-atalho-botoes > .um-pilula--ativa:disabled { opacity: .5; cursor: default; }
.um-atalho--editar { gap: 8px; } .um-filtros .um-atalho-renomear { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--um-borda); border-radius: 0; font-size: 13px; background: transparent; } .um-filtros .um-atalho-renomear:focus { outline: none; border-bottom-color: #6689F3; }
.um-atalhos-editar--ativo { background: var(--um-ativo); color: var(--um-primary); }
/* Vazio da lista com filtro ativo (F-4) */
.um-vazio-filtros { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--um-texto-2); line-height: 21px; }
.um-vazio-filtros .um-vazio-aviso { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: #FAAD14; }
.um-vazio-filtros .um-vazio-limpar { margin: 0; font-size: 14px; }
:root[data-theme="dark"] .um-multi-caixa > .um-multi-caret, :root[data-theme="dark"] .um-multi-cab > .um-multi-fechar, :root[data-theme="dark"] .um-filtros .um-filtro-data-x { color: var(--um-texto-2); }
:root[data-theme="dark"] .um-multi-drop, :root[data-theme="dark"] .um-data-drop { border-color: var(--um-borda); }

/* ===== R8-14 ===== */
/* F-27 (r8-func-u36-reagir-picker): o picker de reação flutua com o miolo do teclado de emoji do compositor (400 × ≤430, como o popover
   do compositor); a aba Recentes entra na barra de categorias (9 colunas quando há). */
.um-menu.um-menu--picker { position: fixed; box-sizing: border-box; width: 400px; max-width: calc(100vw - 16px); max-height: 430px; padding: 12px; overflow: hidden; display: block; }
.um-menu--picker .um-emojis-picker { display: grid; gap: 8px; max-height: 406px; grid-template-rows: auto auto auto minmax(0, 1fr); position: relative; }
.um-menu--picker .um-emojis-corpo { max-height: 290px; }
.um-menu--picker .um-emojis-cats--recentes { grid-template-columns: repeat(9, 1fr); }
.um-menu--picker .um-pop-fechar { position: absolute; right: 0; top: -4px; width: 32px; height: 32px; }
.um-menu--picker .um-busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--um-borda); border-radius: 30px; padding: 0 12px; height: 36px; }
.um-menu--picker .um-busca input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; flex: 1; min-width: 0; color: var(--um-texto); }
.um-menu--picker .um-busca .um-ico { width: 16px; height: 16px; color: var(--um-texto-2); flex: none; }
.um-menu--picker .um-emojis button { height: 40px; width: auto; min-height: 0; padding: 0; display: flex; justify-content: center; font-size: 22px; }
.um-menu--picker .um-emojis-cats button { min-height: 0; width: auto; height: 32px; padding: 0; justify-content: center; border-radius: 0; }
.um-menu--picker .um-emojis-cats button.ativa { background: var(--um-primary); color: #fff; }
/* F-29: a reação do balão é clicável (abre o painel Reações); no painel, uma linha por reação com a lixeira só na própria. */
.um-balao .um-reacao { cursor: pointer; }
.um-reacoes-abas button { white-space: nowrap; }
.um-reacoes-linha { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--um-borda); min-height: 64px; box-sizing: border-box; }
.um-reacoes-linha .um-opcao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
.um-reacoes-linha > .um-avatar { width: 36px; height: 36px; flex: none; } .um-reacoes-linha .um-opcao-txt b { font-size: 14px; font-weight: 600; } .um-reacoes-linha .um-opcao-txt small { font-size: 12px; color: var(--um-texto-2); }
.um-reacoes-emoji { font-size: 20px; line-height: 1; }
.um-reacoes-linha .um-ico-btn { width: 32px; height: 32px; color: var(--um-texto-2); } .um-reacoes-linha .um-ico-btn:hover { color: var(--um-erro); }
/* F-26 (r8-func-u39b-apagar-modal): o item "Apagar" do menu ⋮ é vermelho (era só o "para todos"); o modal "Apagar mensagem" é
   pequeno — 500 de largura, altura do conteúdo, botões à direita. */
.um-menu button[data-menu-msg="apagar"] { color: var(--um-erro); }
.um-app .um-painel--modal.um-apagar-modal { width: 500px; height: auto; max-height: none; }
.um-apagar-modal .um-offcanvas-cab span { display: inline-flex; align-items: center; gap: 8px; }
.um-apagar-modal .um-offcanvas-cab span::before { content: ''; display: inline-block; width: 18px; height: 18px; background: var(--um-erro); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.um-apagar-modal > .um-secao { font-size: 14px; color: var(--um-texto); padding-top: 4px; }
.um-apagar-modal .um-apagar-botoes { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 24px; border-top: 0; }
.um-apagar-modal .um-apagar-botoes .um-pilula { flex: 0 0 auto; width: auto; height: 30px; padding: 0 16px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .um-apagar-modal .um-apagar-botoes .um-ico { width: 16px; height: 16px; }
/* F-30 (r8-func-u38-encaminhar): modo de seleção — o compositor dá lugar à barra "N selecionada(s)" com X e o FAB azul; cada balão
   ganha o quadrado de marcar à esquerda (selecionado = check azul + contorno), a barra de hover some, e o balão que não tem id no
   Umbler fica apagado. O balão é de conversa.js: tudo aqui é classe. */
.um-conversa--selecao .um-compositor-slot, .um-conversa--selecao .um-finalizada { display: none !important; }
.um-conversa--selecao .um-balao .um-hover-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.um-conversa--selecao .um-balao[data-msg] { cursor: pointer; }
.um-conversa--selecao .um-mensagens > .um-balao[data-msg]::before { content: ''; position: absolute; left: -32px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #B8B4B4; border-radius: 4px; background: var(--um-superficie); box-sizing: border-box; }
.um-conversa--selecao .um-mensagens > .um-balao--out[data-msg]::before { left: auto; right: calc(100% + 12px); }
.um-conversa--selecao .um-mensagens > .um-balao--selecionada::before { border-color: var(--um-primary); background: var(--um-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.um-conversa--selecao .um-mensagens > .um-balao--selecionada { outline: 3px solid rgba(85,124,242,.18); outline-offset: 2px; }
.um-conversa--selecao .um-mensagens > .um-balao--nao-selecionavel { opacity: .45; cursor: not-allowed; } .um-conversa--selecao .um-mensagens > .um-balao--nao-selecionavel::before { display: none; }
.um-conversa--selecao .um-mensagens { padding-left: calc(56px + var(--um-margem-conteudo)); }
.um-selecao-barra { flex: none; display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 24px; box-sizing: border-box; background: var(--um-superficie); border-top: 1px solid var(--um-borda); font-family: var(--um-fonte); color: var(--um-texto); }
.um-selecao-barra .um-selecao-n { font-size: 16px; font-weight: 600; flex: 1; }
.um-selecao-barra .um-ico-btn { width: 36px; height: 36px; }
.um-selecao-fab { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--um-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(85,124,242,.35); }
.um-selecao-fab .um-ico { width: 20px; height: 20px; } .um-selecao-fab:hover { background: var(--um-primary-hover); } .um-selecao-fab:disabled { opacity: .5; cursor: default; box-shadow: none; }
/* Modal "Encaminhar para" (r8-func-u38c-encaminhar-canal / -escolhido): 800 de largura, altura do conteúdo; canal = linha com badge,
   nome + pílula Online/Offline + tipo, caret; destinos = busca, "n / 5 selecionado(s)", linhas com checkbox, "Encaminhar (n)". */
.um-app .um-painel--modal.um-encaminhar-modal { height: auto; max-height: min(844px, calc(100% - 24px)); }
.um-encaminhar-modal .um-encaminhar-passo { margin: 0; padding: 4px 24px 8px; font-size: 14px; }
.um-encaminhar-modal .um-encaminhar-passo .um-pilula { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 8px; font-size: 14px; } .um-encaminhar-modal .um-encaminhar-passo .um-ico { width: 14px; height: 14px; }
.um-encaminhar-modal .um-painel-lista { max-height: 620px; overflow-y: auto; }
.um-encaminhar-canal { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 24px; min-height: 80px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--um-borda); background: transparent; font: inherit; color: var(--um-texto); cursor: pointer; text-align: left; }
.um-encaminhar-canal:hover { background: var(--um-bg-hover); }
.um-encaminhar-canal .um-badge-canal-inline { width: 48px; height: 48px; margin: 0; flex: none; background: #6852F6; display: inline-flex; align-items: center; justify-content: center; } .um-encaminhar-canal .um-badge-canal-inline .um-ico { width: 28px; height: 28px; color: #fff; }
.um-encaminhar-canal .um-opcao-txt { flex: 1; min-width: 0; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 8px; } .um-encaminhar-canal .um-opcao-txt > small:last-child { grid-column: 1 / -1; }
.um-encaminhar-canal .um-opcao-txt b { font-size: 14px; font-weight: 600; } .um-encaminhar-canal .um-opcao-txt small { font-size: 12px; color: var(--um-texto-2); white-space: nowrap; }
.um-encaminhar-canal > .um-ico { width: 21px; height: 21px; color: rgba(33,37,41,.5); flex: none; }
.um-pilula-estado { display: inline-block; padding: 0 8px; border-radius: 12px; border: 1px solid; font-size: 12px; line-height: 20px; }
.um-pilula-estado.um-online { color: #389E0D; background: #F6FFED; border-color: #B7EB8F; } .um-pilula-estado.um-offline { color: #CF1322; background: #FFF1F0; border-color: #FFA39E; }
.um-encaminhar-modal .um-busca.um-secao { margin: 0 24px 4px; padding: 0 12px; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; border: 1px solid var(--um-borda); border-radius: 30px; }
.um-encaminhar-modal .um-busca input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; min-width: 0; color: var(--um-texto); }
.um-encaminhar-conta { display: block; padding: 0 24px 8px; font-size: 12px; }
.um-encaminhar-modal .um-opcao { padding: 10px 24px; gap: 12px; min-height: 64px; box-sizing: border-box; }
.um-encaminhar-modal .um-painel-rodape { display: flex; justify-content: flex-end; }
/* F-63 (r8-func-u60b/u60c): Anexar arquivo (Imagem / Vídeo / Documento em pílulas de borda), a linha do arquivo escolhido com X, as 3
   condições em checkboxes, e o card da agendada com ícone + tipo, lápis + lixeira, "Agendado para:", texto no balão verde. */
.um-agendar-anexar { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; } .um-agendar-anexar > span { font-weight: 600; }
.um-agendar-anexar-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.um-agendar-anexar-botoes .um-pilula { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 14px; } .um-agendar-anexar-botoes .um-ico { width: 16px; height: 16px; }
.um-agendar-anexo { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border: 1px dashed var(--um-borda); border-radius: 12px; font-size: 13px; } .um-agendar-anexo[hidden] { display: none; }
.um-agendar-anexo .um-ico { width: 16px; height: 16px; flex: none; } .um-agendar-anexo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .um-agendar-anexo .um-ico-btn { width: 28px; height: 28px; }
.um-agendar-condicoes { display: grid; gap: 8px; margin-top: 12px; }
.um-check-linha { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; cursor: pointer; } .um-check-linha .um-check { width: 18px; height: 18px; margin: 0; flex: none; }
.um-agendada { padding: 12px 0; }
.um-agendada-cab { display: flex; align-items: center; gap: 10px; }
.um-agendada-ico { width: 36px; height: 36px; border-radius: 10px; background: #EEF2FF; color: var(--um-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; } .um-agendada-ico .um-ico { width: 20px; height: 20px; }
.um-agendada-cab > b { font-size: 16px; font-weight: 600; }
.um-agendada-acoes { margin-left: auto; display: flex; gap: 4px; } .um-agendada .um-agendada-acoes .um-ico-btn { position: static; width: 32px; height: 32px; color: var(--um-texto-2); } .um-agendada-acoes .um-ico-btn:hover { color: var(--um-primary); } .um-agendada-acoes [data-cancelar]:hover { color: var(--um-erro); }
.um-agendada-meta { margin-top: 8px; font-size: 13px; }
.um-agendada-texto { margin-top: 8px; padding: 12px 16px; border-radius: 12px; background: #F6FFED; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.um-agendada-anexo { margin-top: 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; } .um-agendada-anexo .um-ico { width: 14px; height: 14px; }
/* F-68 (r8-func-u16-nova-atendentes): busca "Pesquisar por nome" + select "Setores" na aba Atendentes. */
.um-nova-form .um-nova-busca .um-nova-setor { width: 140px; flex: none; }
/* ===== R9-1 ===== */
/* Conversa (auditoria-ui-r9.md §2 V-6/V-7/V-9/V-11/V-13/V-16/V-28, §1 U-24/U-35/V-20; capturas r9-umbler-22/23/25/29/29e/71). */
/* (V-7/U-35) Balão apagado: texto e 🗑 da esquerda em vermelho apagado (o `text-danger` do Umbler a .6 sobre o verde — pixel F1A6A6 na
   captura 29), 🗑 #DA606E depois da hora; sem avatar nem coluna — a bolha toma as 2 colunas da grade e encosta na margem (Umbler 21 px). */
.um-balao--apagada .um-apagada { color: rgba(218, 96, 110, .6); }
.um-balao--apagada .um-apagada .um-ico { color: inherit; }
.um-balao--apagada > .um-hora .um-apagada-lixeira { color: #DA606E; }
.um-mensagens > .um-balao--out.um-balao--apagada, .um-mensagens > .um-balao--nota.um-balao--apagada { grid-column: 1 / -1; }
/* (V-9) Ícone do evento 12 (`ph` 12 do Umbler; o caret já era 12). A cor rgba(34,34,34,.75) é a da R5-3. */
.um-mensagens > .um-evento > .um-ico { width: 12px; height: 12px; }
/* (V-11) A linha entre Copiar e Encaminhar já existia (::before da R7-5); o `<hr class="my-1">` do Umbler abre 9 px (4 + 1 + 4). */
.um-menu:has([data-menu-msg]) > button[data-menu-msg="encaminhar"] { margin-top: 9px; }
.um-menu:has([data-menu-msg]) > button[data-menu-msg="encaminhar"]::before { top: -5px; border-top: 1px solid var(--um-borda); }
/* (V-16) Pílula de reação 32.5×18 r16 pad 0/8, sem sombra. */
.um-balao .um-reacao { padding: 0 8px; box-shadow: none; }
/* (V-6) Visualizador = `.media-viewer` do Umbler: fundo rgba(6,7,10,.92); botões 32 r50% ícone 17 branco .82; "100%" SFMono 11 em 38×32 r12;
   imagem r12 com sombra 0 24 64 .6. */
.um-visor { background: rgba(6, 7, 10, .92); }
.um-visor-barra { gap: 4px; padding: 12px 16px; }
.um-visor-barra .um-ico-btn { width: 32px; height: 32px; border-radius: 50%; color: rgba(255, 255, 255, .82); }
.um-visor-barra .um-ico-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.um-visor-barra .um-ico-btn .um-ico { width: 17px; height: 17px; }
.um-visor-zoom-btn { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; min-width: 38px; height: 32px; border-radius: 12px; color: rgba(255, 255, 255, .82); padding: 0 6px; }
.um-visor-zoom-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.um-visor-sep { height: 20px; background: rgba(255, 255, 255, .2); margin: 0 6px; }
.um-visor-img { border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
/* (V-28) "↓" flutuante da finalizada (captura 71): 42 r50% branco com sombra, centrado, 16 px acima do cartão — item da coluna flex com
   altura líquida 0 (margem -42 em cima; os 16 px até o cartão são a margem dele) desenhado por cima da caixa de mensagens. Só existe com o cartão (pintarFinalizada). */
.um-ir-ao-fim { position: relative; z-index: 1; flex: none; width: 42px; height: 42px; border-radius: 50%; margin: -42px auto 0; border: 0; background: var(--um-superficie); color: var(--um-texto-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.um-ir-ao-fim[hidden] { display: none; }
.um-ir-ao-fim:hover { color: var(--um-texto); background: var(--um-bg-hover); }
.um-ir-ao-fim .um-ico { width: 18px; height: 18px; }
/* (U-24/V-20) Nome do cabeçalho 16/24 600 #31343B (a lista fica com #1F1F1F — R9-2); chips gap 8. */
.um-cab-meio .um-nome { line-height: 24px; color: #31343B; }
.um-cab-chips { gap: 8px; }
:root[data-theme="dark"] .um-app .um-cab-meio .um-nome { color: var(--um-texto); }
:root[data-theme="dark"] .um-app .um-balao--apagada .um-apagada { color: rgba(240, 120, 132, .8); }


/* ===== R9-2 ===== */
/* Lista, filtros e menus como o Umbler (auditoria-ui-r9 §2 V-3/V-4/V-5/V-12/V-17/V-18/V-20; §1 U-62 conferido: o toast pílula já
   é o do bloco R8-7 — r16, pad 8/16, sombra 0 8 16 .15, cor por tipo — e nada depois dele muda isso). Medidas a 1440×900. */
/* V-3 (r9-umbler-17): o menu do chevron da linha — 210.6 de largura, itens 32 px pad 5/12 com ícone bold 14 #5B5B5B. O menu
   Ordenar continua com o item 42 do `.um-menu` (U-17 fechado); só o menu da linha leva a classe. */
.um-menu.um-menu--linha { min-width: 210px; }
.um-menu--linha > button { min-height: 32px; height: 32px; padding: 5px 12px; gap: 8px; line-height: 22px; white-space: nowrap; }
.um-menu--linha > button > .um-menu-ico { width: 14px; height: 14px; flex: none; color: #5B5B5B; }
:root[data-theme="dark"] .um-menu--linha > button > .um-menu-ico { color: var(--um-texto-2); }
/* V-4 (r9-umbler-13c/13e): campo do multi = "item selecionado"/"N itens selecionados" 14 + badge `bg-warning` 22×22 10/500 #FAAD14
   r50, numa linha só; 259 de largura (a coluna de 292 menos 16,5 de cada lado — a margem de −8 anula o padding do .um-filtro), o que
   dá ao dropdown (left −8 / +16) os 276 do Umbler. */
.um-filtros .um-filtro--multi > .um-multi { margin: 0 -8px; }
.um-filtros .um-multi-caixa { flex-wrap: nowrap; }
.um-filtros .um-multi-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--um-texto); }
.um-filtros .um-multi-n { min-width: 22px; height: 22px; padding: 0; border-radius: 50%; background: #FAAD14; color: #fff; font-size: 10px; font-weight: 500; line-height: 22px; right: 30px; }
.um-filtros .um-multi-caixa:has(.um-multi-n) { padding-right: 60px; }
/* V-5 (r9-umbler-18/18b): modal "Finalizar N conversas" — abas `nav-link` 16 px pad 16/0, ativa #557CF2 600 sublinhada 2 px; rodapé
   88 px com Cancelar 32 (1 px #D9D9D9 r30) + primário 32 à direita. Vence o `.um-painel-rodape:has(> .um-pilula + .um-pilula)`
   (50/50 de 40 px) por especificidade e ordem. */
.um-massa-abas { display: flex; gap: 32px; padding: 0 24px; border-bottom: 1px solid var(--um-borda); flex: none; }
.um-massa-abas > button { display: inline-flex; align-items: center; gap: 8px; padding: 16px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: inherit; font-size: 16px; font-weight: 400; color: #31343B; cursor: pointer; }
.um-massa-abas > button > .um-ico { width: 16px; height: 16px; }
.um-massa-abas > button.ativa { color: #557CF2; font-weight: 600; border-bottom-color: #557CF2; }
.um-massa-abas > button:hover { color: #557CF2; }
:root[data-theme="dark"] .um-massa-abas > button { color: var(--um-texto); }
.um-app .um-massa-modal > .um-painel-rodape { justify-content: flex-end; gap: 16px; padding: 28px 24px; border-top: 0; }
.um-app .um-massa-modal > .um-painel-rodape > .um-pilula { flex: none; height: 32px; padding: 0 16px; font-size: 14px; justify-content: center; }
.um-app .um-massa-modal > .um-painel-rodape > .um-massa-cancelar { border: 1px solid #D9D9D9; border-radius: 30px; color: #31343B; background: transparent; }
.um-app .um-massa-modal > .um-painel-rodape > .um-massa-cancelar:hover { background: var(--um-bg-hover); }
.um-app .um-massa-modal > .um-painel-rodape > .um-massa-modal-ok:disabled { opacity: .5; cursor: not-allowed; }
:root[data-theme="dark"] .um-app .um-massa-modal > .um-painel-rodape > .um-massa-cancelar { border-color: var(--um-borda); color: var(--um-texto); }
/* V-17 (r9-umbler-01): sort ¦ ⌄ é um btn-group unido — `r800 0 0 800` no sort, `0 800 800 0` no ⌄ — com o divisor 1×21 #DFDFDF entre eles. */
.um-lista-topo .um-ordem-grupo { display: inline-flex; align-items: center; position: relative; }
.um-lista-topo .um-ordem-grupo > #umOrdemDir { border-radius: 800px 0 0 800px; }
.um-lista-topo .um-ordem-grupo > #umOrdemMenu { border-radius: 0 800px 800px 0; }
.um-lista-topo .um-ordem-grupo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 21px; margin: -10.5px 0 0 -.5px; background: #DFDFDF; pointer-events: none; }
:root[data-theme="dark"] .um-lista-topo .um-ordem-grupo::before { background: var(--um-borda); }
/* V-18: o "+99" da aba ativa é o `badge-filters` — 22×22 10/500, fundo primário r50 (some quando não há número); nas inativas continua escondido (regra da área da lista). */
.um-abas .um-pilula--ativa .um-aba-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px; background: var(--um-primary); font-size: 10px; font-weight: 500; line-height: 22px; opacity: 1; margin-left: 4px; }
.um-abas .um-pilula--ativa .um-aba-n:empty { display: none; }
/* V-20/U-68: nome da LISTA #1F1F1F (o R8-2 tinha trocado com o do cabeçalho, que é #31343B — R9-1). */
.um-lista .um-linha-meio .um-nome { color: #1F1F1F; }
:root[data-theme="dark"] .um-lista .um-linha-meio .um-nome { color: var(--um-texto); }
/* V-12 (r9-umbler-40): a citação do compositor — bg rgba(0,0,0,.06) r6, borda-esq 4 currentColor, 12/18 #212529 com o autor
   #557CF2; X 34 (o x-circle do R8-5 desenha o anel de 2 px #DA606E). */
.um-app .um-comp-citacao { background: rgba(0,0,0,.06); border-radius: 6px; border-left: 4px solid currentColor; font-size: 12px; line-height: 18px; color: #212529; }
.um-app .um-comp-citacao > span b { color: #557CF2; }
.um-app .um-comp-citacao > .um-comp-citacao-x { width: 34px; height: 34px; }
.um-app .um-comp-citacao .um-comp-citacao-x .um-ico { width: 34px; height: 34px; }
:root[data-theme="dark"] .um-app .um-comp-citacao { background: rgba(255,255,255,.08); color: var(--um-texto); }

/* ===== R9-6 ===== */
/* Compositor › Anexar: Biblioteca / Contato / Localização (auditoria-funcional-r9 F-38/F-39) e Filtros › Data com os intervalos
   do Umbler + Calendário com selects de ano/mês (G-7). Os três modais vivem no slot do modal de assinatura (R8-5): mesma anatomia
   (.um-painel--modal r16 pad 24, título 20/600, botões à direita r30 40). */
.um-app .um-biblioteca-modal, .um-app .um-contato-modal, .um-app .um-localizacao-modal { height: auto; max-height: calc(100% - 24px); padding: 24px; border-radius: 16px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; font-size: 14px; }
.um-app .um-biblioteca-modal { width: 800px; max-width: calc(100% - 32px); }
.um-app .um-contato-modal { width: 640px; max-width: calc(100% - 32px); }
.um-app .um-localizacao-modal { width: 500px; max-width: calc(100% - 32px); }
.um-biblioteca-modal h3, .um-contato-modal h3, .um-localizacao-modal h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 26px; color: var(--um-texto); }
.um-modal-botoes { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; flex: none; }
.um-modal-botoes .um-pilula { height: 40px; padding: 4px 16px; font-size: 16px; gap: 8px; }
.um-modal-botoes .um-pilula--ativa:hover { background: var(--um-primary-hover); border-color: var(--um-primary-hover); }
.um-modal-botoes .um-pilula[disabled] { opacity: .5; cursor: not-allowed; }
/* Biblioteca: abas pílula (Novo arquivo / Biblioteca de mídia), busca r30 40, lista rolável de arquivos (ícone 40 r8 + nome + TIPO · tamanho · data + radio) */
.um-biblioteca-abas { margin: 0 0 12px; align-self: flex-start; }
.um-biblioteca-modal > .um-busca, .um-contato-modal > .um-busca { margin: 0 0 8px; height: 40px; padding: 0 14px; box-sizing: border-box; border: 2px solid var(--um-borda); border-radius: 30px; flex: none; }
.um-biblioteca-modal > .um-busca input, .um-contato-modal > .um-busca input { min-width: 0; font-size: 15px; }
.um-biblioteca-modal > .um-busca .um-ico, .um-contato-modal > .um-busca .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; }
.um-biblioteca-lista, .um-contato-lista { flex: 1 1 auto; min-height: 120px; max-height: 480px; overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--um-borda); border-radius: 12px; }
.um-biblioteca-item, .um-contato-item { min-height: 64px; padding: 0 16px; gap: 12px; }
.um-biblioteca-item:last-child, .um-contato-item:last-child { border-bottom: 0; }
.um-biblioteca-item--escolhido, .um-contato-item--escolhido { background: var(--um-bg-hover); }
.um-biblioteca-ico { width: 40px; height: 40px; flex: none; padding: 8px; box-sizing: border-box; border-radius: 8px; background: var(--um-bg); color: var(--um-primary); }
.um-biblioteca-item .um-opcao-txt { flex-direction: column; align-items: flex-start; gap: 2px; } /* tipo · tamanho · data debaixo do nome (o [data-ficha] do contato já é coluna) */
.um-biblioteca-item .um-opcao-txt > b, .um-contato-item .um-opcao-txt > b { font-weight: 600; font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-biblioteca-item .um-opcao-txt > small, .um-contato-item .um-opcao-txt > small { font-size: 12px; color: var(--um-texto-2); }
.um-biblioteca-item .um-radio, .um-contato-item .um-radio { flex: none; margin-left: auto; }
.um-biblioteca-erro { color: #DA606E; }
/* Contato: avatar 32 + etiquetas do contato em chips pequenos abaixo do telefone */
.um-contato-item .um-avatar--sm { width: 32px; height: 32px; font-size: 12px; flex: none; }
.um-contato-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.um-contato-etiquetas .um-etiqueta { font-size: 11px; line-height: 18px; padding: 0 8px; }
/* Localização: lat/long lado a lado, "Minha localização" com borda, descrição e endereço, erro em vermelho, link "Conferir no mapa" */
.um-localizacao-form { display: grid; gap: 10px; }
.um-localizacao-coords { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.um-localizacao-form .um-filtro { padding: 0; }
.um-localizacao-form .um-filtro > span { font-size: 13px; color: var(--um-texto-2); }
.um-localizacao-form .um-localizacao-campo { height: 40px; border-radius: 30px; border: 2px solid var(--um-borda); padding: 0 16px; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--um-texto); background: var(--um-superficie); width: 100%; }
.um-localizacao-form .um-localizacao-campo:focus { outline: none; border-color: #6689F3; }
.um-localizacao-form > [data-localizacao="minha"] { justify-self: start; height: 36px; padding: 4px 14px; gap: 6px; }
.um-localizacao-erro { margin: 0; font-size: 13px; color: #DA606E; } .um-localizacao-erro[hidden] { display: none; }
.um-localizacao-mapa { margin: 0; font-size: 13px; justify-self: start; }
/* Filtros › Data (G-7): os 10 intervalos em 1 coluna (como o Umbler); Calendário com a grade do Umbler (r9-func-u07-data-cal) */
.um-data-grade { border: 1px solid var(--um-borda); border-radius: 12px; padding: 8px; display: grid; gap: 6px; }
.um-data-grade-topo { display: flex; align-items: center; gap: 4px; }
.um-data-sel { height: 28px; border: 1px solid var(--um-borda); border-radius: 14px; padding: 0 6px; font: inherit; font-size: 12px; color: var(--um-texto); background: var(--um-superficie); min-width: 0; }
.um-data-sel[name="calAno"] { width: 66px; } .um-data-sel[name="calMes"] { flex: 1; }
.um-data-navs { display: flex; flex: none; border: 1px solid var(--um-borda); border-radius: 14px; overflow: hidden; }
.um-data-navs .um-data-nav { width: 28px; height: 26px; border-radius: 0; } .um-data-navs .um-data-nav + .um-data-nav { border-left: 1px solid var(--um-borda); }
.um-data-navs .um-data-nav .um-ico { width: 12px; height: 12px; }
.um-data-semana, .um-data-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.um-data-semana > span { text-align: center; font-size: 12px; font-weight: 600; color: var(--um-primary); line-height: 20px; }
.um-data-dia { height: 26px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; color: var(--um-texto); cursor: pointer; padding: 0; }
.um-data-dia:not(.um-data-dia--de):not(.um-data-dia--ate):hover { background: var(--um-bg-hover); }
.um-data-dia--fora { color: var(--um-texto-3); }
.um-data-dia--hoje { box-shadow: inset 0 0 0 1px var(--um-primary); }
.um-data-dia--entre { background: #E8EEFF; color: var(--um-primary); border-radius: 0; }
.um-data-dia--de, .um-data-dia--ate { background: var(--um-primary); color: #fff; }
:root[data-theme="dark"] .um-data-dia--entre { background: rgba(102, 137, 243, .25); }
:root[data-theme="dark"] .um-biblioteca-ico { background: var(--um-bg-hover); }

/* ===== R9-3 ===== */
/* V-2 (r9-umbler-24-balao-reagir): o picker de reação flutua à esquerda da barra e ABAIXO dela, preso ao #umApp — é JS (posicaoPicker
   em paineis-acao.js); o CSS do R8-14 (.um-menu--picker) continua. */
/* V-21/U-50 (r9-umbler-37-pop-chatbot): "Fluxo → Criar Card" com a seta como ícone 16 entre bot e gatilho; busca r16 42 px + "+" azul 40. */
.um-opcao > b > .um-ico--seta { width: 16px; height: 16px; vertical-align: -3px; margin: 0 2px; color: inherit; }
.um-painel-acao > .um-chatbot-busca { padding: 8px 24px 16px; gap: 8px; }
.um-chatbot-busca .um-busca { height: 42px; border-radius: 16px; border: 2px solid #DFDFDF; }
.um-chatbot-novo { width: 40px; height: 40px; flex: none; text-decoration: none; }
.um-chatbot-novo .um-ico { width: 18.7px; height: 18.7px; }
/* V-26 (r9-umbler-67-nova-conversa): silhueta padrão no lugar das iniciais; "– há uma hora" é um item ao lado do nome (gap 8) e
   quebra na própria coluna, como o `text-body-secondary` do Umbler. */
.um-app .um-nova-contato > .um-avatar--padrao { display: block; width: 48px; height: 48px; background: transparent; box-shadow: none; overflow: hidden; }
.um-app .um-nova-contato-txt .um-nome { display: flex; align-items: flex-start; gap: 8px; }
.um-app .um-nova-contato-txt .um-nome > b { flex: 0 1 auto; min-width: 0; }
.um-app .um-nova-contato-txt .um-nome > .um-nova-quando { flex: 0 1 auto; min-width: 0; white-space: normal; font-size: 14px; line-height: 19.6px; font-weight: 700; color: rgba(34,34,34,.75); }
/* V-10 (r9-umbler-65-todas-conversas): "Conversas do contato" em accordion — linha 48 px (badge 24 · data 600 · chip · › 42),
   a expandida vira o cartão do Umbler: cabeçalho 84 px com borda #D9D9D9 e corpo #EEF2FE com "Hoje" + balões (a grade dos balões
   é a mesma da conversa: balão à esquerda/direita, avatar na coluna de 40). Sem barra de hover dentro do cartão. */
.um-conv-contato-item { border-bottom: 1px solid var(--um-borda); }
.um-conv-contato-item[hidden] { display: none; }
.um-app .um-painel .um-conv-contato { display: grid; grid-template-columns: 24px auto auto minmax(0, 1fr) 42px; align-items: center; column-gap: 8px; min-height: 48px; padding: 0 24px; box-sizing: border-box; cursor: pointer; background: var(--um-superficie); }
.um-app .um-painel .um-conv-contato:hover { background: var(--um-bg-hover); }
.um-app .um-painel .um-conv-contato > b { font-size: 16px; font-weight: 600; color: var(--um-texto); white-space: nowrap; }
.um-app .um-painel .um-conv-contato > .um-conv-estado { font-size: 16px; line-height: 24px; height: 26px; padding: 0 4px; border-radius: 12px; }
.um-app .um-painel .um-conv-contato > .um-ico-btn { grid-column: 5; width: 42px; height: 42px; color: #31343B; } .um-app .um-painel .um-conv-contato > .um-ico-btn .um-ico { width: 21px; height: 21px; }
.um-app .um-painel .um-conv-contato--aberta { min-height: 84px; padding: 20px 24px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; }
.um-conv-contato-corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 12px; align-content: start; padding: 16px 24px 24px; background: #EEF2FE; cursor: pointer; }
.um-conv-contato-corpo > * { grid-column: 1 / -1; min-width: 0; }
.um-conv-contato-corpo > .um-dia { justify-self: center; }
.um-conv-contato-corpo > .um-balao--in { justify-self: start; }
.um-conv-contato-corpo > .um-balao--out, .um-conv-contato-corpo > .um-balao--nota { grid-column: 1; justify-self: end; }
.um-conv-contato-corpo > .um-balao-autor { grid-column: 2; align-self: start; justify-self: start; width: 40px; height: 40px; font-size: 14px; object-fit: cover; }
.um-conv-contato-corpo > .um-balao { max-width: 75%; }
.um-conv-contato-corpo .um-balao, .um-conv-contato-corpo .um-balao-autor { pointer-events: none; } /* é um resumo: o clique em qualquer ponto do cartão abre a ficha (nunca o player/tooltip/reação do balão) */
.um-conv-contato-corpo .um-hover-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* como o modo de seleção (R8-14): a barra fica no DOM (R7-5), só não aparece */
.um-conv-contato-corpo > .um-texto-2 { margin: 0; font-size: 14px; }
/* V-22 (r9-umbler-60d-contato-observacoes): caixa do editor = ql-toolbar (2 px #DFDFDF, r12 em cima, pad 8, botões 30×22 com
   ícone bold 14, grupos com 8 px) + área r16 embaixo; a pílula de vazio é o `.alert-info` do Umbler (#D6E4FF, r16, pad 8/16, sombra). */
.um-editor { border: 2px solid #DFDFDF; border-radius: 12px 12px 16px 16px; }
.um-editor:focus-within { border-color: #6689F3; }
.um-editor-barra { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 2px solid #DFDFDF; }
.um-editor-grupo { display: inline-flex; align-items: center; gap: 2px; }
.um-editor-grupo + .um-editor-grupo { padding-left: 8px; border-left: 1px solid transparent; }
.um-editor-barra .um-ico-btn { width: 30px; height: 22px; border-radius: 6px; color: #31343B; } .um-editor-barra .um-ico-btn .um-ico { width: 14px; height: 14px; }
.um-editor-barra .um-ico-btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.um-app .um-painel .um-editor > .um-obs-nova { border: 0; border-radius: 0 0 14px 14px; outline: none; box-shadow: none; padding: 6px 12px; min-height: 88px; font-size: 14px; line-height: 24.5px; } /* a borda é da caixa (.um-editor), não da textarea — a regra R8-6 (.um-app .um-painel .um-input, 2 px r16) vencia a do R8-12 */
.um-aviso-info--pilula { border-radius: 16px; background: #D6E4FF; padding: 8px 16px; gap: 8px; font-size: 14px; line-height: 21px; color: #1F1F1F; box-shadow: 0 2px 4px rgba(0,0,0,.075); }
.um-aviso-info--pilula > .um-ico { width: 14px; height: 14px; }
/* V-23 (r9-umbler-69-logs): selo pequeno sobre o avatar de quem agiu (círculo 16 azul com borda branca, no canto inferior direito). */
.um-log-avatar { position: relative; width: 40px; height: 40px; display: block; }
.um-log-avatar > .um-avatar--sm { width: 40px; height: 40px; font-size: 14px; background: var(--um-primary); color: #fff; }
.um-log-selo { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--um-primary); border: 2px solid var(--um-superficie); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.um-log-selo .um-ico { width: 8px; height: 8px; }
/* V-24 (r9-umbler-60-painel-contato): rótulo do campo 700 #5B5B5B; "Adicionar" 14 #6F7380 em pílula 40 px pad 4/16, como o `btn-hover` do Umbler. */
.um-app .um-painel .um-campo > b { font-weight: 700; color: #5B5B5B; }
.um-app .um-painel .um-campo > .um-link { height: 40px; padding: 4px 16px; box-sizing: border-box; font-size: 14px; color: #6F7380; }
/* U-61: o ⌄ do topo do interno é o mesmo botão 42 do topo da lista (já coberto por .um-lista-topo .um-ico-btn). */
:root[data-theme="dark"] .um-app .um-painel .um-conv-contato > b, :root[data-theme="dark"] .um-app .um-painel .um-campo > b { color: var(--um-texto); }
:root[data-theme="dark"] .um-conv-contato-corpo { background: var(--um-bg); }
:root[data-theme="dark"] .um-app .um-painel .um-conv-contato--aberta { border-color: var(--um-borda); }
:root[data-theme="dark"] .um-editor, :root[data-theme="dark"] .um-editor-barra, :root[data-theme="dark"] .um-chatbot-busca .um-busca { border-color: var(--um-borda); }
:root[data-theme="dark"] .um-editor-barra .um-ico-btn { color: var(--um-texto); }
:root[data-theme="dark"] .um-aviso-info--pilula { background: #1E2A4A; color: var(--um-texto); }
:root[data-theme="dark"] .um-app .um-nova-contato-txt .um-nome > .um-nova-quando { color: var(--um-texto-2); }

/* ===== R9-5 ===== */
/* G-1 (auditoria-funcional-r9, captura r9-func-n30-fab-toast): o #toast global do Terminal (terminal.css: position:fixed; bottom/right
   24px; z-index:99) fica com pointer-events:auto mesmo VAZIO/escondido (opacity 0) e cobre o FAB do Encaminhar no canto inferior direito
   da conversa — elementFromPoint no centro do FAB devolvia o #toast e o clique humano nunca chegava. Com a aba montada (#umApp) o
   contêiner vazio ou sem .show deixa o clique passar (o Terminal esconde só pela classe e não esvazia o texto), e o FAB sobe para
   z-index 100 (o #umApp não cria contexto de empilhamento: position:relative sem z-index). Com .show o toast continua clicável.
   Prova: E2E r9-5-fab-sobre-toast — elementFromPoint no centro do FAB = o FAB, e o clique abre "Escolha o canal". */
body:has(#umApp) #toast:empty { pointer-events: none; }
body:has(#umApp) #toast:not(.show) { pointer-events: none; }
.um-selecao-fab { position: relative; z-index: 100; }
/* F-68: o ordenar da aba Atendentes do Nova conversa fica ao lado do select Setores, como o "+" do passo 1. */
.um-app .um-nova-busca .um-nova-setor + .um-painel-ordenar { flex: none; }
/* ===== R10-B ===== */
/* auditoria-ui-r10 W-3: prévia de nota = lápis note-pencil 14 #FAAD14 no lugar do ✓✓ (captura r10-umbler-07-finalizados). */
.um-lista .um-previa .um-previa-nota { width: 14px; height: 14px; color: #FAAD14; flex: none; }
/* V-8: "X reagiu com 👍 a:" em negrito antes do texto (r9-umbler-22). */
.um-lista .um-previa .um-previa-reacao { font-weight: 600; }
/* W-12 (r10-umbler-05b/07): atendentes 26 + 19 sobreposto (x+19, centrado) + "+" azul 19 do 3º em diante; sem borda (U-9). */
.um-lista .um-atendentes { align-items: center; }
.um-lista .um-atendentes .um-avatar--sm { margin-left: 0; }
.um-lista .um-atendentes .um-atendente-2 { width: 19px; height: 19px; margin-left: -7px; }
.um-lista .um-atendentes .um-atendentes-mais { width: 19px; height: 19px; margin-left: -2px; background: #557CF2; color: #fff; font-size: 13px; font-weight: 600; line-height: 19px; display: inline-flex; align-items: center; justify-content: center; }
.um-lista .um-atendentes .um-avatar--padrao { background: transparent; box-shadow: none; display: block; overflow: hidden; border-radius: 50%; }
/* W-16: chip do setor da lista = name-ellipsis-sector 70 ("Pós Ven…" em vez de "Pós V…"). */
.um-lista .um-linha-dir .um-chip-setor { max-width: 70px; }


/* ===== R10-A ===== */
/* W-1 (capturas r10-umbler-29g/29h): balão de Contato/Localização é um CARTÃO — o Umbler desenha a bolha com 320 de largura
   (`chat-bubble` 369.7×105 para o contato, 320×263 para a localização), pad 10, gap 8, sombra 0 2 4 .075. O balão comum (75%) fica. */
.um-balao--cartao { max-width: 320px; width: 100%; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); }
.um-balao--cartao:has(.um-cartao-contato) { max-width: 370px; } /* o vCard do Umbler é mais largo (369.7) que a localização (320) */
/* Contato: avatar 40 r50% + nome 14/21 600 #405E40 (quebra em 2 linhas) + telefone 12.25/18.4 rgba(34,34,34,.75) + 2 botões 34×34 r30
   (`ph-eye` "Ver contato", `ph-chat` "Iniciar conversa"). Sem foto no vCard (ProfilePictureBlob nulo): iniciais no avatar padrão. */
.um-cartao-contato { display: flex; align-items: center; gap: 8px; min-width: 0; }
.um-cartao-contato .um-cartao-contato-foto { width: 40px; height: 40px; flex: none; font-size: 14px; }
.um-cartao-contato-meio { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.um-cartao-contato-nome { font-size: 14px; line-height: 21px; font-weight: 600; color: #405E40; overflow-wrap: anywhere; }
.um-cartao-contato-tel { font-size: 12.25px; line-height: 18.4px; color: rgba(34, 34, 34, .75); }
.um-cartao-contato-acoes { display: flex; gap: 2px; flex: none; }
.um-cartao-contato .um-cartao-contato-btn { width: 34px; height: 34px; border-radius: 30px; color: #405E40; }
.um-cartao-contato .um-cartao-contato-btn .um-ico { width: 18px; height: 18px; }
.um-cartao-contato .um-cartao-contato-btn:hover { background: rgba(64, 94, 64, .1); }
/* Localização: mapa 300×170 r12 (link "Abrir no mapa") = tiles 256 do OpenStreetMap posicionados (tilesDoMapa) + pino no centro +
   atribuição no canto (a licença do OSM pede o crédito); título 14/21 600 + endereço 12.25 + `<a>` 42 r30 `arrow-square-out`. */
.um-cartao-local { display: grid; gap: 8px; min-width: 0; }
.um-cartao-local-mapa { display: block; position: relative; width: 300px; height: 170px; max-width: 100%; border-radius: 12px; overflow: hidden; background: #E9EDF2; cursor: pointer; }
.um-cartao-local-tile { position: absolute; width: 256px; height: 256px; max-width: none; display: block; pointer-events: none; }
.um-cartao-local-mapa .um-cartao-local-pino { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -30px 0 0 -16px; color: #DA3B3B; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.um-cartao-local-osm { position: absolute; right: 4px; bottom: 2px; font-size: 9px; line-height: 12px; color: rgba(34, 34, 34, .75); background: rgba(255, 255, 255, .7); padding: 0 4px; border-radius: 4px; }
.um-cartao-local-rodape { display: flex; align-items: center; gap: 8px; min-width: 0; }
.um-cartao-local-meio { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.um-cartao-local-nome { font-size: 14px; line-height: 21px; font-weight: 600; color: #405E40; overflow-wrap: anywhere; }
.um-cartao-local-end { font-size: 12.25px; line-height: 18.4px; color: rgba(34, 34, 34, .75); }
.um-cartao-local-abrir { width: 42px; height: 42px; border-radius: 30px; flex: none; color: #405E40; }
.um-cartao-local-abrir:hover { background: rgba(64, 94, 64, .1); }
.um-balao--in .um-cartao-contato-nome, .um-balao--in .um-cartao-local-nome, .um-balao--in .um-cartao-contato-btn, .um-balao--in .um-cartao-local-abrir { color: var(--um-balao-in-texto); }
:root[data-theme="dark"] .um-app .um-cartao-contato-nome, :root[data-theme="dark"] .um-app .um-cartao-local-nome, :root[data-theme="dark"] .um-app .um-cartao-contato .um-cartao-contato-btn, :root[data-theme="dark"] .um-app .um-cartao-local-abrir { color: var(--um-balao-out-texto); }
:root[data-theme="dark"] .um-app .um-cartao-contato-tel, :root[data-theme="dark"] .um-app .um-cartao-local-end { color: var(--um-texto-2); }
:root[data-theme="dark"] .um-app .um-cartao-local-mapa { background: var(--um-bg-hover); }
/* W-11 (captura r10-umbler-71): o "↓" (42, margem −42 do R9-1 = altura líquida 0) ficava POR CIMA do último evento. O corpo da
   finalizada ganha 67 px de padding embaixo: o ↓ entra nesses 67 e sobram os 25 px entre o último evento e o ↓ que o Umbler deixa
   (y 341+18 → 384); os 16 px até o cartão continuam a margem do cartão. Quem rola para cima continua com o ↓ flutuando (é para isso que ele serve). */
.um-conversa--finalizada .um-mensagens { padding-bottom: 67px; }


/* ===== R10-D ===== */
/* Filtros › Data (auditoria-ui-r10 W-9, r10-umbler-13f × r10-nosso-13f): o popover do Umbler é FLUTUANTE, 400 px, à direita da coluna
   de Filtros (x = coluna.right + 8, y = topo do campo — posicaoDataDrop em filtros.js), e não um drop de 260 preso dentro da coluna
   que cortava o Aplicar a 900 px. "Data inicial | Data final" lado a lado como inputs de TEXTO dd/mm/aaaa r30 (sem o seletor nativo),
   selects "2026" "Setembro" à esquerda e ‹ › à direita, grade 7 colunas com dia 36 px, Aplicar largura toda. */
.um-filtros .um-data-drop { position: fixed; left: 0; top: 0; width: 400px; max-width: calc(100vw - 16px); padding: 16px; z-index: 60; }
.um-data-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.um-data-campos > label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 0; }
.um-filtros .um-data-cal { gap: 12px; }
.um-filtros .um-data-cal .um-data-input { height: 36px; padding: 0 14px; border: 2px solid var(--um-borda); border-radius: 30px; font-size: 14px; min-width: 0; box-sizing: border-box; width: 100%; }
.um-filtros .um-data-cal .um-data-input:focus { outline: none; border-color: #6689F3; }
.um-filtros .um-data-grade { padding: 12px; gap: 8px; }
.um-filtros .um-data-grade-topo { gap: 8px; }
.um-filtros .um-data-sel { height: 32px; border-radius: 16px; padding: 0 10px; font-size: 14px; }
.um-filtros .um-data-sel[name="calAno"] { width: 84px; } .um-filtros .um-data-sel[name="calMes"] { flex: 0 1 130px; }
.um-data-navs { margin-left: auto; border-radius: 16px; }
.um-filtros .um-data-navs .um-data-nav { width: 40px; height: 30px; } .um-filtros .um-data-navs .um-data-nav .um-ico { width: 14px; height: 14px; }
.um-filtros .um-data-semana > span { font-size: 14px; line-height: 24px; }
.um-filtros .um-data-dia { height: 36px; font-size: 14px; border-radius: 8px; }
.um-filtros .um-data-dia--de, .um-filtros .um-data-dia--ate { border-radius: 8px; }
.um-data-cal > .um-data-aplicar { width: 100%; height: 40px; font-size: 16px; margin-top: 0; }
/* Filtros › multi (W-18, r10-umbler-13b): `.list-item` 36 px (passo 40) SÓ com o texto — o checkbox nativo cobre o item invisível
   (continua clicável e é o que o FormData lê) e o ✓ 16 aparece só no marcado. (W-24) "item selecionado" é singular sempre — JS. */
.um-filtros .um-multi-item { position: relative; min-height: 36px; height: 36px; padding: 0 12px; margin: 0 4px 4px; gap: 8px; border-radius: 8px; font-size: 14px; line-height: 36px; }
.um-filtros .um-multi-item > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* z-index: o chip .um-etiqueta (posicionado) ficava por cima e interceptava o clique */
.um-filtros .um-multi-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-filtros .um-multi-item > .um-multi-check { display: none; flex: none; width: 16px; height: 16px; color: var(--um-primary); pointer-events: none; }
.um-filtros .um-multi-item > .um-multi-check .um-ico { width: 16px; height: 16px; }
.um-filtros .um-multi-item:has(> input:checked) > .um-multi-check { display: inline-flex; }
.um-filtros .um-multi-item:has(> input:checked) { color: var(--um-primary); }
.um-filtros .um-multi-item:has(> input:focus-visible) { box-shadow: inset 0 0 0 2px #6689F3; }
.um-filtros .um-multi-lista { padding: 4px 0 0; }
/* Contato › Detalhes › Conversas do contato (W-10, r10-umbler-65): "Filtrar" é a pílula outline com funil (36 r30, 1 px #D9D9D9) ao
   lado do "+ Conversa"; a busca aparece só ao clicar nela. */
.um-conv-contato-topo { justify-content: space-between; }
.um-app .um-painel .um-conv-contato-topo > .um-conv-contato-filtrar { height: 36px; padding: 4px 16px; border: 1px solid #D9D9D9; border-radius: 30px; color: #31343B; background: transparent; gap: 8px; }
.um-app .um-painel .um-conv-contato-topo > .um-conv-contato-filtrar .um-ico { width: 16px; height: 16px; }
.um-app .um-painel .um-conv-contato-topo > .um-conv-contato-filtrar[aria-expanded="true"], .um-app .um-painel .um-conv-contato-topo > .um-conv-contato-filtrar:hover { border-color: var(--um-primary); color: var(--um-primary); }
.um-app .um-painel .um-conv-contato-busca { margin: 12px 24px 0; height: 40px; padding: 0 14px; box-sizing: border-box; border: 2px solid var(--um-borda); border-radius: 30px; }
.um-app .um-painel .um-conv-contato-busca:focus-within { border-color: #6689F3; }
.um-app .um-painel .um-conv-contato-busca > input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--um-texto); outline: none; }
.um-conv-contato-busca[hidden] { display: none; }
.um-app .um-painel .um-conv-contato-busca + .um-conv-contato-lista { margin-top: 12px; }
/* Contato (W-22, r10-umbler-60/92): Bloquear/Excluir rolam com o corpo — o rodapé vira o último bloco do .um-painel-corpo (sem
   borda em cima, com o respiro do Umbler), e "Gênero"/"Ativo pela última vez"/"Data de criação da conta" aparecem a 900 px. */
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato { margin-top: 0; border-top: 0; padding: 16px 24px 24px; flex-direction: column; gap: 8px; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula { flex: none; width: 100%; justify-content: center; height: 40px; font-size: 16px; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula--perigo { border-color: #DA606E; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula--perigo:hover { background: #DA606E; border-color: #DA606E; color: #fff; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula--borda:hover { color: var(--um-primary); }
/* Agendar › Agendadas/Concluídas vazio (W-20, r10-umbler-63b): a pílula info "Nada por aqui!" do Umbler. */
.um-agendadas-vazio { align-items: flex-start; } .um-agendadas-vazio > .um-ico { margin-top: 3px; }
/* Chat interno (W-23, r10-umbler-85): a hora fica na altura do NOME (o bloco nome+prévia é centrado na linha de 106, como o Umbler;
   a coluna da direita tinha height:auto e a hora caía no meio — agora tem a altura do bloco, 50 = nome 22 + 6 + prévia 22, e alinha ao topo). */
.um-linha--interna > .um-linha-dir { height: 50px; justify-content: flex-start; }
:root[data-theme="dark"] .um-app .um-painel .um-conv-contato-topo > .um-conv-contato-filtrar { border-color: var(--um-borda); color: var(--um-texto); }


/* ===== R10-C ===== */
/* Compositor › Anexar com a anatomia do Umbler (auditoria-ui-r10 §2 W-6/W-7/W-8, capturas r10-umbler-34b/34c/34d). Biblioteca é um
   OFFCANVAS 500 à direita (abas sublinhadas, busca + select + ordenar, GRADE 3 colunas com miniatura 118×64, "Anexar" largura toda);
   Contato é um modal 800 com X (busca + Etiquetas + ordenar + "+", linha 48 foto/nome/"– há N"/telefone/chip/›, clique envia);
   Localização tem a busca de endereço + mapa 180 (tracejado até haver ponto; mosaico de tiles do OSM com pino). Os três continuam
   no slot do modal de assinatura (R8-5/R9-6). O bloco R9-6 do modal 800 da biblioteca fica sem uso (a classe .um-biblioteca-modal
   não é mais gerada). Controles próprios, sem classe global de botão. */
.um-app .um-biblioteca-off { width: 500px; max-width: 100%; box-sizing: border-box; }
.um-biblioteca-off .um-offcanvas-abas { border-bottom: 1px solid var(--um-borda); padding: 0 24px; gap: 28px; }
.um-biblioteca-off .um-offcanvas-abas button { height: 50px; font-size: 16px; font-weight: 500; }
.um-biblioteca-barra { display: flex; align-items: center; gap: 12px; padding: 20px 24px 8px; flex: none; }
.um-biblioteca-barra > .um-busca { flex: 1 1 auto; min-width: 0; margin: 0; height: 40px; padding: 0 14px; box-sizing: border-box; border-radius: 30px; }
.um-biblioteca-barra > .um-busca .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; }
.um-biblioteca-barra > .um-busca input { min-width: 0; font-size: 15px; }
.um-biblioteca-tipo { flex: 0 0 auto; width: 190px; height: 40px; padding: 0 12px; border-radius: 30px; font-size: 15px; }
.um-biblioteca-ordem, .um-contato-ordem { flex: none; width: 32px; height: 32px; border: 1px solid var(--um-borda); border-radius: 800px; }
.um-biblioteca-ordem .um-ico, .um-contato-ordem .um-ico { width: 16px; height: 16px; }
.um-biblioteca-off .um-biblioteca-lista { padding: 20px 24px 8px; border: 0; border-radius: 0; max-height: none; }
.um-biblioteca-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.um-biblioteca-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; padding: 0; background: transparent; border-radius: 10px; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; } /* zera o padding/min-height/fundo da linha do R9-6 */
.um-biblioteca-item:focus-visible { outline-color: var(--um-primary); }
.um-biblioteca-item--escolhido { outline-color: var(--um-primary); background: transparent; }
.um-biblioteca-item--escolhido .um-biblioteca-nome > b { color: var(--um-primary); }
.um-biblioteca-mini { position: relative; height: 64px; border-radius: 8px; overflow: hidden; background: var(--um-bg); display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--um-texto-2); font-size: 11px; font-weight: 600; }
.um-biblioteca-mini > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.um-biblioteca-mini--pdf { background: #722ED1; color: #fff; }
.um-biblioteca-mini--pdf .um-ico { width: 36px; height: 36px; }
.um-biblioteca-mini--video { background: #2B2F3A; color: #fff; }
.um-biblioteca-play { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.9); color: #1F1F1F; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.um-biblioteca-play .um-ico { width: 10px; height: 10px; margin-left: 1px; }
.um-biblioteca-barra-mini { position: absolute; left: 32px; right: 8px; bottom: 14px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.6); z-index: 1; }
.um-biblioteca-barra-mini::before { content: ""; position: absolute; left: 0; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--um-primary); }
.um-biblioteca-mini--audio .um-biblioteca-barra-mini, .um-biblioteca-mini--video:not(:has(img)) .um-biblioteca-barra-mini { background: rgba(31,31,31,.25); }
.um-biblioteca-mini--audio { background: var(--um-bg); }
.um-biblioteca-nome { display: flex; align-items: center; gap: 2px; min-width: 0; }
.um-biblioteca-nome > b { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-biblioteca-mais { width: 24px; height: 24px; flex: none; }
.um-biblioteca-mais[disabled] { cursor: not-allowed; opacity: .7; } .um-biblioteca-mais .um-ico { width: 14px; height: 14px; }
.um-biblioteca-item > small { font-size: 10px; line-height: 14px; color: var(--um-texto-2); margin-top: -2px; }
.um-biblioteca-off .um-painel-rodape { border-top: 0; padding: 16px 24px 24px; }
.um-biblioteca-off .um-biblioteca-anexar { width: 100%; justify-content: center; height: 44px; font-size: 16px; }
.um-biblioteca-off .um-biblioteca-anexar[disabled] { background: var(--um-desabilitado); border-color: var(--um-desabilitado); color: var(--um-texto-3); cursor: not-allowed; }
/* Cabeçalho comum dos modais do Anexar: título 20/600 + X à direita (o "Escolha um contato" e o "Enviar localização" do Umbler) */
.um-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex: none; }
.um-modal-cab > h3 { margin: 0; }
.um-modal-cab > .um-ico-btn { flex: none; color: var(--um-texto-3); margin-right: -8px; }
/* Contato: modal 800; barra busca (flex) + Etiquetas 190 + ordenar 32 + "+" 40 azul; lista rolável de linhas 48 */
.um-app .um-contato-modal { width: 800px; max-width: calc(100% - 32px); }
.um-contato-barra { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex: none; }
.um-contato-barra > .um-busca { flex: 1 1 auto; min-width: 0; margin: 0; height: 40px; padding: 0 14px; box-sizing: border-box; border: 2px solid var(--um-borda); border-radius: 30px; }
.um-contato-barra > .um-busca .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); flex: none; }
.um-contato-barra > .um-busca input { min-width: 0; font-size: 15px; }
.um-contato-etiqueta { flex: 0 0 auto; width: 190px; height: 40px; padding: 0 12px; border-radius: 30px; font-size: 15px; }
.um-contato-novo { flex: none; width: 40px; height: 40px; }
.um-contato-modal .um-contato-lista { flex: 1 1 auto; min-height: 120px; max-height: 620px; overflow-y: auto; scrollbar-width: thin; border: 0; border-radius: 0; }
.um-contato-item { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 14px 8px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--um-borda); background: transparent; font: inherit; color: var(--um-texto); text-align: left; cursor: pointer; }
.um-contato-item:last-child { border-bottom: 0; }
.um-contato-item:hover, .um-contato-item:focus-visible { background: var(--um-bg-hover); outline: none; }
.um-contato-foto { width: 40px; height: 40px; font-size: 14px; flex: none; }
.um-contato-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.um-contato-nome { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.um-contato-nome > b { font-size: 14px; font-weight: 700; line-height: 20px; overflow-wrap: anywhere; }
.um-contato-ha { font-size: 14px; line-height: 20px; color: var(--um-texto-2); white-space: nowrap; flex: none; }
.um-contato-fone { font-size: 12px; line-height: 16px; color: var(--um-texto-3); }
.um-contato-chip { flex: 0 0 200px; display: flex; align-items: center; }
.um-contato-seta { width: 18px; height: 18px; flex: none; color: var(--um-texto-3); margin: 0 12px; }
/* Localização: busca + lupa + "Minha localização"; resultados do Nominatim; mapa 180 (tracejado vazio / mosaico de tiles); descrição */
.um-localizacao-form { display: grid; gap: 12px; }
.um-localizacao-topo { display: flex; align-items: center; gap: 4px; }
.um-localizacao-topo > .um-localizacao-busca { flex: 1 1 auto; min-width: 0; }
.um-localizacao-topo > .um-ico-btn { flex: none; width: 36px; height: 36px; }
.um-localizacao-minha { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--um-texto); cursor: pointer; border-radius: 8px; }
.um-localizacao-minha:hover { background: var(--um-bg-hover); }
.um-localizacao-minha .um-ico { width: 18px; height: 18px; color: var(--um-texto-2); }
.um-localizacao-status { margin: -4px 0 0; font-size: 13px; }
.um-localizacao-resultados { display: grid; border: 1px solid var(--um-borda); border-radius: 12px; max-height: 180px; overflow-y: auto; }
.um-localizacao-resultado { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--um-borda); background: transparent; font: inherit; font-size: 13px; line-height: 18px; color: var(--um-texto); text-align: left; cursor: pointer; }
.um-localizacao-resultado:last-child { border-bottom: 0; } .um-localizacao-resultado:hover { background: var(--um-bg-hover); }
.um-localizacao-resultado .um-ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--um-primary); }
.um-localizacao-mapa { position: relative; width: 100%; height: 180px; box-sizing: border-box; border-radius: 12px; overflow: hidden; background: var(--um-bg); }
.um-localizacao-mapa--vazio { border: 1px dashed var(--um-borda); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--um-texto-2); font-size: 14px; }
.um-localizacao-mapa--vazio .um-ico { width: 20px; height: 20px; }
.um-mapa { position: relative; overflow: hidden; margin: 0 auto; }
.um-mapa > img { position: absolute; width: 256px; height: 256px; max-width: none; display: block; }
.um-mapa-pino { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: #DA606E; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.um-mapa-pino .um-ico { width: 32px; height: 32px; }
.um-mapa-credito { position: absolute; right: 0; bottom: 0; padding: 1px 6px; font-size: 10px; line-height: 14px; color: #1F1F1F; background: rgba(255,255,255,.75); text-decoration: none; border-top-left-radius: 6px; }
.um-localizacao-endereco { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px 16px; font-size: 12px; line-height: 16px; color: #1F1F1F; background: linear-gradient(transparent, rgba(255,255,255,.95) 40%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-localizacao-descricao { padding: 0; }
.um-localizacao-descricao > span { font-size: 14px; color: var(--um-texto-2); } .um-localizacao-descricao > span > b { color: var(--um-texto); font-weight: 600; }
.um-localizacao-erro { margin: 0; font-size: 13px; color: #DA606E; } .um-localizacao-erro[hidden] { display: none; }
@media (max-width: 900px) { .um-biblioteca-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .um-contato-chip { flex-basis: auto; } .um-contato-chip:empty { display: none; } }
:root[data-theme="dark"] .um-biblioteca-mini--audio, :root[data-theme="dark"] .um-localizacao-mapa { background: var(--um-bg-hover); }
:root[data-theme="dark"] .um-biblioteca-play { background: rgba(255,255,255,.85); }
:root[data-theme="dark"] .um-biblioteca-off .um-biblioteca-anexar[disabled] { background: var(--um-bg-hover); border-color: var(--um-bg-hover); }

/* ===== R10-E ===== */
/* F-70: o ⋮ "Mais opções" da lista (toggle "Som de notificação") — mesmo botão r800 #5B5B5B dos outros do topo; o item ligado usa o
   aria-current do menu (fundo --um-ativo, como "Ordenar por") e ganha um ✓ à direita para ler como toggle. */
.um-menu--lista button[aria-current="true"]::after { content: '\2713'; margin-left: auto; padding-left: 12px; font-weight: 700; color: var(--um-primary); }
.um-menu--lista button { display: flex; align-items: center; min-width: 220px; }

/* ===== R11-0 ===== */
/* Clareza de origem (pedido do dono 21/09): a aba mistura Umbler (roxo Starter / verde API oficial), chips próprios pelo Evolution
   (verde com anel — "chip") e SMS (cinza com o balão). Cada linha, o cabeçalho, o Detalhes e o compositor dizem de onde a
   conversa vem e por onde a resposta sai. Só classes novas + o data-canal-tipo que o R8-2 criou. */
/* badge do chip (Evolution): o verde do WhatsApp com um anel branco interno para diferenciar da API oficial num relance */
.um-badge-canal[data-canal-tipo="evolution"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 3px #128C7E; }
/* cabeçalho: chip discreto "via …" depois do setor — mesma anatomia do chip do setor (22 px, 12 px), cor pelo tipo */
.um-cab-chips .um-chip-origem { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 22px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--um-borda); border-radius: var(--um-raio-pilula); font-size: 12px; line-height: 20px; color: var(--um-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.um-cab-chips .um-chip-origem::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7662FA; flex: none; }
.um-chip-origem[data-canal-tipo="api"]::before, .um-chip-origem[data-canal-tipo="evolution"]::before { background: #25D366; }
.um-chip-origem[data-canal-tipo="evolution"]::before { box-shadow: inset 0 0 0 2px #128C7E; }
.um-chip-origem[data-canal-tipo="sms"]::before { background: #8A93A3; }
/* cabeçalho apertado (conversa < 900, o mesmo corte do R7-4 que aperta os ícones): o chip "via …" some — o miolo de 227 px a 1366 não
   comporta etiqueta + setor + origem + "está vendo"; o badge do avatar (tooltip) e o "Responder por" do compositor continuam dizendo a origem */
@container (max-width: 899px) { .um-cab-chips .um-chip-origem { display: none; } }
/* Detalhes › Origem: badge inline com a cor do tipo + 3 linhas Tipo/Canal/Número (grade própria: o .um-campo do painel tem 76 px) */
.um-painel .um-origem-linha { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 14px; }
.um-app .um-badge-canal-inline[data-canal-tipo="api"], .um-app .um-badge-canal-inline[data-canal-tipo="evolution"] { background: #25D366; }
.um-app .um-badge-canal-inline[data-canal-tipo="evolution"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 3px #128C7E; }
.um-app .um-badge-canal-inline[data-canal-tipo="sms"] { background: #8A93A3; }
.um-painel .um-origem-campo { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; font-size: 14px; line-height: 22px; }
.um-painel .um-origem-campo > b { font-weight: 600; color: var(--um-texto-2); }
.um-painel .um-origem-campo > span { overflow-wrap: anywhere; }
.um-painel .um-origem-tambem { font-size: 12px; color: var(--um-texto-3); }
.um-painel .um-origem-estado { display: block; margin-top: 6px; font-size: 12px; line-height: 18px; }
.um-painel .um-origem-estado--erro { color: #DA606E; font-weight: 600; }
/* compositor: "Responder por: …" à direita do switch — 12 px cinza, uma linha, corta com reticências; o select (2+ canais) mora dentro */
.um-comp-por { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font-size: 12px; line-height: 16px; color: var(--um-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-comp-por > b { font-weight: 600; color: var(--um-texto-2); overflow: hidden; text-overflow: ellipsis; }
.um-comp-por > .um-comp-canal { margin-left: 0; max-width: 260px; }
.um-comp-por--erro, .um-comp-por--erro > b { color: #DA606E; }
.um-comp-por + .um-comp-modos { margin-left: 0; }
.um-compositor--nota .um-comp-por { display: none; }
@container conversa (max-width: 719px) { .um-conversa .um-comp-por { grid-column: 3; justify-self: start; } }
/* filtro Canal: cabeçalho dos grupos Umbler / Chips / SMS na lista do multi; o número do chip em <small> */
.um-multi-grupo { margin: 8px 16px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--um-texto-3); }
.um-multi-grupo:first-child { margin-top: 0; } .um-multi-grupo[hidden] { display: none; }
.um-multi-item small { margin-left: 6px; font-size: 12px; color: var(--um-texto-3); }
/* Números: "N conversas abertas" no cartão do chip — link do padrão da aba (.um-link) em 13 px; sem conversa é só texto */
.um-numero-txt .um-numero-conversas { display: inline-block; margin-top: 2px; font-size: 13px; }
span.um-numero-conversas { color: var(--um-texto-3); }
:root[data-theme="dark"] .um-cab-chips .um-chip-origem { border-color: #4A5366; color: #C9CFDA; }
:root[data-theme="dark"] .um-badge-canal[data-canal-tipo="evolution"], :root[data-theme="dark"] .um-app .um-badge-canal-inline[data-canal-tipo="evolution"] { box-shadow: inset 0 0 0 2px rgba(23, 27, 36, .85), inset 0 0 0 3px #128C7E; }

/* ===== R11-1 ===== */
/* X-10 (auditoria-ui-r11): o prefixo "X reagiu com 👍 a:" da prévia é 400 no Umbler (só a assinatura *Nome:* fica em 700). */
.um-lista .um-previa .um-previa-reacao { font-weight: 400; }
/* X-5: o toggle "Som de notificação" fecha o menu Ordenar depois de um separador (o ⋮ do topo saiu — o Umbler tem 7 controles);
   `um-menu-toggle` ganha o ✓ à direita quando aria-current (era o `.um-menu--lista` do R10-E). */
.um-menu button.um-menu-sep { border-top: 1px solid var(--um-borda); border-radius: 0 0 12px 12px; margin-top: 4px; padding-top: 9px; }
.um-menu button.um-menu-toggle[aria-current="true"]::after { content: '\2713'; margin-left: auto; padding-left: 12px; font-weight: 700; color: var(--um-primary); }

/* ===== R11-3 ===== */
/* Conversa/compositor/painéis (auditoria-ui-r11 §2 X-3/X-4/X-6/X-8/X-11/X-14/X-15/X-16 + W-7/W-15/W-21; capturas r11-umbler-90-vp-1920,
   r10-umbler-29g/29i/34b/34c/34d/18b). Só classes novas ou regras mais específicas por cima dos blocos R10-A/R10-C. */
/* X-3: a bolha da LOCALIZAÇÃO é shrink-to-fit (width:auto) até o max-width da mensagem — o Umbler chega a 557 com endereço longo — e
   nunca menor que 320 (o cartão curto continua 320×263). O mapa (janela) acompanha a bolha; o mosaico de tiles nasce com 560 de largura
   (LOCAL_MAPA_LARGURA) centrado na janela, então o pino fica no centro em qualquer largura. */
.um-balao--cartao:has(.um-cartao-local) { width: auto; max-width: min(70%, 557px); min-width: min(320px, 100%); }
.um-cartao-local-mapa { width: 100%; }
.um-cartao-local-tiles { position: absolute; left: 50%; top: 0; margin-left: -280px; display: block; pointer-events: none; }
.um-cartao-local-end { overflow-wrap: anywhere; }
/* X-6: o avatar do cartão de Contato é a ilustração padrão (a mesma da lista) em 40; a coluna do nome tem ~200 px como no Umbler, o nome
   quebra em 2 linhas e a bolha vai a 370×105; os botões ficam à direita */
.um-cartao-contato .um-avatar--padrao { width: 40px; height: 40px; display: block; flex: none; background: transparent; box-shadow: none; overflow: hidden; border-radius: 50%; }
.um-cartao-contato-meio { max-width: 200px; }
.um-cartao-contato-acoes { margin-left: auto; }
/* X-15: vídeo na proporção natural (preload="metadata" dá as medidas) — largura e altura livres até 320 */
.um-anexo-video { width: auto; height: auto; max-width: 320px; max-height: 320px; }
/* W-15: evento só-HUB (fixar/ocultar/bloquear) — ícone cinza */
.um-mensagens > .um-evento--so-hub > .um-ico { color: var(--um-texto-3); }
/* X-4: card da Biblioteca 140×161 — miniatura 140×99 (vídeo = <video> com o 1º frame, object-fit cover), nome 10.5/22 600 com reticência
   no meio e extensão, meta 10.5; gaps de 8 */
.um-biblioteca-off .um-biblioteca-item { gap: 8px; padding-bottom: 2px; }
.um-biblioteca-off .um-biblioteca-mini { height: 99px; }
.um-biblioteca-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #2B2F3A; }
.um-biblioteca-off .um-biblioteca-nome > b { font-size: 10.5px; line-height: 22px; }
.um-biblioteca-off .um-biblioteca-item > small { font-size: 10.5px; line-height: 22px; margin-top: 0; }
/* W-7/X-14: modal Contato — ilustração 48, "– há N" 700 rgba(34,34,34,.75), linha ≥ 90, ordenar 38.7 r30 2 px, "+" 42 */
.um-contato-modal .um-contato-foto { width: 48px; height: 48px; font-size: 16px; }
.um-contato-modal .um-avatar--padrao.um-contato-foto { display: block; background: transparent; box-shadow: none; overflow: hidden; border-radius: 50%; }
.um-contato-modal .um-contato-ha { font-weight: 700; color: rgba(34, 34, 34, .75); }
.um-contato-modal .um-contato-item { min-height: 90px; padding: 16px 8px; }
.um-contato-modal .um-contato-ordem { width: 39px; height: 39px; border: 2px solid var(--um-borda); border-radius: 30px; }
.um-contato-modal .um-contato-novo { width: 42px; height: 42px; }
/* X-8: modal Localização 800×611 — padding 48 nos lados (mapa 704×180); input r16 0 0 16 + lupa 42 colada r0 16 16 0; "Minha localização"
   170 outline r30; Descrição 14/22 600; rodapé Cancelar texto-só 32 + Enviar 32 */
.um-app .um-localizacao-modal { width: 800px; max-width: calc(100% - 32px); padding: 24px 48px 32px; }
.um-localizacao-modal .um-localizacao-mapa { height: 180px; }
.um-localizacao-modal .um-localizacao-topo { gap: 8px; }
.um-localizacao-modal .um-localizacao-campo-lupa { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.um-app .um-localizacao-modal .um-localizacao-busca { flex: 1 1 auto; min-width: 0; height: 42px; border-radius: 16px 0 0 16px; border-right: 0; box-sizing: border-box; } /* .um-app .um-painel .um-input (r16 nos 4 cantos) tem 3 classes: esta também */
.um-localizacao-modal .um-localizacao-campo-lupa > .um-ico-btn { width: 42px; height: 42px; flex: none; border: 2px solid var(--um-borda); border-left: 0; border-radius: 0 16px 16px 0; color: var(--um-texto-2); }
.um-localizacao-modal .um-localizacao-minha { width: 170px; height: 42px; justify-content: center; box-sizing: border-box; border: 1px solid var(--um-borda); border-radius: 30px; padding: 0 12px; }
.um-localizacao-modal .um-localizacao-descricao > span { font-size: 14px; line-height: 22px; }
.um-localizacao-modal .um-localizacao-descricao > span > b { font-weight: 600; }
.um-localizacao-modal .um-modal-botoes > .um-pilula { height: 32px; padding: 0 16px; font-size: 14px; }
.um-localizacao-modal .um-modal-botoes > .um-pilula--borda { border-color: transparent; }
/* X-11: com o switch DESLIGADO o Umbler não mostra o lápis "Customizar assinatura" (só o switch cinza + "Assinar") */
.um-comp-topo > .um-comp-assinatura:has(.um-assinatura:not(:checked)) + [data-comp="assinatura"] { display: none; }
/* W-21: aba "Enviar template" da massa — texto do Umbler, 14/21 */
.um-massa-modal > .um-secao > .um-massa-template-texto { margin: 0 0 16px; }
:root[data-theme="dark"] .um-app .um-contato-modal .um-contato-ha { color: var(--um-texto-2); }

/* ===== R11-4 ===== */
/* I-3: o chip de etiqueta de CHAT do cabeçalho leva o ícone de chat no mesmo bloco do escopo que o de contato tem (R4-B: 21 px
   colado à esquerda, fundo no acento, traço claro) — só onde o markup pede comIcone (cabeçalho); lista e Detalhes continuam sem. */
.um-etiqueta--chat .um-etiqueta-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: stretch; width: 21px; margin: 0 2px 0 -8px; border-radius: 30px 0 0 30px; }
.um-etiqueta--chat .um-etiqueta-ico .um-ico { display: block; width: 14px; height: 14px; }
/* I-8: sino cortado 14 px ao lado da hora na linha silenciada (o badge de não lidas continua escondido — R10-B). */
.um-lista .um-linha-sino { display: inline-flex; align-items: center; vertical-align: -3px; margin-right: 3px; color: var(--um-texto-3); }
.um-lista .um-linha-sino .um-ico { width: 14px; height: 14px; }
/* I-6: aba "Novo arquivo" da Biblioteca = drop zone dentro do offcanvas (arraste ou clique; Enter/Espaço no foco abre o seletor). */
.um-biblioteca-off .um-biblioteca-lista--novo { display: flex; align-items: stretch; padding: 20px 24px 24px; }
.um-biblioteca-drop { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--um-borda); border-radius: 12px; background: var(--um-bg); color: var(--um-texto-2); cursor: pointer; text-align: center; padding: 24px; box-sizing: border-box; }
.um-biblioteca-drop .um-ico { width: 40px; height: 40px; color: var(--um-primary); margin-bottom: 6px; }
.um-biblioteca-drop b { font-size: 14px; font-weight: 600; color: var(--um-texto); }
.um-biblioteca-drop small { font-size: 12px; }
.um-biblioteca-drop:hover, .um-biblioteca-drop:focus-visible { border-color: var(--um-primary); outline: none; }
.um-biblioteca-drop--sobre { border-color: var(--um-primary); background: var(--um-bg-hover); }
:root[data-theme="dark"] .um-biblioteca-drop { border-color: #4A5366; }

/* ===== R12-B ===== */
/* Y-9/Y-10 (R12-L1): vazio da lista com 16 px de respiro em cima (o `m-3` do Umbler: texto 16 abaixo do topo da lista) e o exemplo
   "Thiago|✓" em mono 14 (era 13); o badge da aba com 0 já some pelo `:empty` (pilulaAba devolve ''). */
/* R12-B: o vazio JÁ nascia a 16 px das abas (passo r8-2-lista-visual mede isso) — a margem extra dobrava para 32; regra retirada. */
.um-lista .um-vazio-ilustra { font-size: 14px; line-height: 21px; padding: 4px 8px; border-radius: 3px; }
/* Y-11 (R12-L2): a linha mostra UM chip + "+N" (42×22, outline #DFDFDF r30, 12 px cinza como o chip do setor) para as demais; o
   chip de CHAT leva o bloco do ícone (21 px, R11-4) também na lista — com ele o chip vai a 86 (65 + 21) para "Repes…" continuar
   legível; o nome trunca em 236 (Umbler: "NATÁLIA ANA FERREIRA BARB…"). */
.um-lista .um-linha .um-etiqueta-mais { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; min-width: 42px; height: 22px; padding: 0 8px; border: 1px solid var(--um-borda); border-radius: 30px; font-size: 12px; line-height: 20px; color: var(--um-texto-3); background: transparent; white-space: nowrap; }
.um-lista .um-linha .um-etiqueta--chat:has(> .um-etiqueta-ico) { max-width: 86px; }
/* R12-B: o 236 medido no Umbler é a largura DELE; aqui a coluna já encolhe o nome com ellipsis e o teto fixo cortava
   "GUSTAVO DE CASTRO PEREIRA" com a lista a 414 (passos responsivo-32-9 e r4-b-lista-coluna-57) — regra retirada. */
/* Y-15 (R12-H1): no hover o botão do cabeçalho só muda o fundo (#FAFAFA) — o ícone fica #5B5B5B; a aba da lista escurece para #1F1F1F. */
.um-app .um-cabecalho .um-ico-btn:hover { color: var(--um-ico); }
.um-lista > .um-abas .um-pilula:not(.um-pilula--ativa):hover { color: #1F1F1F; }
:root[data-theme="dark"] .um-lista > .um-abas .um-pilula:not(.um-pilula--ativa):hover { color: var(--um-texto); }
/* Y-8 (R12-D1): Detalhes › "Quem está vendo" — avatar 36 (img ou iniciais), como o `img.ub-avatar` 36 do Umbler. */
.um-app .um-painel .um-secao--vendo > .um-vendo-avatar { width: 36px; height: 36px; font-size: 13px; border-radius: 50%; object-fit: cover; margin-right: 6px; box-shadow: 0 0 8px rgba(136,136,136,.2); }
/* ===== R12-A ===== */
/* Paineis de acao iguais ao Umbler - auditoria-ui-r12 2 Y-2/Y-3/Y-4/Y-5/Y-6/Y-12/Y-13, 4 R12-P1...P4.
   Medidas do Umbler vivo (capturas ui12-*.png). */

/* R12-P1 (Y-2/Y-3/Y-13) - Transferir: abas 58, opcao 14/600 #212529, ponto online 14, foto do membro, Setor #6689F3 com svg 32. */
.um-app .um-painel-acao:not(.um-painel--modal) > .um-offcanvas-abas > button { height: 58px; box-sizing: border-box; }
.um-app .um-painel .um-painel-rodape .um-motivo { min-height: 89.5px; }
.um-app .um-painel-acao .um-opcao .um-opcao-txt > b { font-size: 14px; font-weight: 600; color: #212529; }
.um-app .um-painel-acao .um-opcao .um-avatar--online::after { top: 0; right: 0; width: 14px; height: 14px; background: #389E0D; border: 3px solid #D9D9D9; box-sizing: border-box; }
.um-app .um-painel-acao .um-opcao .um-avatar--sm .um-ico--buildings { width: 32px; height: 32px; }
.um-app .um-painel-acao .um-opcao .um-avatar--sm:has(> .um-ico--buildings) { background: #6689F3; }
.um-app .um-painel-acao .um-opcao .um-avatar--membro { background: transparent; padding: 0; overflow: hidden; }
.um-app .um-painel-acao .um-opcao .um-avatar--membro > .um-avatar-foto, .um-app .um-painel-acao .um-opcao .um-avatar--membro > .um-avatar--padrao { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.um-app .um-painel-acao .um-opcao .um-avatar--nenhum { background: #D9D9D9; color: #fff; }
/* Y-3: "Criar nota ao transferir" nasce marcado - o check do Umbler e azul CHEIO, sem borda (nao o nativo). */
.um-app .um-painel-acao .um-painel-rodape > label { font-weight: 400; color: #212529; }
.um-app .um-painel-rodape > label > .um-check.um-criar-nota { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #B8B4B4; border-radius: 4px; background: var(--um-superficie); margin: 0; flex: none; cursor: pointer; }
.um-app .um-painel-rodape > label > .um-check.um-criar-nota:checked { border-color: transparent; background: var(--um-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* R12-P2 (Y-4) - Finalizar > Chatbot: robo branco em caixa amarela 36 r8, linha 81 pad 20 24, nome 16/600. */
.um-app .um-painel-acao .um-opcao .um-opcao-ico--bot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: #FFD666; color: #fff; }
.um-app .um-painel-acao .um-opcao .um-opcao-ico--bot .um-ico { width: 24px; height: 24px; }
.um-app .um-painel-acao .um-opcao:has(> .um-opcao-ico--bot) { padding: 20px 24px; min-height: 81px; }
.um-app .um-painel-acao .um-opcao:has(> .um-opcao-ico--bot) > b { font-size: 16px; font-weight: 600; }

/* R12-P3 (Y-5) - modo de selecao: checkbox na MARGEM da coluna (nao colado ao balao), faixa da linha inteira
   (#E2E9FE na selecionada, #FAFAFA nas outras) pintada pelo ::after do balao - que sangra 100cqw para cada lado
   e e recortado pelo overflow-x da coluna, porque o balao enviado nao comeca na margem esquerda. Rodape 70/16. */
.um-app .um-conversa--selecao > .um-mensagens { container-type: inline-size; padding-left: calc(56px + var(--um-margem-conteudo)); --um-col-dir: 52px; }
.um-app .um-conversa--selecao .um-mensagens > .um-balao--selecionada { outline: none; }
.um-app .um-conversa--selecao .um-mensagens > .um-balao[data-msg]::before { left: -36px; right: auto; }
.um-app .um-conversa--selecao .um-mensagens > .um-balao--out[data-msg]::before, .um-app .um-conversa--selecao .um-mensagens > .um-balao--nota[data-msg]::before { left: calc(100% - 100cqw + var(--um-col-dir) - 36px); right: auto; }
.um-app .um-selecao-barra { height: 70px; padding: 16px; border-top-color: #D9D9D9; }
.um-app .um-selecao-barra > .um-ico-btn { width: 42px; height: 42px; color: #6F7380; }
.um-app .um-selecao-barra > .um-selecao-fab { border-radius: 30px; box-shadow: none; }
.um-app .um-selecao-barra > .um-selecao-fab .um-ico { width: 14px; height: 14px; }

/* R12-P3 (Y-6) - modal "Encaminhar para": badge do canal por tipo, linha 81, nome 14/600 rgba(34,34,34,.75). */
.um-app .um-encaminhar-modal > .um-encaminhar-passo { margin: 0; padding: 8px 24px; }
.um-app .um-encaminhar-modal > .um-encaminhar-passo > b { font-size: 14px; font-weight: 600; }
.um-app .um-encaminhar-modal .um-encaminhar-canal { padding: 16px 24px; min-height: 81px; border-bottom: 1px solid #D9D9D9; }
.um-app .um-encaminhar-modal .um-encaminhar-canal .um-badge-canal-inline[data-canal-tipo="broker"] { background: #7662FA; }
.um-app .um-encaminhar-modal .um-encaminhar-canal .um-opcao-txt > b { font-size: 14px; font-weight: 600; color: rgba(34,34,34,.75); }
.um-app .um-encaminhar-modal .um-pilula-estado.um-online { color: #389E0D; background: #D9F7BE; border-color: #D9F7BE; }
.um-app .um-encaminhar-modal .um-pilula-estado.um-offline { color: #AF2B28; background: #FFCDCD; border-color: #FFCDCD; }

/* R12-P4 (Y-12) - Agendar > Mensagem: check custom 20 r4 com passo 40, "Anexar arquivo" 14/700, botoes 32 r30,
   alerta Atencao em 2 colunas (icone absoluto + "Atencao!" | texto). */
.um-app .um-painel-acao .um-check-linha { min-height: 40px; font-size: 16px; line-height: 24px; color: #212529; gap: 12px; }
.um-app .um-painel-acao .um-check-linha > .um-check { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #B8B4B4; border-radius: 4px; background: var(--um-superficie); margin: 0; flex: none; cursor: pointer; }
.um-app .um-painel-acao .um-check-linha > .um-check:checked { border-color: transparent; background: var(--um-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.um-app .um-painel-acao .um-agendar-anexar > b { font-size: 14px; font-weight: 700; }
.um-app .um-painel-acao .um-agendar-anexar-botoes > .um-pilula { height: 32px; padding: 3px 12px; border: 2px solid rgba(0,0,0,.15); border-radius: 30px; font-size: 14px; color: #31343B; box-sizing: border-box; }
.um-app .um-painel-acao .um-alerta--aviso { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; align-content: center; min-height: 79px; box-sizing: border-box; }
.um-app .um-painel .um-secao > .um-switch-linha.um-agendar-assinar-wrap { font-size: 14px; font-weight: 600; }
:root[data-theme="dark"] .um-app .um-painel-acao .um-opcao .um-opcao-txt > b, :root[data-theme="dark"] .um-app .um-painel-acao .um-check-linha, :root[data-theme="dark"] .um-app .um-painel-acao .um-painel-rodape > label { color: var(--um-texto); }
:root[data-theme="dark"] .um-app .um-encaminhar-modal .um-encaminhar-canal .um-opcao-txt > b { color: var(--um-texto); }
/* ===== R12-E ===== */
/* auditoria-funcional-r12 J-5: nenhuma etiqueta se perde no cabeçalho — passou de 2, vira "+N" (42×22, outline, r30) com o
   tooltip listando as demais. Mesma altura dos chips ao lado, para a faixa não crescer. */
.um-cab-chips .um-chip-mais { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 22px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--um-borda); border-radius: 30px; background: transparent; font-size: 12px; font-weight: 600; color: var(--um-texto-3); cursor: default; }
.um-cab-chips .um-chip-mais:hover { border-color: var(--um-primary); color: var(--um-primary); }
:root[data-theme="dark"] .um-cab-chips .um-chip-mais { border-color: #4A5366; color: #C9CFDA; }
/* J-10: figurinha (message_type='Sticker', image/webp) não é imagem — o Umbler mostra 160 px SEM moldura, sem sombra e sem fundo;
   só a hora fica por baixo. O balão perde o cartão inteiro (padding/sombra/fundo) quando não há legenda. */
.um-figurinha { display: block; width: 160px; height: 160px; max-width: 100%; object-fit: contain; background: transparent; }
.um-balao--figurinha { background: transparent; box-shadow: none; padding: 0; border: 0; }
.um-balao--figurinha .um-hora { padding: 0 2px; }

/* ===== R13-A — balões × Umbler VIVO (auditoria-ui-r13 §2.1 e §4, 21/09/2026) =====
   Z-1 hora 12 px · Z-2 balão sem o teto de 70% · Z-5 line-height 21 · Z-9 caixa em grid com gap 8 · Z-6 cor da nota ·
   Z-3 miniatura da imagem sem legenda · Z-11 vídeo · Z-12 áudio · R13-S1 o WRAPPER de linha da seleção.
   R13-S1 é o único item "DIFERENTE" da conferência da r12: a faixa #E2E9FE não existia em produção porque o balão era
   filho DIRETO de `.um-mensagens` e a tentativa do bloco R12-A (`.um-balao::after` com `z-index:-1` e `100cqw`) ficava
   atrás do fundo da coluna. Com `.um-linha-msg` a faixa é o fundo da própria linha. As regras `.um-mensagens > .um-balao…`
   do R12-A e as de grade do bloco da área B deixam de casar (o balão não é mais filho direto) e ficam inertes — o que
   valia nelas está refeito aqui. */

/* --- R13-A (R13-S1): a linha da mensagem ------------------------------------------------------------------ */
/* `.um-linha-msg` toma o lugar do balão na grade da coluna e refaz DENTRO dela as mesmas duas colunas
   (conteúdo | avatar 40) — a geometria do balão e o par `.um-balao + .um-balao-autor` do E2E não mudam.
   A 2ª coluna de `.um-mensagens`/`.um-conv-contato-corpo` fica vazia: some (e o column-gap junto) para a linha
   ocupar a largura inteira que o balão ocupava antes. */
.um-mensagens, .um-conv-contato-corpo { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.um-mensagens > .um-linha-msg, .um-conv-contato-corpo > .um-linha-msg { grid-column: 1 / -1; min-width: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 12px; align-items: start; }
.um-linha-msg > * { min-width: 0; }
.um-linha-msg > .um-balao--in { grid-column: 1 / -1; justify-self: start; }
.um-linha-msg > .um-balao--out, .um-linha-msg > .um-balao--nota { grid-column: 1; justify-self: end; }
.um-linha-msg > .um-balao--out.um-balao--apagada, .um-linha-msg > .um-balao--nota.um-balao--apagada { grid-column: 1 / -1; }
.um-linha-msg > .um-balao-autor { grid-column: 2; align-self: start; justify-self: start; width: 40px; height: 40px; font-size: 14px; object-fit: cover; }
.um-linha-msg > .um-balao-autor--vazio { height: 0; min-height: 0; visibility: hidden; }
.um-conv-contato-corpo .um-linha-msg > .um-balao { max-width: 75%; }

/* --- R13-A (R13-S1): a faixa do modo de seleção ------------------------------------------------------------ */
/* Umbler: a linha SELECIONADA é #E2E9FE de borda a borda da coluna (534→1416) e as demais #FAFAFA; o balão fica com o
   fundo normal e SEM outline. A linha sangra pelas margens negativas (e devolve o mesmo valor em padding), então nada
   se move: só o fundo passa a alcançar as bordas. Em cima/embaixo 4 px cobrem o row-gap de 8 e as faixas se tocam. */
/* R13-A (correção do controlador): `--um-margem-conteudo` é `calc((100% - 1200px)/2)` — a porcentagem resolve no elemento que a USA.
   Dentro da linha ela dava 0 (a linha já vive na caixa de conteúdo), e a faixa parava na margem em telas largas (1920: 680–1880 numa
   coluna de 569–1990). Em modo seleção a coluna fica SEM padding lateral e quem paga o recuo é a própria linha: aí a faixa nasce da
   borda esquerda à direita da coluna em qualquer largura, e a porcentagem volta a medir a coluna inteira. */
.um-app .um-conversa--selecao > .um-mensagens { padding-left: 0; padding-right: 0; }
.um-app .um-conversa--selecao .um-mensagens > .um-linha-msg { background: #FAFAFA; margin: -4px 0; padding: 4px calc(24px + var(--um-margem-conteudo, 0px)) 4px calc(56px + var(--um-margem-conteudo, 0px)); }
.um-app .um-conversa--selecao .um-mensagens > .um-linha-msg:has(> .um-balao--selecionada) { background: #E2E9FE; }
.um-app .um-conversa--selecao .um-mensagens > .um-balao--selecionada { outline: none; }
/* o checkbox (20 r4 borda 2 #B8B4B4) agora ancora no wrapper: fica na MARGEM esquerda da coluna para recebida e enviada,
   como no Umbler (lá o `left` do balão enviado era -301 px). */
.um-app .um-conversa--selecao .um-mensagens > .um-linha-msg::before { content: ''; position: absolute; left: calc(20px + var(--um-margem-conteudo, 0px)); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #B8B4B4; border-radius: 4px; background: var(--um-superficie); box-sizing: border-box; }
.um-app .um-conversa--selecao .um-mensagens > .um-linha-msg:has(> .um-balao--selecionada)::before { border-color: var(--um-primary); background: var(--um-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.um-app .um-conversa--selecao .um-mensagens > .um-linha-msg:has(> .um-balao--nao-selecionavel) { opacity: .45; }
.um-app .um-conversa--selecao .um-mensagens > .um-linha-msg:has(> .um-balao--nao-selecionavel)::before { display: none; }
.um-app .um-conversa--selecao .um-balao--nao-selecionavel { cursor: not-allowed; }
:root[data-theme="dark"] .um-app .um-conversa--selecao .um-mensagens > .um-linha-msg { background: var(--um-bg-hover); }
:root[data-theme="dark"] .um-app .um-conversa--selecao .um-mensagens > .um-linha-msg:has(> .um-balao--selecionada) { background: #223055; }

/* --- R13-A: o chassi do balão ------------------------------------------------------------------------------ */
/* Z-9: o Umbler usa `display:grid; gap:8px` — aqui era `flow-root` (gap inerte de 6) com a hora flutuando no fim do
   texto. Em grid a hora ganha a própria linha, alinhada à direita, como nas capturas `ui13-umbler-baloes-1440.png`.
   As margens de 6/8/10 px dos filhos saem: quem espaça agora é o gap. A APAGADA fica em flow-root (o Umbler a mantém
   numa linha só, 267,5×41). */
.um-app .um-balao { display: grid; gap: 8px; }
.um-app .um-balao--apagada { display: flow-root; }
.um-app .um-balao--figurinha { gap: 2px; }
.um-app .um-balao > .um-nota-rotulo, .um-app .um-balao > .um-encaminhada, .um-app .um-balao > .um-citacao, .um-app .um-balao > .um-botao, .um-app .um-balao > .um-anexo, .um-app .um-balao > .um-anexo-img, .um-app .um-balao > .um-anexo-video, .um-app .um-balao > audio, .um-app .um-balao > .um-transcricao, .um-app .um-balao > .um-balao-editar, .um-app .um-balao > .um-figurinha { margin: 0; }
.um-app .um-balao:not(.um-balao--apagada) > .um-hora { float: none; margin: 0; justify-self: end; }
/* Z-1: a hora do balão é `fs-xs` 12/18 no Umbler — aqui estava 8,75/13,1 (um cochicho). Cor #6F7380 e ✓✓ 14 ficam. */
.um-app .um-balao > .um-hora { font-size: 12px; line-height: 18px; }
/* Z-2: o Umbler não põe teto no balão (`max-width:none`; chega a 612 na coluna de 966). 70% quebrava a frase muito
   antes. Cartão de contato/localização e figurinha ficam com os tetos próprios (R10-A/R11-3/R12-E). */
.um-app .um-balao:not(.um-balao--cartao):not(.um-balao--figurinha) { max-width: min(100%, 612px); }
/* Z-5: line-height 21 (estava 22 — 6 px acumulados por balão de 6 linhas). */
.um-app .um-balao { line-height: 21px; }
.um-app .um-balao .um-balao-texto { line-height: 21px; }
/* Z-6: o texto da nota interna do Umbler é rgb(166,136,46) (o nosso #8A6D00 é mais escuro); o fundo #FFFAEB fica. */
.um-app .um-balao--nota { color: rgb(166, 136, 46); }
:root[data-theme="dark"] .um-app .um-balao--nota { color: var(--um-nota-texto); }

/* --- R13-A: mídia (R13-M1 Z-3 · R13-B5 Z-11 · R13-M2 Z-12) ------------------------------------------------- */
/* Z-3: imagem SEM legenda é uma MINIATURA 48×48 r6,4 `cover` no Umbler (`chat-bubble-visual chat-bubble-nocaption`,
   balão 68×90) — nós abríamos a imagem no tamanho do anexo. Com legenda continua 320×270. */
.um-app .um-balao--visual-sem-legenda > .um-anexo-img { width: 48px; max-width: 48px; }
.um-app .um-balao--visual-sem-legenda > .um-anexo-img img { width: 48px; height: 48px; max-width: 48px; max-height: 48px; border-radius: 6.4px; object-fit: cover; }
/* Z-11: o vídeo do Umbler é 264×270 r6,4 num balão 284×320 — o nosso balão tinha 368 de altura. */
.um-app .um-balao > .um-anexo-video { width: 264px; height: 270px; max-width: 100%; max-height: none; border-radius: 6.4px; }
/* Z-12: o balão de áudio do Umbler é 437,5×90 e o avatar do autor ao lado cai de 40 para 32 (só nesse tipo).
   O botão "Transcrever" é nosso e fica (decisão da r12). */
.um-app .um-balao--audio > audio { width: 417.5px; max-width: 100%; height: 44px; }
.um-app .um-linha-msg > .um-balao--audio + .um-balao-autor { width: 32px; height: 32px; font-size: 12px; }
/* ===== R13-B ===== */
/* auditoria-ui-r13 §4 — os "QUASE" da conferência da r12 que moram nos painéis, no compositor e no Detalhes. Os números do
   Umbler vêm de scratchpad/ui-r13/umbler-medidas*.json (1440×900, tema claro). */

/* R13-P1 (Z/Y-4): Finalizar › Chatbot e Executar chatbot — no Umbler a busca e o "+" são UMA peça: caixa 330×42 com o raio só
   à esquerda (16 0 0 16) e o botão azul 42 colado à direita (0 16 16 0). Aqui eram 404×42 com raio nos 4 cantos, gap 8 e um "+"
   redondo de 40. (O glifo do robô 36/24 e a linha 81/pad 20 24 já estavam certos: os "15 px" da auditoria eram o font-size do
   invólucro, não o ícone.) */
.um-app .um-painel-acao > .um-chatbot-busca { gap: 0; }
.um-app .um-chatbot-busca .um-busca { flex: 0 1 330px; height: 42px; border-radius: 16px 0 0 16px; border-right-width: 0; }
.um-app .um-chatbot-busca .um-chatbot-novo { width: 42px; height: 42px; border-radius: 0 16px 16px 0; }
.um-app .um-chatbot-busca .um-chatbot-novo .um-ico { width: 20px; height: 20px; }

/* R13-P3 (Z-10): a linha do Transferir (Setor/Atendente/Canal) tem `padding: 16px 24px` no Umbler; aqui era `0 24px` e a altura
   81 só vinha do `min-height` — com nome em 2 linhas o encaixe saía diferente. Não vale para a linha do Chatbot (20 24, regra
   própria acima no arquivo) nem para a de etiqueta (56). */
.um-app .um-painel-acao .um-painel-lista > .um-opcao:not(:has(> .um-opcao-ico--bot)):not(:has(> .um-etiqueta)) { padding: 16px 24px; }

/* R13-P2 (Z/Y-6): a linha do modal "Escolha o canal" mediu 85 em produção (nomes de canal longos empurravam a 2ª linha do
   `.um-opcao-txt`) contra 81 do Umbler. A altura passa a ser FIRME em 81 e o nome trunca com ellipsis — assim a altura do modal
   (que é `height: auto`) acompanha a do Umbler em vez de crescer com o texto. */
.um-app .um-encaminhar-modal .um-encaminhar-canal { height: 81px; min-height: 81px; }
.um-app .um-encaminhar-modal .um-encaminhar-canal .um-opcao-txt { min-width: 0; }
.um-app .um-encaminhar-modal .um-encaminhar-canal .um-opcao-txt > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-app .um-encaminhar-modal .um-encaminhar-canal .um-opcao-txt > small:last-child { overflow: hidden; text-overflow: ellipsis; }

/* R13-D1 (Z/Y-8): "Quem está vendo" sem foto usa a ilustração `default-user` (avatarPadraoHtml) no lugar das iniciais —
   a silhueta é um <svg> e não pode herdar o fundo azul nem a sombra do círculo de iniciais. */
.um-app .um-painel .um-secao--vendo > .um-avatar--padrao.um-vendo-avatar { display: inline-block; background: transparent; box-shadow: none; overflow: hidden; }

/* R13-C1 (Z-4/Z-24/Z-25): o campo do compositor cresce até 270 px no Umbler (aqui parava em 196: com um parágrafo longo quem
   escreve perdia o começo de vista) e repousa em 72 com `rows="1"` (aqui 73,5 com `rows="2"`). */
.um-app .um-compositor .um-comp-texto { min-height: 72px; max-height: 270px; }

/* R13-C3 (Z-26/Z-27): cor do texto digitado e do placeholder, ao pé da letra do Umbler. */
.um-app .um-compositor .um-comp-texto { color: #212529; }
.um-app .um-compositor .um-comp-texto::placeholder { color: #B1B6C7; }

/* R13-C2 (Z-31, decisão): a linha "Responder por: …" é NOSSA (R11-0) e o dono exige que o compositor diga por onde responde —
   então ela fica. O que muda é quem cede espaço: a pílula da assinatura parava de encolher só depois de virar "Test…" porque
   assinatura e origem eram as duas flexíveis. Agora o NOME não encolhe (até 220 px, o bastante para "Gustavo de Castro Pereira")
   e a ORIGEM é a que trunca — ela já carrega o texto inteiro no `title`/`data-tip`, o nome da assinatura não tem onde aparecer. */
.um-app .um-comp-topo > .um-comp-assinatura { flex: 0 0 auto; min-width: 0; }
.um-app .um-comp-topo > .um-comp-assinatura > b { max-width: 220px; }
.um-app .um-comp-topo > .um-comp-por { flex: 0 1 auto; min-width: 0; }
/* ===== R13-C ===== */
/* K-9 (auditoria-funcional-r13 §2; era o J-3 da r12, que o R12-D deu por fechado). O `<` do cabeçalho da conversa
   (conversa.js e chat-interno.js, `data-cab="recolher"`) sempre fez só uma coisa: ligar a classe `um-app--lista-recolhida`
   no #umApp. **Nunca existiu regra de CSS para ela** — `git log -S um-app--lista-recolhida` só acha os dois toggles em JS,
   nenhum commit de CSS. Ou seja: não era o `--um-lista-w` arrastado (estilo inline em .um-app) vencendo uma media query,
   como a hipótese anotada na r12 supunha; não havia o que vencer, o botão era no-op em TODA largura, não só em 1024.
   A regra abaixo mexe na FAIXA DA GRADE, não na variável, então o px salvo em `um.listaW` não a alcança: com e sem largura
   salva a lista vai a 0. Escopo:
   (a) ≥ 901px — abaixo disso a grade já é de 3 colunas e a lista some sozinha por `.um-app--aberta .um-lista` (linha 136);
   (b) só com `.um-app--aberta` — o `<` mora no cabeçalho da conversa, então sem conversa aberta o recolher esconderia a
       lista sem deixar botão nenhum para desfazer (index.js tira a classe no `conversa:fechar` pelo mesmo motivo).
   Especificidade 0,2,0 (duas classes no mesmo elemento) para vencer o `.um-app--filtros` (0,1,0) da ÁREA R/R3-6 com o
   painel de Filtros aberto; e este bloco é o último do arquivo, então também vence por ordem. */
@media (min-width: 901px) { .um-app.um-app--aberta.um-app--lista-recolhida { grid-template-columns: 60px auto 0px 1fr; } .um-app.um-app--aberta.um-app--lista-recolhida > .um-lista { display: none; } }

/* K-3 (auditoria-funcional-r13 §2): durante a BUSCA o Umbler escreve o número do MESMO termo nas três pílulas — conferido
   na API dele em 21/09, só GET `Behavior=CountOnly` por `Type` com o mesmo `Searchtext` (r13-R13-C-report.md §K-3):
   "gustavo" = 7 / 0 / 32 e "júlia" = 64 / 1 / 24. Aqui o número das três JÁ vinha certo do servidor (`mode=lista` devolve
   `contadores` sem a aba — R8-1) e `pintarContadores` já escrevia os três; quem escondia era o CSS da ÁREA A
   (`.um-pilula:not(.um-pilula--ativa) .um-aba-n { display: none }`, linha 164), que é a regra do REPOUSO no Umbler.
   Com busca digitada, `#umAbas` ganha `um-abas--busca` (lista.js) e as inativas mostram o mesmo badge da ativa (V-18).
   Y-9 continua valendo: `pilulaAba` devolve '' com zero e o `:empty` esconde o badge, então "Esperando" segue sem número. */
.um-abas--busca .um-pilula:not(.um-pilula--ativa) .um-aba-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px; background: var(--um-primary); color: #fff; font-size: 10px; font-weight: 500; line-height: 22px; opacity: 1; margin-left: 4px; }
.um-abas--busca .um-pilula:not(.um-pilula--ativa) .um-aba-n:empty { display: none; }

/* K-4 (auditoria-funcional-r13 §2): a lista segurava o resultado do termo ANTERIOR por ~1,6 s (debounce de 300 ms + consulta) e
   chegou a enganar o auditor, que leu a lista errada como se fosse a do termo novo. Enquanto a consulta do termo novo não chega,
   `.um-lista` ganha `um-lista--buscando` (lista.js, no `input` — não quando a consulta sai) e a lista velha dá lugar ao ESQUELETO
   da casca (R6-3), que já existe dentro de #umLista. Trocar por CSS (e não esvaziando #umLinhas) preserva as linhas, o scroll e o
   IntersectionObserver da paginação: quando a resposta chega, tirar a classe basta. A 2ª regra vence a da ÁREA D
   (`#umLinhas:not(:empty) ~ .um-linhas--esqueleto { display: none }`), que só quer esconder o esqueleto com a lista JÁ pintada. */
.um-lista--buscando > #umLinhas { display: none; }
.um-lista--buscando > #umLinhas ~ .um-linhas--esqueleto { display: block; }

/* ===== R13-D =====
   K-2: com menos de 2 caracteres a barra da busca na conversa mostra o aviso no lugar de "1 de 446" (e nenhum <mark>).
   O aviso é mais largo que "1 de N": min-width maior e tom apagado, para não empurrar o "Ver tudo" a cada letra. */
.um-app .um-busca-nav--curta .um-busca-pos { min-width: 104px; color: var(--um-texto-2); }
.um-app .um-busca-nav--curta .um-busca-tudo[disabled] { opacity: .35; cursor: default; }
.um-app .um-busca-nav--curta .um-busca-tudo[disabled]:hover { background: transparent; }

/* ===== R14-A =====
   Painel "Detalhes do contato" medido lado a lado com o Umbler (auditoria-ui-r14 §2.3 e §4 T14-B, 21/09/2026).
   Só CSS: o HTML de painel-direito.js já é o certo (os testes de string e o E2E travam cada seletor) e "Bloquear contato"
   JÁ existe e JÁ funciona (R2-6 + R8-12: mesma porta `contato-bloquear`, audit, toast com Desfazer = "Desbloquear", e o
   botão vira "Desbloquear contato" quando `fichaContato` devolve `bloqueado`) — o auditor não rolou até o fim do painel.
   O que faltava era a ANATOMIA: pílula 76 onde o Umbler tem linha de texto, linha de 88 onde ele tem botão 451×40, abas
   de 50 onde ele tem 58, lápis 28 onde ele tem 42, e os pesos/cores das etiquetas e dos valores. */

/* R14-A (W14-6): o offcanvas do Umbler cobre a JANELA (y 0, h 900); o nosso nascia colado na moldura da aba (y 79,5, h 819).
   `fixed` só no painel direito (#umPainel = Contato/Detalhes/sub-painéis); #umPaineisAcao e os modais ficam como estavam.
   O z-index NÃO sobe: o toast do Desfazer é `fixed` com z-index 50 e precisa continuar POR CIMA do painel (é onde mora o
   "Desbloquear" do Bloquear contato); um painel estático no fluxo já paira sobre a topbar do Terminal, que não é posicionada. */
.um-app #umPainel > .um-painel { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; }
.um-app #umPainel > .um-painel-fundo { position: fixed; }

/* R14-A (W14-4): abas "Contato | Detalhes da conversa" 58 de altura com padding 16 0 e canto 12 12 0 0 (nav-link do Umbler);
   ícone 16 (era svg 18). As larguras já batem (nosso 90,4/184,8 × Umbler 88,8/186,8). */
.um-app .um-painel .um-offcanvas-abas button { height: 58px; padding: 16px 0; box-sizing: border-box; border-radius: 12px 12px 0 0; }
.um-app .um-painel .um-offcanvas-abas button .um-ico { width: 16px; height: 16px; }

/* R14-A (W14-5): "Observações do contato" e "Logs de atividade do contato" são LINHA DE TEXTO 14/21 600 rgb(33,37,41) no
   Umbler — não a pílula de 76 px com o círculo azul de 36. O círculo sai (display:none), o chevron encolhe e continua sendo
   a afordância de que a linha abre um sub-painel (o clique e o data-sub não mudam). */
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="observacoes"],
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="logs"] { min-height: 0; height: 53px; padding: 16px 24px; gap: 8px; font-size: 14px; line-height: 21px; }
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="observacoes"] > .um-ico:first-child,
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="logs"] > .um-ico:first-child { display: none; }
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="observacoes"] > b,
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="logs"] > b { font-size: 14px; line-height: 21px; font-weight: 600; color: #212529; }
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="observacoes"] > .um-ico:last-child,
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="logs"] > .um-ico:last-child { width: 14px; height: 14px; }

/* R14-A (W14-5b): "Ver mais campos" é BOTÃO 451×40 r30 pad 7,04/16 16/22 com a seta para baixo — não a linha de 499×88 com
   círculo de 36. Mantém a classe (`.um-ver-mais`, `[data-ver-mais]`) e a regra antiga de 88 px continua no arquivo (o teste
   conversas-umbler-front-paineis-r3 lê o texto do CSS): aqui só vence por especificidade. 500 − 2×24 = 452 de largura. */
.um-app .um-painel > .um-painel-corpo > .um-linha-link.um-ver-mais { width: calc(100% - 48px); margin: 8px 24px 16px; min-height: 0; height: 40px; box-sizing: border-box; padding: 7.04px 16px; gap: 8px; justify-content: center; border: 1px solid rgba(0,0,0,.15); border-radius: 30px; font-size: 16px; line-height: 22px; color: #31343B; }
.um-app .um-painel > .um-painel-corpo > .um-linha-link.um-ver-mais > .um-ico:first-child { display: none; }
.um-app .um-painel > .um-painel-corpo > .um-linha-link.um-ver-mais > b { flex: 0 1 auto; font-size: 16px; line-height: 22px; font-weight: 400; }
.um-app .um-painel > .um-painel-corpo > .um-linha-link.um-ver-mais > .um-ico:last-child { width: 16px; height: 16px; }

/* R14-A (W14-3): "Bloquear contato"/"Excluir contato" com a anatomia do Umbler — 451×40 r30, padding 7,04/16, 16/22,
   rgb(49,52,59) no secundário e rgb(218,96,110) no perigo (a borda #DA606E já era), glifo 16. */
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula { height: 40px; padding: 7.04px 16px; box-sizing: border-box; border-radius: 30px; font-size: 16px; line-height: 22px; gap: 8px; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula .um-ico { width: 16px; height: 16px; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula--borda { border: 1px solid rgba(0,0,0,.15); color: #31343B; }
.um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula--perigo { color: #DA606E; }
:root[data-theme="dark"] .um-app .um-painel > .um-painel-corpo > .um-painel-rodape--contato > .um-pilula--borda { border-color: var(--um-borda); color: var(--um-texto); }

/* R14-A (W14-8): lápis "Editar nome" 42×42 r30 padding 12 com glifo 14 (era 28×28 com svg 20); X de fechar com glifo 14. */
.um-app .um-painel-cab-txt .um-nome .um-ico-btn { width: 42px; height: 42px; padding: 12px; box-sizing: border-box; border-radius: 30px; }
.um-app .um-painel-cab-txt .um-nome .um-ico-btn .um-ico { width: 14px; height: 14px; }
.um-app .um-painel > .um-offcanvas-cab > .um-ico-btn[data-painel="fechar"] .um-ico { width: 14px; height: 14px; }

/* R14-A (W14-7c / W14-8b): LID sob o nome 14/21 rgba(34,34,34,.75) (era 13/19,5 cinza-2); telefone com line-height 19,2. */
.um-app .um-painel-cab-txt > small.um-texto-2 { font-size: 14px; line-height: 21px; color: rgba(34,34,34,.75); }
:root[data-theme="dark"] .um-app .um-painel-cab-txt > small.um-texto-2 { color: var(--um-texto-2); }
.um-app .um-painel-fone { line-height: 19.2px; }

/* R14-A (W14-7 / W14-7b): rótulo de seção ("Etiquetas do contato") 700 rgb(91,91,91) como os demais <b> do painel, e o VALOR
   dos campos em rgb(91,91,91) (era rgb(31,31,31), mais escuro que o do Umbler). No escuro o valor volta ao texto legível. */
.um-app .um-painel > .um-painel-corpo > .um-secao > h4 { font-weight: 700; color: #5B5B5B; }
.um-app .um-painel .um-campo > span { color: #5B5B5B; }
:root[data-theme="dark"] .um-app .um-painel > .um-painel-corpo > .um-secao > h4, :root[data-theme="dark"] .um-app .um-painel .um-campo > span { color: var(--um-texto); }

/* R14-A (miudeza do T14-B item 8): "Adicionar" dos campos vazios 98,9 de largura (era 94,9) e line-height 22 (era 21). */
.um-app .um-painel .um-campo > .um-link { min-width: 98.9px; box-sizing: border-box; justify-content: center; line-height: 22px; }

/* R14-A (o que sobrou do T14-A, que era falso positivo): o visualizador JÁ existe (`abrirVisor` em conversa.js) e a barra JÁ
   está no pixel do Umbler — camada rgba(6,7,10,.92), 7 alvos 32×32 r50% com glifo 17 e a pílula "100%" 38×32 r12 pad 0 6 de
   11 px (bloco R12-A). O único desvio medido era a POSIÇÃO da barra: o Umbler começa em y 16 e termina em x 1418 a 1440
   (margem 22); a nossa começava em y 12 e terminava em 1424 (margem 16). O vão dos 7 alvos (288 px) já era idêntico. */
.um-visor > .um-visor-barra { padding: 16px 22px; }

/* ===== R15-A =====
   Rodada 15 (auditoria-ui-r15 §2 V15-1…V15-13 e §4 T15-A…T15-F, 21/09/2026), medida contra o Umbler ao vivo a 1440×900.
   Só CSS: o HTML dos painéis já é o certo (os testes de string e o E2E travam cada seletor). O que a r15 achou de novo foi
   ANATOMIA e ENTRELINHA — a varredura de tipografia provou que família, tamanho e peso batem em 100% dos nós medidos nas 3
   telas novas; o que difere é line-height, cor e caixa. */

/* R15-A (V15-1): os painéis de AÇÃO (Agendar, Transferir, Finalizar, Encaminhar, Etiqueta, Reações…) abrem na MESMA caixa do
   painel de Contato — `fixed`, y 0, altura da janela. O R14-A (W14-6) fez isso só para `#umPainel` e dentro do nosso próprio
   app ficaram dois painéis irmãos em alturas diferentes: Contato em y 0 / h 900 e Agendar em y 80 / h 819.
   QUAL É O CERTO, e por quê: o y 80 não é desenho, é resíduo — `.um-painel` é `absolute` dentro de `.um-app`, que começa
   abaixo da topbar do Terminal (`height: calc(100vh - var(--um-topo))`). O offcanvas do Umbler cobre a JANELA (backdrop
   1440×900, abas do Agendar em y 146); um painel de ação é uma camada modal, não um pedaço da moldura da aba — e, fosse qual
   fosse o gosto, dois painéis irmãos não podem abrir em alturas diferentes. Fica o do R14-A: a janela inteira.
   ESCOPO em `#umPaineisAcao` de propósito (e não em `.um-painel-acao` solto): os offcanvas do compositor (Biblioteca, Contato,
   Localização) são `.um-painel-acao` mas vivem DENTRO de `.um-conversa`, que é `container-type: inline-size` — containment de
   layout faz dela o bloco-contêiner de descendentes `fixed`, então `fixed` ali ancoraria na coluna da conversa, não na janela.
   `:not(.um-painel--modal)` porque o "Nova conversa" também mora em `#umPaineisAcao` e é modal centralizado (left/top 50%).
   O z-index NÃO sobe (decisão do R14-A): o toast do Desfazer é `fixed` com z-index 50 e precisa continuar por cima.
   Conferido em 900 e em 1034 de altura: y 0, h = innerHeight, rodapé do painel dentro da tela e `.um-painel-lista` rolando. */
.um-app #umPaineisAcao > .um-painel.um-painel-acao:not(.um-painel--modal) { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; }
.um-app #umPaineisAcao > .um-painel-fundo { position: fixed; }

/* R15-A (V15-2): as 3 abas do Agendar. Umbler: "Agendar" 171,2×58 @965,146 · "Agendadas (0)" 215,8×58 @1168,146 ·
   "Concluídas (0)" 419,0×58 @965,203 — ou seja, faixa de 419 de largura (x 965 → 1384), vão de 32 entre as duas primeiras e a
   TERCEIRA QUEBRA para a segunda linha, ocupando a faixa toda. Nosso: 90/133/131 numa linha só, vão 28.
   A receita que reproduz os três números: faixa de 419 (padding 0 57px 0 24px sobre os 500 do painel), `column-gap: 32px`,
   `flex-wrap: wrap` (já vinha do bloco R7-2) e botões `flex: 1 1 auto` com padding horizontal generoso — aí as duas da 1ª linha
   crescem para preencher os 419−32 = 387 (dá 173,5 e 213,5 contra 171,2 e 215,8) e a 3ª, sozinha na 2ª linha, estica para 419.
   A altura 58 e o `r 12px 12px 0 0` já vinham certos do R14-A/R12-B; o padding vertical continua 16.
   Só o painel Agendar: Transferir, Finalizar e Reações NÃO foram medidos contra o Umbler nesta rodada — quando forem, é só
   trocar o `:has()` pelo seletor do grupo. */
.um-app #umPaineisAcao > .um-painel-acao > .um-offcanvas-abas:has(> [data-aba-painel="agendar"]) { column-gap: 32px; row-gap: 0; padding: 0 57px 0 24px; }
.um-app #umPaineisAcao > .um-painel-acao > .um-offcanvas-abas:has(> [data-aba-painel="agendar"]) > button { flex: 1 1 auto; justify-content: center; padding: 16px 24px; }

/* R15-A (V15-3): a linha de campo VAZIO do Detalhes ("Telefone fixo / E-mail / Gênero / Endereço" com o "Adicionar") mede
   81,0 no nosso e 76 no Umbler (passo entre "Adicionar" consecutivos: 160 → 236 → 312). O "Adicionar" é 98,9×40 nos dois
   (R14-A), então o que sobra são os 20+20 de padding da seção: 17,5 + 40 + 17,5 + 1 de borda = 76.
   Só o campo vazio: o campo PREENCHIDO tem duas linhas (rótulo + valor) e não foi medido contra o Umbler. */
.um-app .um-painel > .um-painel-corpo > .um-secao.um-campo:has(> .um-link):not(:has(> span)) { padding-top: 17.5px; padding-bottom: 17.5px; }

/* R15-A (V15-5): "Ver mais campos" é `rgb(31,31,31)` no Umbler — o R14-A copiou o `rgb(49,52,59)` do vizinho "Bloquear
   contato" (esse está certo nos dois). Mesmo seletor do R14-A: vence por vir depois. */
.um-app .um-painel > .um-painel-corpo > .um-linha-link.um-ver-mais { color: #1F1F1F; }

/* R15-A (V15-11): o X de fechar do painel Contato nasce a 13 px da borda do painel e o do Umbler a 25 (x 953 × 965).
   `relative`/`left` em vez de margem: mexe no botão (e na área de clique junto) sem reflowar o grid do cabeçalho, que já está
   no lugar certo (avatar 88, nome, telefone, LID). */
.um-app #umPainel > .um-painel > .um-offcanvas-cab > .um-ico-btn[data-painel="fechar"] { position: relative; left: 12px; }

/* R15-A (V15-12): vão entre "Contato" e "Detalhes da conversa" 28 → 32 (a 2ª aba começa em x 1086 no Umbler). */
.um-app #umPainel > .um-painel > .um-offcanvas-abas { column-gap: 32px; }

/* R15-A (T15-C, último item): "Observações do contato" e "Logs de atividade do contato" — a tipografia já é a do Umbler
   (14/21 600 rgb(33,37,41), R14-A/W14-5), mas a faixa ficou com 53 px (16 + 21 + 16) onde o Umbler tem uma LINHA DE TEXTO.
   ⚠️ PROVENIÊNCIA: a altura da faixa do Umbler NÃO foi medida — lá a linha é texto puro (não é alvo clicável) e por isso não
   aparece em `alvos_painel` do `u3.json`; o auditor só registrou "é uma linha de texto". O valor aqui é INFERIDO: a linha de
   21 mais o ritmo de 8 px que o painel já usa entre blocos = 37. A r16 confirma (ou corrige) com a medida de verdade. */
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="observacoes"],
.um-app .um-painel > .um-painel-corpo > .um-linha-link[data-sub="logs"] { height: 37px; padding: 8px 24px; }

/* R15-A (V15-6): o chip "+N" das etiquetas da lista é `rgb(49,52,59)` no Umbler e estava no cinza-3 do Terminal
   (rgb(131,133,140)). O tamanho (12/20) já batia. No escuro volta o token, senão o chip some no fundo. */
.um-app .um-lista .um-linha .um-etiqueta-mais { color: #31343B; }
:root[data-theme="dark"] .um-app .um-lista .um-linha .um-etiqueta-mais { color: var(--um-texto-3); }

/* R15-A (V15-7): a pílula "+99" da aba Entrada — 10/500 nos dois, entrelinha 22 no nosso e 10 no Umbler. Os dois seletores do
   "+99" (aba ativa; aba inativa com busca, bloco R13-C) precisam ser vencidos, daí a dupla. */
.um-app .um-abas .um-pilula--ativa .um-aba-n,
.um-app .um-abas--busca .um-pilula:not(.um-pilula--ativa) .um-aba-n { line-height: 10px; }

/* R15-A (V15-8): o nome do contato na lista é 16/24 no Umbler (700 na ativa, 400 nas demais — os pesos já batem). */
.um-app .um-lista .um-linha-meio .um-nome { line-height: 24px; }

/* R15-A (V15-9): o chip de etiqueta da lista é 12/20 no Umbler (nosso 12/18). */
.um-app .um-lista .um-linha .um-etiqueta { line-height: 20px; }

/* R15-A (V15-10): a reação no balão é 12/18 no Umbler; com `line-height: 1` o emoji ficava colado na borda de baixo. */
.um-app .um-reacao { line-height: 18px; }

/* R15-A (V15-4): o aviso que toma o lugar do compositor na conversa finalizada — 14/21 rgb(33,37,41) no Umbler, 14/22
   rgb(49,52,59) no nosso. O resto da tela finalizada (5 botões, ordem, divisor 110×18) já é idêntico: não mexer.
   O escuro continua com a regra do bloco R8-5 (`var(--um-texto)`), que é mais específica. */
.um-app .um-finalizada > p { line-height: 21px; color: #212529; }

/* R15-A (V15-13 = W14-9): os 8 botões 42×42 do cabeçalho da conversa andam de 46 em 46 e o Umbler de 50 em 50 (1036 → 1386
   com a conversa ativa; 1186 → 1386 na finalizada, com 5 botões). 42 + gap 8 = 50.
   ⚠️ ABAIXO de 900 px de conversa o passo CONTINUA 46, de propósito: o bloco R7-4 zera as margens e fecha o vão para dar
   36 px a mais ao nome, e essa regra veio de uma medida de produção (prod-r7-1-hover.png: a 1440 com a barra do Terminal a
   conversa fica com 767 px e o miolo com 233, contra 242 de "GUSTAVO DE CASTRO PEREIRA"). Devolver os 28 px aos ícones
   trunca o nome de novo. O Umbler mede 50 porque lá não há barra do Terminal comendo a largura. Então: 50 acima de 900 px de
   conversa (onde há folga), 46 abaixo — a V15-13 só fecha a 1440 se a lista encolher ou se o dono aceitar o nome truncado. */
.um-app .um-cabecalho .um-cab-icones { gap: 8px; }
@container (max-width: 899px) { .um-app .um-cabecalho .um-cab-icones { gap: 4px; } }