/* Número do WhatsApp da conversa (app/numero.js). --tzn = cor escolhida no cadastro do número (padrão: azul da marca). */
.tznum-num { --tzn: var(--blue, #0b6bff); display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tzn) 14%, transparent); color: color-mix(in srgb, var(--tzn) 82%, #000); font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: middle; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzbc-chip.tznum-chip { --tzn: var(--blue, #0b6bff); background: color-mix(in srgb, var(--tzn) 14%, transparent); color: color-mix(in srgb, var(--tzn) 82%, #000); border-color: transparent; }
body[data-theme="graphite"] .tznum-num, body[data-theme="graphite"] .tzbc-chip.tznum-chip { background: color-mix(in srgb, var(--tzn) 28%, transparent); color: color-mix(in srgb, var(--tzn) 55%, #fff); }

/* Paleta na janela "Editar conexão" */
.tznum-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tznum-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
.tznum-swatch { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--tzn); cursor: pointer; padding: 0; transition: transform .1s; }
.tznum-swatch:hover { transform: scale(1.12); }
.tznum-swatch.on { box-shadow: 0 0 0 2px var(--panel, #fff), 0 0 0 4px var(--tzn); }
.tznum-swatch:focus-visible, .tznum-other:focus-visible { outline: 2px solid var(--blue, #0b6bff); outline-offset: 2px; }
.tznum-other { border: 1px solid var(--line, #d7deea); background: var(--panel, #fff); color: var(--text, #172033); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.tznum-other.on { border-color: var(--blue, #0b6bff); color: var(--blue, #0b6bff); font-weight: 700; }
.tznum-sample { font-size: 12px; color: var(--muted, #64748b); margin-left: 4px; }
.tznum-sample .tznum-num { margin-left: 4px; }