/* ============================================================
   DROPE CRM - chats.css
   Camada de TEMA do chat (wa-* / ag-* / ctm-* / wa-mobile-*).
   Carrega DEPOIS de style.css, apenas em telas com ui-kit
   (cliente / agente / iframe do chat). Regras aqui reescrevem
   SOMENTE cor (bg, texto, borda, sombra) dos seletores da
   reforma clara; layout e tamanhos ficam no style.css.
   Modo claro = valores atuais. Dark = :root[data-theme="dark"].
   ============================================================ */

/* ── Tokens: claro (identico ao visual atual) ─────────────── */
:root {
    --wa-app-bg: #FFF8F0;            /* area de mensagens */
    --wa-mobile-pane-bg: #EFEAE2;    /* pane mobile durante slide */
    --wa-panel-bg: #FFFFFF;          /* sidebar, headers, paineis */
    --wa-panel-bg-2: #F9FAFB;        /* submenus, superficies sutis */
    --wa-soft: #FFF8F0;              /* superficie creme (avatar-section) */
    --wa-foot-bg: #FCFCFD;           /* rodape de modal */
    --wa-menu-bg: #FFFFFF;           /* dropdowns / menus flutuantes / modais */
    --wa-field-bg: #FFF8F0;          /* inputs creme */
    --wa-field-bg-2: #FFFFFF;        /* inputs brancos (selects, modais) */
    --wa-field-bg-3: #FBFBFC;        /* input da busca do transfer modal */
    --wa-field-line: rgba(42,45,52,.12);
    --wa-field-line-2: rgba(42,45,52,.15);
    --wa-field-line-3: rgba(42,45,52,.18);
    --wa-chip-bg: #F2EDE6;           /* chips de filtro / date-sep / system msg */
    --wa-ink: #2A2D34;
    --wa-ink-2: #374151;
    --wa-ink-strong: #111827;
    --wa-muted: #6B7280;
    --wa-muted-2: #9CA3AF;
    --wa-line: rgba(42,45,52,.10);
    --wa-line-2: rgba(42,45,52,.06);
    --wa-line-3: rgba(42,45,52,.08);
    --wa-strong-line: rgba(42,45,52,.25);
    --wa-scroll: rgba(42,45,52,.18);
    --wa-scroll-2: rgba(42,45,52,.30);
    --wa-hover: rgba(var(--primary-rgb), .06);   /* hover com tinta da marca */
    --wa-hover-2: rgba(42,45,52,.05);            /* hover neutro */
    --wa-row-hover: rgba(42,45,52,.03);          /* hover bem sutil de linha */
    --wa-active: rgba(var(--primary-rgb), .10);  /* item de chat ativo */
    --wa-flat: rgba(42,45,52,.05);               /* superficie neutra translucida */
    --wa-flat-2: rgba(42,45,52,.08);
    --wa-flat-3: rgba(42,45,52,.12);
    --wa-flat-hover: rgba(42,45,52,.10);
    --wa-recv-bg: #FFFFFF;           /* bolha recebida */
    --wa-recv-ink: #2A2D34;
    --wa-sent-bg: var(--primary);    /* bolha enviada = laranja da marca */
    --wa-sent-ink: var(--ui-on-primary, #FFFFFF);
    --wa-accent: var(--primary);
    --wa-avatar-bg: #5DA399;
    --wa-teal: #5DA399;
    --wa-teal-ink: #3D7C76;
    --wa-track: #CBD0D8;             /* trilho de switch desligado */
    --wa-backdrop: rgba(42,45,52,.45);
    --wa-backdrop-2: rgba(15,23,42,.5);
    --wa-load-bg: #FFF8F0;           /* botao "carregar mais" dentro de bolha */
    --wa-load-line: rgba(var(--primary-rgb), .35);
    --wa-load-ink: var(--primary-hover);
    --wa-load-bg-hover: rgba(var(--primary-rgb), .12);
    --wa-load-line-hover: rgba(var(--primary-rgb), .5);
    --wa-danger: var(--ui-danger, #E11D48);
    --wa-warn: var(--ui-warn, #D97706);
    --wa-ok: var(--ui-ok, #0E9F6E);
    --wa-info: var(--ui-info, #2563EB);
    --wa-indigo: #4338CA;            /* texto da faixa "em atendimento" */
    --wa-indigo-2: #6366F1;          /* avatar/pulso indigo */
}

/* ── Tokens: dark ─────────────────────────────────────────── */
:root[data-theme="dark"] {
    --wa-app-bg: #0B1014;
    --wa-mobile-pane-bg: #0B1014;
    --wa-panel-bg: var(--ui-card-bg, #14171F);
    --wa-panel-bg-2: #1F2530;
    --wa-soft: #1F2530;
    --wa-foot-bg: #171B24;
    --wa-menu-bg: #1B1F29;
    --wa-field-bg: var(--ui-field-bg, #0F1218);
    --wa-field-bg-2: var(--ui-field-bg, #0F1218);
    --wa-field-bg-3: var(--ui-field-bg, #0F1218);
    --wa-field-line: var(--ui-field-line, rgba(255,255,255,.12));
    --wa-field-line-2: rgba(255,255,255,.14);
    --wa-field-line-3: rgba(255,255,255,.16);
    --wa-chip-bg: rgba(255,255,255,.06);
    --wa-ink: var(--ui-ink, #E7EAF0);
    --wa-ink-2: var(--ui-ink-2, #C5CAD3);
    --wa-ink-strong: #F2F4F8;
    --wa-muted: var(--ui-muted, #94A0B0);
    --wa-muted-2: var(--ui-muted-2, #6B7686);
    --wa-line: var(--ui-line, rgba(255,255,255,.09));
    --wa-line-2: var(--ui-line-2, rgba(255,255,255,.06));
    --wa-line-3: rgba(255,255,255,.08);
    --wa-strong-line: rgba(255,255,255,.25);
    --wa-scroll: rgba(255,255,255,.16);
    --wa-scroll-2: rgba(255,255,255,.28);
    --wa-hover: rgba(255,255,255,.05);
    --wa-hover-2: rgba(255,255,255,.06);
    --wa-row-hover: rgba(255,255,255,.04);
    --wa-active: rgba(var(--primary-rgb), .16);
    --wa-flat: rgba(255,255,255,.06);
    --wa-flat-2: rgba(255,255,255,.09);
    --wa-flat-3: rgba(255,255,255,.12);
    --wa-flat-hover: rgba(255,255,255,.12);
    --wa-recv-bg: #202634;
    --wa-recv-ink: #E7EAF0;
    --wa-avatar-bg: #3F6F66;
    --wa-teal: var(--ui-teal, #5DA399);
    --wa-teal-ink: #8FC7BE;
    --wa-track: #3A4150;
    --wa-backdrop: rgba(0,0,0,.55);
    --wa-backdrop-2: rgba(0,0,0,.6);
    --wa-load-bg: rgba(var(--primary-rgb), .12);
    --wa-load-line: rgba(var(--primary-rgb), .35);
    --wa-load-ink: var(--primary);
    --wa-load-ink: color-mix(in srgb, var(--primary), #fff 35%);
    --wa-load-bg-hover: rgba(var(--primary-rgb), .2);
    --wa-load-line-hover: rgba(var(--primary-rgb), .5);
    --wa-indigo: #A5B4FC;
    --wa-indigo-2: #818CF8;
}

/* ── Fundo do iframe slim (show.php usa data-bs-theme="dark") ── */
html[data-bs-theme="dark"], html[data-bs-theme="dark"] body { background: var(--wa-app-bg) !important; }

/* ── Ícones Lucide inline: dimensionados por 1em (herda font-size, como os
   antigos bootstrap-icons), herdam a cor via currentColor. ── */
svg.wa-ico { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
.wa-ico-host { display: inline-flex; align-items: center; justify-content: center; }

/* Fonte do sistema (Instrument Sans) no chat. O iframe é um documento próprio;
   sem isto o conteúdo herdava 'Segoe UI'. Força nas superfícies do chat. */
body, .wa-layout, .wa-messages, .wa-msg, .wa-msg-text, .wa-chat-header, .wa-input-area, .wa-input-text {
    font-family: 'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ============================================================
   SIDEBAR (lista de conversas)
   ============================================================ */
.wa-sidebar {
    background: var(--wa-panel-bg);
    border-right: 1px solid var(--wa-line);
}
.wa-sidebar-top {
    background: var(--wa-panel-bg);
    border-bottom: 1px solid var(--wa-line-3);
}
.wa-sidebar-top select,
#instanceSelect {
    background: var(--wa-field-bg-2) !important;
    color: var(--wa-ink) !important;
    border: 1px solid var(--wa-field-line-2) !important;
}
.wa-search-bar { background: var(--wa-panel-bg); }
.wa-search-wrap input {
    background: var(--wa-field-bg);
    border: 1px solid var(--wa-field-line);
    color: var(--wa-ink);
}
.wa-search-wrap input::placeholder { color: var(--wa-muted-2); }
.wa-search-wrap i, .wa-search-wrap svg.wa-ico { color: var(--wa-muted); }

/* Chips de filtro */
.wa-filter-btn {
    background: var(--wa-chip-bg);
    color: var(--wa-muted);
}
.wa-filter-btn.active {
    background: var(--wa-accent);
    color: #FFFFFF;
}
.wa-filter-btn:hover:not(.active) { background: var(--wa-flat-2); }

/* Scrollbar da lista */
.wa-chat-list::-webkit-scrollbar-thumb { background: var(--wa-scroll); }
.wa-chat-list::-webkit-scrollbar-thumb:hover { background: var(--wa-scroll-2); }

/* Item da lista */
.wa-chat-item {
    background: var(--wa-panel-bg);
    border-bottom: 1px solid var(--wa-line-2);
}
.wa-chat-item:hover { background: var(--wa-hover); }
.wa-chat-item.active {
    background: var(--wa-active);
    border-left-color: var(--wa-accent);
}
.wa-chat-avatar {
    background: var(--wa-avatar-bg);
    color: #FFFFFF;
}
/* Avatar + selo do canal (ui-kit .ui-chan-dot, partial channel-dot). O selo
   fica FORA do avatar, que corta em circulo e tem o conteudo trocado pelo JS
   quando a foto chega: o embrulho ocupa o lugar do avatar na linha e so
   posiciona. O aro do selo acompanha o fundo da linha em cada estado (o
   hover e a ativa sao tintas translucidas sobre o painel, dai o color-mix). */
.wa-av-wrap { position: relative; display: flex; flex-shrink: 0; }
.wa-av-wrap > .ui-chan-dot { position: absolute; right: -3px; bottom: -3px; }
.wa-chat-item .ui-chan-dot { --ui-chan-dot-ring: var(--wa-panel-bg); }
.wa-chat-item:hover .ui-chan-dot { --ui-chan-dot-ring: color-mix(in srgb, rgb(var(--primary-rgb)) 6%, var(--wa-panel-bg)); }
.wa-chat-item.active .ui-chan-dot { --ui-chan-dot-ring: color-mix(in srgb, rgb(var(--primary-rgb)) 10%, var(--wa-panel-bg)); }
:root[data-theme="dark"] .wa-chat-item:hover .ui-chan-dot { --ui-chan-dot-ring: color-mix(in srgb, #FFFFFF 5%, var(--wa-panel-bg)); }
:root[data-theme="dark"] .wa-chat-item.active .ui-chan-dot { --ui-chan-dot-ring: color-mix(in srgb, rgb(var(--primary-rgb)) 16%, var(--wa-panel-bg)); }
.wa-chat-header .ui-chan-dot { --ui-chan-dot-ring: var(--wa-panel-bg); }
/* Seletor de canais: nome grande corta com reticencias, no botao e nas opcoes
   (o nome inteiro vai no title). */
.wa-dd-label { flex: 1 1 auto; min-width: 0; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* Icone do canal marcado (Instagram, Telegram) antes do nome, no botao do seletor. */
.wa-dd-cur-ico { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 6px; }
.wa-dd-cur-ico[hidden] { display: none; }
.wa-dd-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-name { color: var(--wa-ink); }
.wa-chat-preview { color: var(--wa-muted); }
.wa-chat-time { color: var(--wa-muted); }
.wa-chat-item.has-unread .wa-chat-time { color: var(--wa-accent); }

/* Badge de origem (dispositivo/canal) na conversa. Só aparece quando 2+ canais
   estão selecionados no filtro (#chatList[data-multi-channel="1"]) — senão fica
   escondida (redundante com 1 canal). */
.wa-chat-device {
    display: none;
    align-items: center;
    flex-shrink: 0;
    max-width: 104px;
    margin: 0 6px 0 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-chat-device--wa { background: rgba(37, 211, 102, .14); color: #128c3e; }
.wa-chat-device--ig { background: rgba(225, 48, 108, .12); color: #c31f5c; }
/* Telegram: mesma cor do selo do ui-kit (--ui-tg / --ui-tg-ink), escrita aqui
   como as duas de cima porque esta folha tambem sai sem o ui-kit. */
.wa-chat-device--tg { background: rgba(34, 158, 217, .12); color: #17729F; }
:root[data-theme="dark"] .wa-chat-device--wa { background: rgba(37, 211, 102, .18); color: #52d081; }
:root[data-theme="dark"] .wa-chat-device--ig { background: rgba(225, 48, 108, .20); color: #f472a6; }
:root[data-theme="dark"] .wa-chat-device--tg { background: rgba(34, 158, 217, .20); color: #6CC3EE; }
/* inline-block, e nao inline-flex: num flex o texto vira item anonimo e o
   text-overflow nao desenha as reticencias do nome grande. */
#chatList[data-multi-channel="1"] .wa-chat-device { display: inline-block; }

/* Selo de atendimento ("Em atendimento" / "Aguardando") na linha da conversa.
   O componente e o .ui-badge.sm do ui-kit (partial client.layout.attend-badge);
   aqui so o encaixe: segunda linha, depois da previa e antes do sino e do
   contador. Quem encolhe e a previa, nunca o selo. */
.wa-chat-row2 .wa-attend { flex-shrink: 0; margin-left: 6px; }

/* Filtros de atendimento: o icone tem a cor do selo, para filtro e selo se
   reconhecerem de relance; no filtro ativo ele acompanha o texto. */
.wa-filter-btn--attend { display: inline-flex; align-items: center; gap: 5px; }
.wa-filter-btn--attend .wa-filter-ico { font-size: .85rem; }
.wa-filter-btn--attend[data-fval="attending"] .wa-filter-ico { color: var(--wa-indigo-2); }
.wa-filter-btn--attend[data-fval="waiting"] .wa-filter-ico { color: var(--wa-warn); }
.wa-filter-btn--attend.active .wa-filter-ico { color: inherit; }
/* Conversa do painel antigo do Instagram nao passa pelo atendimento, e por isso
   nunca esta "em atendimento" nem "aguardando": some nos dois filtros. */
body[data-filter="attending"] .wa-chat-wrap[data-ig-account-id],
body[data-filter="waiting"] .wa-chat-wrap[data-ig-account-id] { display: none; }
/* Estado vazio dos filtros de atendimento: diz o que apareceria ali. */
.wa-attend-empty { text-align: center; padding: 2.5rem 1.25rem; color: var(--wa-muted); }
.wa-attend-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 12px; background: var(--wa-flat); color: var(--wa-muted); font-size: 1.35rem; }
.wa-attend-empty-t { margin: 0 0 4px; font-size: .9rem; font-weight: 600; color: var(--wa-ink); }
.wa-attend-empty-s { margin: 0 auto; max-width: 240px; font-size: .8rem; line-height: 1.45; }
.wa-unread-badge {
    background: var(--wa-accent);
    color: #FFFFFF;
}
.wa-muted-icon { color: var(--wa-muted-2); }

/* ============================================================
   DROPDOWN da lista (menu de acoes do chat) - card claro legado
   ============================================================ */
.wa-chat-dropdown {
    background: var(--wa-menu-bg);
    border: 1px solid var(--wa-line);
    box-shadow: none; /* regra da casa: sem sombra, so borda */
}
.wa-drop-item { color: var(--wa-ink-2); }
.wa-drop-item > i { color: var(--wa-muted); }
.wa-drop-item:hover { background: var(--wa-hover-2); color: var(--wa-ink-strong); }
.wa-drop-item:hover > i { color: var(--wa-ink-2); }
.wa-drop-item.wa-drop-warn { color: var(--wa-warn); }
.wa-drop-item.wa-drop-warn > i { color: var(--wa-warn); }
.wa-drop-item.wa-drop-warn:hover { background: rgba(217,119,6,.07); }
.wa-drop-item.wa-drop-danger { color: var(--wa-danger); }
.wa-drop-item.wa-drop-danger > i { color: var(--wa-danger); }
.wa-drop-item.wa-drop-danger:hover { background: rgba(220,38,38,.07); }
.wa-drop-chevron { color: var(--wa-muted-2) !important; }
.wa-drop-item:hover .wa-drop-chevron { color: var(--wa-muted) !important; }
.wa-drop-divider { background: var(--wa-line-3); }
.wa-mute-submenu { background: var(--wa-panel-bg-2); border-top: 1px solid var(--wa-line-2); }
.wa-mute-submenu .wa-drop-item { color: var(--wa-muted); }
.wa-mute-submenu .wa-drop-item:hover { color: var(--wa-ink-2); }
.wa-label-submenu { background: var(--wa-panel-bg-2); border-top: 1px solid var(--wa-line-2); }

/* ============================================================
   AREA DE MENSAGENS (as bolhas sao do chat-msg.css)
   ============================================================ */
.wa-main { background: var(--wa-app-bg); }
.wa-messages { background: var(--wa-app-bg); }
.wa-messages::-webkit-scrollbar-thumb { background: var(--wa-scroll); }
.wa-messages::-webkit-scrollbar-thumb:hover { background: var(--wa-scroll-2); }

/* ============================================================
   EMOJI - popup de reacao rapida + picker do composer
   ============================================================ */
.wa-emoji-picker {
    background: var(--wa-menu-bg);
    border: 1px solid var(--wa-field-line);
    box-shadow: none;
}
.wa-emoji-picker span.wa-emoji-plus {
    color: var(--wa-muted);
    background: var(--wa-flat);
}
.wa-emoji-picker span.wa-emoji-remove { color: var(--wa-muted-2); }

.wa-emoji-btn { color: var(--wa-muted); }

.wa-input-emoji-picker {
    background: var(--wa-menu-bg);
    border: 1px solid var(--wa-line);
    box-shadow: none;
}
.wa-emoji-tabs { border-bottom: 1px solid var(--wa-line-2); }
.wa-emoji-tab { color: var(--wa-muted); }
.wa-emoji-tab:hover { color: var(--wa-ink); }
.wa-emoji-search i, .wa-emoji-search svg.wa-ico { color: var(--wa-muted-2); }
/* o icone era <i> posicionado absoluto no style.css; o SVG Lucide precisa da
   mesma geometria (o seletor de elemento `i` nao pega o <svg>). */
.wa-emoji-search svg.wa-ico { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); font-size: .9rem; pointer-events: none; }
.wa-emoji-search input {
    border: 1px solid var(--wa-field-line);
    background: var(--wa-field-bg);
    color: var(--wa-ink);
}
.wa-emoji-search input:focus {
    border-color: var(--wa-accent);
    background: var(--wa-field-bg-2);
}
.wa-emoji-content { scrollbar-color: var(--wa-strong-line) transparent; }
.wa-emoji-content::-webkit-scrollbar-thumb { background: var(--wa-strong-line); }
.wa-emoji-section-title { color: var(--wa-muted); }
.wa-emoji-empty { color: var(--wa-muted-2); }

/* Composer, menu "+", paineis e modais da conversa, cabecalho: zona B,
   em public/assets/css/chat-shell.css (01/10/2026). */
.wa-chevron-btn { color: var(--wa-muted-2); }

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.wa-empty {
    background: var(--wa-app-bg);
    color: var(--wa-muted);
}

/* ============================================================
   PAINEL DE CONTATO / GRUPO
   ============================================================ */
.wa-contact-panel {
    background: var(--wa-panel-bg);
    border-left: 1px solid var(--wa-line);
}
.wa-cp-header {
    background: var(--wa-panel-bg);
    border-bottom: 1px solid var(--wa-line-3);
    color: var(--wa-ink);
}
.wa-cp-avatar-section { background: var(--wa-soft); }
.wa-cp-avatar-placeholder {
    background: var(--wa-avatar-bg);
    color: #FFFFFF;
}
.wa-cp-name { color: var(--wa-ink); }
.wa-cp-phone { color: var(--wa-muted); }
.wa-cp-section {
    background: var(--wa-panel-bg);
    border-top: 1px solid var(--wa-line-2);
}
.wa-cp-section-label { color: var(--wa-accent); }
.wa-cp-section-item {
    color: var(--wa-ink);
    border-bottom: 1px solid var(--wa-line-2);
}
.wa-cp-body::-webkit-scrollbar-thumb { background: var(--wa-scroll); }

/* Membros do grupo */
.wa-gp-avatar {
    background: var(--wa-avatar-bg);
    color: #FFFFFF;
}
.wa-gp-name { color: var(--wa-ink); }
.wa-gp-phone { color: var(--wa-muted); }
.wa-gp-badge {
    color: var(--wa-teal);
    background: rgba(93,163,153,.10);
    border: 1px solid rgba(93,163,153,.20);
}
.wa-gp-member { border-bottom: 1px solid var(--wa-line-2); }
.wa-gp-member:hover { background: var(--wa-row-hover); }

/* ============================================================
   MOBILE (wa-mobile-* + colapso single-pane)
   ============================================================ */
@media (max-width: 767px) {
    .cl-main-wide .wa-main { background: var(--wa-mobile-pane-bg); }
    .cl-main-wide .wa-contact-panel { background: var(--wa-panel-bg) !important; }
}


/* ============================================================
   AJUSTES DARK-ONLY (legado que fica bom no claro como esta)
   ============================================================ */
:root[data-theme="dark"] .wa-chevron-btn:hover { color: #FFFFFF !important; }
:root[data-theme="dark"] .wa-mobile-back { color: var(--wa-muted); }
:root[data-theme="dark"] .wa-mobile-back:hover,
:root[data-theme="dark"] .wa-mobile-back:active { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] #mtgDate,
:root[data-theme="dark"] #mtgTime { color-scheme: dark; }
/* Campo já é color-scheme dark (acima e no style.css): o ícone nativo sai claro.
   Inverter de novo deixava o calendário PRETO no escuro. */
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Barra "Respondendo a..." e menu de ações da mensagem: chat-shell.css (seção 14). */

/* ── Aviso de janela de atendimento dentro do chat ─────────── */
/* O componente vive no ui-kit (.wa-window-notice sobre .ui-notice). Aqui ele so
   troca para os tokens do chat, porque o painel de conversa tem paleta propria
   e carrega DEPOIS do ui-kit. Sem sombra, borda 1px, como o resto da tela.
   Margem lateral igual a do campo de mensagem para os dois ficarem alinhados. */
.wa-window-notice {
    margin: 0 10px 6px;
    border-color: rgba(var(--primary-rgb), .28);
    background: var(--wa-panel-bg-2);
    color: var(--wa-ink-2);
}
.wa-window-notice svg { color: var(--wa-warn); }
.wa-window-notice-title { color: var(--wa-ink); }
.wa-window-notice-text { color: var(--wa-muted); }
.wa-window-notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.wa-window-notice-actions:empty { display: none; }
/* O icone do aviso e amarelo; o do botao segue a cor do texto do botao. */
.wa-window-notice .ui-btn svg { color: currentColor; width: 15px; height: 15px; }

/* Chip da franquia mensal de atendimento (cabecalho, ao lado do chip da IA).
   Estado por data-state, nunca por classe de cor inline. */
.wa-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--wa-muted);
    background: var(--wa-flat);
    font-variant-numeric: tabular-nums;
}
.wa-tier-chip[hidden] { display: none; }
.wa-tier-chip svg.wa-ico { width: 15px; height: 15px; }
.wa-tier-chip[data-state="warn"] { color: var(--wa-warn); background: rgba(var(--ui-warn-rgb), .12); }
.wa-tier-chip[data-state="exhausted"] { color: var(--wa-danger); background: rgba(var(--ui-danger-rgb), .12); }

/* Aviso de franquia esgotada e aviso de anuncio: irmaos do aviso de janela,
   mesma tipografia (.wa-window-notice-*), so o icone muda de cor. */
.wa-tier-notice,
.wa-ad-notice {
    margin: 0 10px 6px;
    border-color: rgba(var(--primary-rgb), .28);
    background: var(--wa-panel-bg-2);
    color: var(--wa-ink-2);
}
.wa-tier-notice[hidden],
.wa-ad-notice[hidden] { display: none; }
.wa-tier-notice svg { color: var(--wa-danger); }
.wa-ad-notice svg { color: var(--wa-warn); }
.wa-ad-notice b { color: var(--wa-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Janela gratis de anuncio (cabecalho): "Grátis até dd/mm HH:mm" ou "Janela
   grátis ativa". Verde de confirmacao dos tokens. */
.wa-fep {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--wa-ok);
    background: rgba(var(--ui-ok-rgb), .12);
}
.wa-fep[hidden] { display: none; }
.wa-fep svg { width: 12px; height: 12px; }

/* Chip de anuncio na linha da lista: compacto e sempre visivel (ao contrario
   de .wa-chat-device, que so aparece com 2+ canais). */
.wa-chat-ad { flex: 0 0 auto; margin: 0 4px; padding: 2px 5px; }

@media (max-width: 480px) {
    .wa-tier-chip { padding: 0 9px; font-size: .72rem; }
}

/* ── Modal "Enviar template" (API Oficial) ──────────────────── */
/* Caixa, campos e botoes sao os do ui-kit (.ui-modal/.ui-select/.ui-input/
   .ui-btn). Aqui: o layout em duas colunas (formulario + celular), os cartoes
   de template, o mini seletor de origem por variavel e o celular. O celular e
   um mockup do WhatsApp (mesma excecao sancionada da previa de campanhas:
   cores do proprio WhatsApp), claro ou escuro conforme o tema. Sem sombra. */
.wa-tpl-modal .modal-dialog { max-width: 960px; padding: 0 12px; }
.wa-tpl-modal .ui-mbox { max-height: calc(100vh - 2.5rem); max-height: calc(100dvh - 2.5rem); }
.wa-tpl-modal .ui-mhead { padding: 16px 20px 16px 24px; }
.wa-tpl-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wa-tpl-head-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--ui-accent-rgb), .12); color: var(--ui-accent); }
.wa-tpl-head-ico svg { width: 20px; height: 20px; }
.wa-tpl-head-txt { min-width: 0; }
.wa-tpl-head-sub { margin-top: 2px; font-size: .78rem; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wa-tpl-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; flex: 1 1 auto; min-height: 0; height: 600px; max-height: calc(100dvh - 12rem); }
.wa-tpl-main { min-height: 0; overflow-y: auto; padding: 20px 24px 24px; }
.wa-tpl-side { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; background: var(--ui-surface); border-left: 1px solid var(--ui-line-2); }
.wa-tpl-side-label, .wa-tpl-step-title, .wa-tpl-sec { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }

/* Estados */
.wa-tpl-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 260px; padding: 20px; text-align: center; font-size: .86rem; color: var(--ui-muted); line-height: 1.5; }
.wa-tpl-state[hidden] { display: none; }
.wa-tpl-state strong { color: var(--ui-ink); font-size: .92rem; }
.wa-tpl-state-ico { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--ui-accent-rgb), .10); color: var(--ui-accent); }
.wa-tpl-state-ico svg { width: 22px; height: 22px; }
.wa-tpl-spin { display: inline-block; width: 22px; height: 22px; border: 2.5px solid rgba(var(--ui-accent-rgb), .22); border-top-color: var(--ui-accent); border-radius: 50%; animation: waTplGira .7s linear infinite; }
.wa-tpl-spin.is-btn { width: 14px; height: 14px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes waTplGira { to { transform: rotate(360deg); } }

/* Etapa 1: escolher */
.wa-tpl-search { display: flex; align-items: center; gap: 8px; height: 42px; margin: 10px 0 12px; padding: 0 12px; border: 1px solid var(--ui-field-line); border-radius: var(--ui-radius-sm); background: var(--ui-field-bg); color: var(--ui-muted); cursor: text; transition: border-color .15s var(--ui-ease); }
.wa-tpl-search[hidden] { display: none; }
.wa-tpl-search:focus-within { border-color: var(--ui-accent); }
.wa-tpl-search svg { flex: 0 0 auto; width: 16px; height: 16px; }
.wa-tpl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ui-ink); font-size: .88rem; font-family: inherit; }
.wa-tpl-step-title + .wa-tpl-list, .wa-tpl-search[hidden] + .wa-tpl-list { margin-top: 10px; }
.wa-tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.wa-tpl-card { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 13px 14px; text-align: left; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); background: var(--ui-card-bg); color: var(--ui-ink-2); font-family: inherit; cursor: pointer; transition: border-color .15s var(--ui-ease), background .15s var(--ui-ease); }
.wa-tpl-card:hover, .wa-tpl-card:focus-visible, .wa-tpl-card.is-ativo { border-color: rgba(var(--ui-accent-rgb), .6); background: rgba(var(--ui-accent-rgb), .04); outline: none; }
.wa-tpl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wa-tpl-card-top strong { font-size: .88rem; font-weight: 700; line-height: 1.3; color: var(--ui-ink); }
.wa-tpl-card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; line-height: 1.5; color: var(--ui-muted); }
.wa-tpl-card-var { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 5px; background: rgba(var(--ui-accent-rgb), .12); color: var(--ui-accent); font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.5; }
.wa-tpl-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .7rem; font-weight: 600; color: var(--ui-muted-2); }
.wa-tpl-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.wa-tpl-card-meta svg { width: 12px; height: 12px; }
.wa-tpl-list-vazia { grid-column: 1 / -1; padding: 28px 10px; text-align: center; font-size: .84rem; color: var(--ui-muted); }
.wa-tpl-cat { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.wa-tpl-cat.is-mkt  { background: rgba(var(--ui-accent-rgb), .12); color: var(--ui-accent); }
.wa-tpl-cat.is-util { background: rgba(var(--ui-ok-rgb), .12);     color: var(--ui-ok); }
.wa-tpl-cat.is-auth { background: rgba(var(--ui-info-rgb), .12);   color: var(--ui-info); }

/* Etapa 2: personalizar */
.wa-tpl-step[hidden] { display: none; }
.wa-tpl-chosen { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); background: var(--ui-card-bg); }
.wa-tpl-chosen-info { flex: 1; min-width: 0; }
.wa-tpl-chosen-name { font-size: .92rem; font-weight: 700; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-chosen-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; font-size: .74rem; color: var(--ui-muted-2); }
.wa-tpl-chosen-sub > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-chosen .ui-btn svg { width: 14px; height: 14px; }
.wa-tpl-sec { margin: 22px 0 4px; }
.wa-tpl-fields > .wa-tpl-sec:first-child { margin-top: 0; }
.wa-tpl-var { padding: 12px 0; border-top: 1px solid var(--ui-line-2); }
.wa-tpl-sec + .wa-tpl-var { border-top: 0; }
.wa-tpl-var-top { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 8px; }
.wa-tpl-var-badge { flex: 0 0 auto; min-width: 44px; padding: 3px 8px; border-radius: 7px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; font-weight: 700; color: var(--ui-accent); background: rgba(var(--ui-accent-rgb), .10); border: 1px solid rgba(var(--ui-accent-rgb), .22); transition: background .15s var(--ui-ease), color .15s var(--ui-ease); }
.wa-tpl-var-badge.is-texto { font-family: inherit; }
.wa-tpl-var.is-foco .wa-tpl-var-badge { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.wa-tpl-var-ctx { min-width: 0; font-size: .8rem; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-var-ctx mark { padding: 0 3px; border-radius: 4px; background: rgba(var(--ui-accent-rgb), .18); color: var(--ui-accent); }
.wa-tpl-var-ctx em { font-style: normal; color: var(--ui-muted-2); }
.wa-tpl-var-ctrl { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 8px; align-items: center; }
.wa-tpl-var-ctrl.is-simples { grid-template-columns: minmax(0, 1fr); }
.wa-tpl-val { display: none; }
.wa-tpl-var-ctrl.is-livre .wa-tpl-val, .wa-tpl-var-ctrl.is-simples .wa-tpl-val { display: block; }
.wa-tpl-chip-val { display: flex; align-items: center; gap: 7px; min-width: 0; height: 100%; min-height: 41px; padding: 0 12px; border-radius: var(--ui-radius-sm); border: 1px solid rgba(var(--ui-ok-rgb), .28); background: rgba(var(--ui-ok-rgb), .07); color: var(--ui-ink); font-size: .86rem; font-weight: 600; }
.wa-tpl-chip-val > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-chip-val svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ui-ok); }
.wa-tpl-var-ctrl.is-livre .wa-tpl-chip-val { display: none; }
.wa-tpl-hint { margin-top: 6px; font-size: .72rem; line-height: 1.45; color: var(--ui-muted-2); }
.wa-tpl-none { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid rgba(var(--ui-ok-rgb), .28); border-radius: var(--ui-radius-sm); background: rgba(var(--ui-ok-rgb), .07); font-size: .84rem; color: var(--ui-ink-2); }
.wa-tpl-none svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ui-ok); }
.wa-tpl-error { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(var(--ui-danger-rgb), .35); border-radius: var(--ui-radius-sm); background: rgba(var(--ui-danger-rgb), .07); color: var(--ui-danger); font-size: .82rem; line-height: 1.5; }
.wa-tpl-error[hidden] { display: none; }

/* Rodape: situacao do preenchimento + acoes */
.wa-tpl-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--ui-muted); }
.wa-tpl-status > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-status svg { flex: 0 0 auto; width: 16px; height: 16px; }
.wa-tpl-status.is-pronto { color: var(--ui-ok); }
.wa-tpl-status.is-falta  { color: var(--ui-warn); }
.wa-tpl-actions { display: flex; gap: 10px; flex: 0 0 auto; }
#waTplSend svg { width: 15px; height: 15px; }

/* O celular (mockup do WhatsApp: a mensagem chega RECEBIDA da sua conta) */
.wa-tpl-phone { --tp-bg: #EFEAE2; --tp-dot: rgba(17,27,33,.05); --tp-bar: #008069; --tp-bubble: #FFFFFF; --tp-ink: #111B21; --tp-muted: #667781; --tp-link: #027EB5; --tp-day: #FFFFFF; --tp-media: #D1D7DB;
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 20px; background: var(--tp-bg); }
:root[data-theme="dark"] .wa-tpl-phone { --tp-bg: #0B141A; --tp-dot: rgba(233,237,239,.035); --tp-bar: #202C33; --tp-bubble: #202C33; --tp-ink: #E9EDEF; --tp-muted: #8696A0; --tp-link: #53BDEB; --tp-day: #182229; --tp-media: #2A3942; }
.wa-tpl-phone-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--tp-bar); color: #fff; }
.wa-tpl-phone-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22); font-size: .72rem; font-weight: 700; }
.wa-tpl-phone-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wa-tpl-phone-who strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-phone-who span { font-size: .68rem; opacity: .82; }
.wa-tpl-phone-chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 14px 12px 18px;
    background-color: var(--tp-bg); background-image: radial-gradient(var(--tp-dot) 1px, transparent 1px), radial-gradient(var(--tp-dot) 1px, transparent 1px); background-size: 22px 22px, 16px 16px; background-position: 0 0, 11px 8px; }
.wa-tpl-pv-vazio { margin: auto; font-size: .78rem; color: var(--tp-muted); }
.wa-tpl-pv-day { align-self: center; margin-bottom: 12px; padding: 4px 10px; border-radius: 7px; background: var(--tp-day); color: var(--tp-muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.wa-tpl-pv-msg { align-self: flex-start; width: 100%; max-width: 92%; }
.wa-tpl-pv-bubble { position: relative; padding: 6px 9px 5px; border-radius: 0 9px 9px 9px; background: var(--tp-bubble); color: var(--tp-ink); font-size: .82rem; line-height: 1.42; word-wrap: break-word; }
.wa-tpl-pv-bubble::before { content: ""; position: absolute; top: 0; left: -7px; border: 7px solid transparent; border-top-color: var(--tp-bubble); border-right-color: var(--tp-bubble); border-width: 0 7px 8px 0; }
.wa-tpl-pv-head { margin-bottom: 4px; font-weight: 700; }
.wa-tpl-pv-text strong { font-weight: 700; }
.wa-tpl-pv-foot { margin-top: 4px; font-size: .72rem; color: var(--tp-muted); }
.wa-tpl-pv-time { margin-top: 2px; text-align: right; font-size: .64rem; color: var(--tp-muted); }
.wa-tpl-pv-media { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1.91 / 1; margin: -2px -5px 6px; border-radius: 6px; overflow: hidden; background: var(--tp-media); color: var(--tp-muted); font-size: .74rem; font-weight: 600; }
.wa-tpl-pv-media.is-video { aspect-ratio: 16 / 9; background: #111B21; color: #fff; }
.wa-tpl-pv-media svg { width: 20px; height: 20px; }
.wa-tpl-pv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-tpl-pv-doc { display: flex; align-items: center; gap: 8px; margin: 0 -3px 6px; padding: 9px 10px; border-radius: 6px; background: var(--tp-media); font-size: .76rem; font-weight: 600; }
.wa-tpl-pv-doc span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tpl-pv-doc svg { flex: 0 0 auto; width: 18px; height: 18px; color: #E4574B; }
.wa-tpl-pv-var { border-radius: 4px; transition: background .15s ease; }
.wa-tpl-pv-var.is-exemplo { color: var(--tp-muted); font-style: italic; }
.wa-tpl-pv-var.is-vazio { padding: 0 4px; border: 1px dashed rgba(var(--ui-accent-rgb), .6); color: var(--ui-accent); font-size: .74rem; font-weight: 700; }
.wa-tpl-pv-var.is-foco { background: rgba(255, 196, 0, .38); outline: 2px solid rgba(255, 196, 0, .38); }
.wa-tpl-pv-btns { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.wa-tpl-pv-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--tp-bubble); color: var(--tp-link); font-size: .8rem; font-weight: 600; }
.wa-tpl-pv-btn svg { width: 15px; height: 15px; }


/* Janela estreita (o chat vive num iframe): uma coluna, celular em cima */
/* Coluna flexivel com filhos que NAO encolhem: na grade, o min-height:0 deixava
   a linha do celular menor que ele, e o celular vazava por cima dos campos. */
@media (max-width: 820px) {
    .wa-tpl-body { display: flex; flex-direction: column; height: auto; overflow-y: auto; }
    .wa-tpl-main, .wa-tpl-side { flex: none; min-height: auto; overflow: visible; }
    .wa-tpl-side { order: -1; padding: 14px 16px; border-left: 0; border-bottom: 1px solid var(--ui-line-2); }
    .wa-tpl-phone { flex: none; }
    /* Altura FIXA: com o celular acima da lista, a previa mudando de tamanho a
       cada cartao em foco empurrava a lista para baixo do cursor no meio do
       clique (o clique se perdia). */
    .wa-tpl-phone-chat { flex: none; height: 240px; }
}
@media (max-width: 560px) {
    .wa-tpl-modal .modal-dialog { margin: .5rem auto; padding: 0 8px; }
    .wa-tpl-main { padding: 16px; }
    .wa-tpl-list { grid-template-columns: minmax(0, 1fr); }
    .wa-tpl-var-ctrl { grid-template-columns: minmax(0, 1fr); }
    .wa-tpl-modal .ui-mfoot { flex-wrap: wrap; }
    .wa-tpl-actions { width: 100%; }
    .wa-tpl-actions .ui-btn { flex: 1; justify-content: center; }
}

/* ── Nota de capacidade dentro do menu de anexos ───────────── */
/* O componente vive no ui-kit (.ui-capnote). Aqui ele so troca para os tokens
   do chat: o menu de anexos tem paleta propria (--wa-*) e carrega DEPOIS do
   ui-kit, entao o cinza generico ficaria com pouco contraste sobre o fundo
   escuro dele. So a cor muda; a forma continua sendo a do componente. */
#waAttachMenu .ui-capnote { color: var(--wa-muted); border-top-color: var(--wa-line); }
#waAttachMenu .ui-capnote svg { color: var(--wa-muted); }

/* Foto que nao carrega: some e as iniciais aparecem (lista e cabecalho). */
.wa-chat-header-avatar img[hidden], .wa-chat-avatar img[hidden], .wa-av-init[hidden] { display: none; }
.wa-av-init { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wa-av-bg, var(--wa-avatar-bg)); color: #fff; font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
.wa-av-init--icon { background: var(--wa-avatar-bg); color: #fff; }
/* A mesma paleta de iniciais da lista (_avatarColors), por indice do hash do nome. */
.wa-av-c0 { --wa-av-bg: var(--ui-av-0, #5DA399); }
.wa-av-c1 { --wa-av-bg: var(--ui-av-1, var(--primary)); }
.wa-av-c2 { --wa-av-bg: var(--ui-av-2, #3b82f6); }
.wa-av-c3 { --wa-av-bg: var(--ui-av-3, #ef4444); }
.wa-av-c4 { --wa-av-bg: var(--ui-av-4, #8b5cf6); }
.wa-av-c5 { --wa-av-bg: var(--ui-av-5, #ec4899); }
.wa-av-c6 { --wa-av-bg: var(--ui-av-6, #14b8a6); }
.wa-av-c7 { --wa-av-bg: var(--ui-av-7, #f59e0b); }
.wa-av-c8 { --wa-av-bg: var(--ui-av-8, #6366f1); }
.wa-av-c9 { --wa-av-bg: var(--ui-av-9, #10b981); }
.wa-av-c10 { --wa-av-bg: var(--ui-av-10, #e11d48); }
.wa-av-c11 { --wa-av-bg: var(--ui-av-11, #0ea5e9); }