/* ============================================================================
   tg-contacts.css — Telegram > Contatos (app/views/client/telegram/contacts.php)
   TG-P3, 01/10/2026. Prefixo tgc-. Só tokens do ui-kit (--ui-*): a paleta calm
   e o tema escuro trocam tudo sozinhos; a marca (white-label) vem de --primary.
   Regras da casa: sem box-shadow (borda 1px / tom de superfície), sem faixa de
   accent, sem !important, movimento só em transform/opacity (120 a 350 ms) e
   desligado com prefers-reduced-motion. Docs: docs/DESIGN-SYSTEM.md, UX-CALMA.md.
   ============================================================================ */

.tgc-page { --tgc-pad: var(--ui-space-5); min-width: 0; }
.tgc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tgc-head { margin-top: var(--ui-space-2); }

/* ── Cartão da lista ─────────────────────────────────────────────────────── */
.tgc-card { background: var(--ui-bg-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); min-width: 0; }

.tgc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3) var(--ui-space-4); padding: var(--ui-space-4) var(--tgc-pad); }
.tgc-search { flex: 1 1 260px; max-width: 380px; min-width: 0; margin: 0; }
.tgc-pills { flex: 0 1 auto; min-width: 0; }
.tgc-pills .ui-pill { text-decoration: none; }
.tgc-devform { margin: 0 0 0 auto; display: flex; align-items: center; gap: var(--ui-space-2); }
.tgc-dev-select { width: auto; min-width: 210px; max-width: 280px; }

/* Colunas: contato | (dispositivo) | etiquetas | última conversa | "..." */
.tgc-thead, .tgc-row { --tgc-cols: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 128px 40px; display: grid; grid-template-columns: var(--tgc-cols); align-items: center; column-gap: var(--ui-space-4); }
.tgc-thead.is-single, .tgc-list.is-single .tgc-row { --tgc-cols: minmax(0, 2.6fr) minmax(0, 1.6fr) 128px 40px; }
.tgc-thead { padding: 10px var(--tgc-pad); border-top: 1px solid var(--ui-border-subtle); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); }

.tgc-list { list-style: none; margin: 0; padding: 0; }
.tgc-row { position: relative; min-height: 64px; padding: 10px var(--tgc-pad); border-top: 1px solid var(--ui-border-subtle); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ui-dur-1) var(--ui-ease), opacity calc(var(--ui-dur-2) * .75) var(--ui-ease-in), transform calc(var(--ui-dur-2) * .75) var(--ui-ease-in);
    animation: tgcIn var(--ui-dur-2) var(--ui-ease-out) backwards; }
.tgc-row:hover, .tgc-row:focus-within { background: var(--ui-fill-1); }
/* A linha com o "..." aberto fica por cima das seguintes (o menu desce sobre elas). */
.tgc-row:has(.ui-dropdown.open) { z-index: 3; }
.tgc-row.is-leaving { opacity: 0; transform: translateX(12px); pointer-events: none; }
.tgc-list .tgc-row:nth-child(2) { animation-delay: 20ms; }
.tgc-list .tgc-row:nth-child(3) { animation-delay: 40ms; }
.tgc-list .tgc-row:nth-child(4) { animation-delay: 60ms; }
.tgc-list .tgc-row:nth-child(5) { animation-delay: 80ms; }
.tgc-list .tgc-row:nth-child(n+6) { animation-delay: 100ms; }
@keyframes tgcIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tgc-main { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; padding: 0; margin: 0; border: 0; border-radius: var(--ui-r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tgc-main:focus:not(:focus-visible) { outline: none; }
.tgc-main:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
.tgc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tgc-name { font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgc-sub { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.tgc-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgc-ai { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-accent-ink); white-space: nowrap; }
.tgc-ai svg { width: 12px; height: 12px; flex: 0 0 auto; }
.tgc-ai[hidden] { display: none; }

.tgc-dev { min-width: 0; font-size: var(--ui-fs-label); color: var(--ui-ink-2); }
.tgc-dev-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgc-tags { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.tgc-tags .ui-tag { max-width: 150px; flex: 0 1 auto; }
.tgc-tags .tgc-more { flex: 0 0 auto; color: var(--ui-muted); }
.tgc-when { font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgc-none { color: var(--ui-muted); }
.tgc-menu { justify-self: end; }
.tgc-menu .ui-menu { min-width: 200px; }

/* Avatar: iniciais por baixo, foto local por cima (o JS tira a foto que falhar). */
.tgc-av { overflow: hidden; --ui-av-bg: color-mix(in srgb, var(--tgc-hue, var(--ui-muted)) 15%, var(--ui-bg-card)); --ui-av-fg: color-mix(in srgb, var(--tgc-hue, var(--ui-muted)) 78%, #000); }
:root[data-theme="dark"] .tgc-av { --ui-av-bg: color-mix(in srgb, var(--tgc-hue, var(--ui-muted)) 24%, var(--ui-bg-card)); --ui-av-fg: color-mix(in srgb, var(--tgc-hue, var(--ui-muted)) 72%, #fff); }
.tgc-av > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--ui-bg-card); }
/* Tons das iniciais: os --ui-av-N da paleta calm; no default, os tons semânticos. */
.tgc-av-0 { --tgc-hue: var(--ui-av-0, var(--ui-ok)); }
.tgc-av-1 { --tgc-hue: var(--ui-av-1, var(--ui-accent)); }
.tgc-av-2 { --tgc-hue: var(--ui-av-2, var(--ui-info)); }
.tgc-av-3 { --tgc-hue: var(--ui-av-3, var(--ui-danger)); }
.tgc-av-4 { --tgc-hue: var(--ui-av-4, var(--ui-tg)); }
.tgc-av-5 { --tgc-hue: var(--ui-av-5, var(--ui-warn)); }
.tgc-av-6 { --tgc-hue: var(--ui-av-6, var(--ui-teal, var(--ui-ok))); }
.tgc-av-7 { --tgc-hue: var(--ui-av-7, var(--ui-warn)); }
.tgc-av-8 { --tgc-hue: var(--ui-av-8, var(--ui-info)); }
.tgc-av-9 { --tgc-hue: var(--ui-av-9, var(--ui-ok)); }
.tgc-av-10 { --tgc-hue: var(--ui-av-10, var(--ui-accent)); }
.tgc-av-11 { --tgc-hue: var(--ui-av-11, var(--ui-tg)); }

/* Cor da etiqueta só na bolinha (ui-tag): índice de instance_labels.color.
   Os 20 valores são os de LabelPalette::COLORS, o vocabulário de etiqueta que a
   conversa já desenha (dado do usuário, não cor de interface). */
.tgc-lc-0 { --ui-tag-color: #00a884; } .tgc-lc-1 { --ui-tag-color: #25d366; } .tgc-lc-2 { --ui-tag-color: #fed428; } .tgc-lc-3 { --ui-tag-color: #ff6b6b; }
.tgc-lc-4 { --ui-tag-color: #4ecdc4; } .tgc-lc-5 { --ui-tag-color: #45aaf2; } .tgc-lc-6 { --ui-tag-color: #a78bfa; } .tgc-lc-7 { --ui-tag-color: #fd9644; }
.tgc-lc-8 { --ui-tag-color: #26de81; } .tgc-lc-9 { --ui-tag-color: #eb3b5a; } .tgc-lc-10 { --ui-tag-color: #2d98da; } .tgc-lc-11 { --ui-tag-color: #8854d0; }
.tgc-lc-12 { --ui-tag-color: #f7b731; } .tgc-lc-13 { --ui-tag-color: #20bf6b; } .tgc-lc-14 { --ui-tag-color: #0fb9b1; } .tgc-lc-15 { --ui-tag-color: #778ca3; }
.tgc-lc-16 { --ui-tag-color: #fc5c65; } .tgc-lc-17 { --ui-tag-color: #4b7bec; } .tgc-lc-18 { --ui-tag-color: #a5b1c2; } .tgc-lc-19 { --ui-tag-color: #d1d8e0; }

.tgc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: 14px var(--tgc-pad); border-top: 1px solid var(--ui-border-subtle); font-size: var(--ui-fs-label); color: var(--ui-muted); }
.tgc-count { font-variant-numeric: tabular-nums; }
.tgc-pager { display: flex; align-items: center; gap: var(--ui-space-2); }
.tgc-pageno { padding: 0 var(--ui-space-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgc-noresult { border-top: 1px solid var(--ui-border-subtle); }

/* ── Primeiro uso ────────────────────────────────────────────────────────── */
.tgc-first { padding: var(--ui-space-8) var(--ui-space-6); }
.tgc-empty { padding: var(--ui-space-6) 0; animation: tgcIn var(--ui-dur-3) var(--ui-ease-out) both; }
.tgc-empty-art { display: inline-flex; align-items: center; margin-bottom: var(--ui-space-5); }
.tgc-empty-art .ui-avatar { border: 3px solid var(--ui-bg-card); box-sizing: content-box; }
.tgc-empty-art .ui-avatar + .ui-avatar { margin-left: -12px; }
.tgc-empty-art .ui-avatar:nth-child(2) { transform: translateY(-6px); }
.tgc-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2) var(--ui-space-5); margin: 0 auto var(--ui-space-6); padding: 0; list-style: none; max-width: 880px; font-size: var(--ui-fs-label); color: var(--ui-ink-2); }
.tgc-steps li { display: inline-flex; align-items: center; gap: var(--ui-space-2); text-align: left; }
.tgc-steps .n { flex: 0 0 auto; }
.tgc-steps .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-semibold); font-variant-numeric: tabular-nums; }
.tgc-linkbox { display: flex; align-items: center; gap: var(--ui-space-2); max-width: 460px; margin: 0 auto; padding: 6px 6px 6px var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-r-pill); background: var(--ui-bg-page); }
.tgc-linkbox-txt { display: flex; align-items: center; gap: var(--ui-space-2); flex: 1 1 auto; min-width: 0; font-family: var(--ui-mono); font-size: var(--ui-fs-label); color: var(--ui-ink-2); text-align: left; }
.tgc-linkbox-txt svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); flex: 0 0 auto; color: var(--ui-muted); }
.tgc-linkbox-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgc-linkbox .ui-btn { flex: 0 0 auto; border-radius: var(--ui-r-pill); }
.tgc-empty-more { margin-top: var(--ui-space-4); font-size: var(--ui-fs-label); }
.tgc-empty-more a { color: var(--ui-accent-ink); }

/* ── Divulgar link (popover) ─────────────────────────────────────────────── */
.tgc-share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ui-space-2); }
.tgc-share-item { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-2); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.tgc-share-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tgc-share-name { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgc-share-link { font-family: var(--ui-mono); font-size: var(--ui-fs-help); color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgc-share .ui-tile { --ui-tile-size: 32px; }

/* Botão "Copiar" que vira "Copiado" por 1,5 s. */
[data-tgc-copy].is-done { color: var(--ui-ok-ink); }

/* ── Gaveta "Ver dados" ──────────────────────────────────────────────────── */
.tgc-drawer .ui-mbody { display: flex; flex-direction: column; }
.tgc-d-skel { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.tgc-d-skel-head { display: flex; align-items: center; gap: var(--ui-space-3); margin-bottom: var(--ui-space-2); }
.tgc-d-skel-head .ui-skel-circle { width: 64px; height: 64px; }
.tgc-d-skel-head .ui-skel-stack { flex: 1 1 auto; }
.tgc-d { display: flex; flex-direction: column; gap: var(--ui-space-6); animation: tgcIn var(--ui-dur-3) var(--ui-ease-out) both; }
.tgc-d[hidden], .tgc-d-error[hidden], .tgc-d-skel[hidden] { display: none; }
.tgc-d-profile { display: flex; align-items: center; gap: var(--ui-space-4); min-width: 0; }
.tgc-d-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tgc-d-name { font-size: var(--ui-fs-modal); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: var(--ui-ls-title); color: var(--ui-ink); overflow-wrap: anywhere; }
.tgc-d-user { font-size: var(--ui-fs-body); color: var(--ui-muted); overflow-wrap: anywhere; }
.tgc-d-user:empty { display: none; }
.tgc-d-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--ui-space-2); }
.tgc-d-badges .ui-chip span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.tgc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0; }
.tgc-fact { padding: var(--ui-space-3); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); min-width: 0; }
.tgc-fact[hidden] { display: none; }
.tgc-fact dt { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); }
.tgc-fact dt svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); flex: 0 0 auto; }
.tgc-fact dd { display: flex; align-items: center; gap: 4px; margin: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.tgc-copy-ic { margin: -6px -6px -6px auto; }

.tgc-d-sec { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.tgc-d-sec[hidden] { display: none; }
.tgc-d-sec-t { margin: 0; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.tgc-d-line { display: flex; align-items: flex-start; gap: var(--ui-space-3); }
.tgc-d-line-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.tgc-d-line-t { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); overflow-wrap: anywhere; }
.tgc-d-line-s { font-size: var(--ui-fs-label); color: var(--ui-muted); overflow-wrap: anywhere; }
.tgc-d-line-s:empty { display: none; }
.tgc-d-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tgc-d-danger { padding-top: var(--ui-space-5); border-top: 1px solid var(--ui-border-subtle); }
.tgc-d-note { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.tgc-d-danger .ui-btn { align-self: flex-start; }
.tgc-drawer .ui-mfoot[hidden] { display: none; }

/* ── Celular: a linha vira cartão (nome + hora + "...", e as etiquetas embaixo) ── */
@media (max-width: 760px) {
    .tgc-page { --tgc-pad: var(--ui-space-4); }
    .tgc-toolbar { gap: var(--ui-space-3); }
    .tgc-search { flex: 1 1 100%; max-width: none; }
    .tgc-pills { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .tgc-pills::-webkit-scrollbar { display: none; }
    .tgc-pills .ui-pill { flex: 0 0 auto; height: 36px; }
    .tgc-devform { margin: 0; flex: 1 1 100%; }
    .tgc-dev-select { width: 100%; max-width: none; }
    .tgc-thead { display: none; }
    .tgc-row, .tgc-list.is-single .tgc-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "main when menu" "tags tags tags";
        column-gap: var(--ui-space-2); row-gap: 0; padding: 12px var(--tgc-pad); min-height: 0;
    }
    .tgc-main { grid-area: main; }
    .tgc-when { grid-area: when; align-self: start; padding-top: 4px; }
    .tgc-menu { grid-area: menu; align-self: start; margin: -4px -8px 0 0; }
    .tgc-menu .ui-btn-icon { width: var(--ui-target-touch); height: var(--ui-target-touch); }
    /* No celular o dispositivo sai da linha (o seletor do topo já diz o
       recorte; a gaveta mostra o dispositivo): cartão com 2 a 3 dados. */
    .tgc-dev { display: none; }
    .tgc-tags { grid-area: tags; padding-left: 52px; margin-top: 8px; flex-wrap: wrap; overflow: visible; }
    .tgc-tags.is-empty { display: none; }
    .tgc-foot { flex-direction: column; align-items: stretch; text-align: center; }
    .tgc-pager { justify-content: space-between; }
    .tgc-pager .ui-btn { min-height: var(--ui-target-touch); }
    .tgc-first { padding: var(--ui-space-6) var(--ui-space-4); }
    .tgc-steps { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; }
    .tgc-linkbox { flex-direction: column; align-items: stretch; border-radius: var(--ui-r-lg); padding: var(--ui-space-3); }
    .tgc-linkbox-txt { justify-content: center; }
    .tgc-linkbox .ui-btn { border-radius: var(--ui-r-md); }
}
/* Celular estreito: "Página X de Y" sai (o "Mostrando 1 a 25 de N" já diz onde está). */
@media (max-width: 420px) {
    .tgc-pageno { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tgc-row, .tgc-empty, .tgc-d { animation: none; }
    .tgc-row { transition: background-color var(--ui-dur-1) var(--ui-ease), opacity var(--ui-dur-1) linear; }
    .tgc-row.is-leaving { transform: none; }
    .tgc-empty-art .ui-avatar:nth-child(2) { transform: none; }
}