/* API OFICIAL DO WHATSAPP (21/10/2026, js/painel/apiOficial.js): o cartão em Canais, os diálogos de
   modelos e de custo, e a faixa da janela de 24 h na conversa. Mesmo desenho dos cartões de canal
   (b5-responsivo-e-canais.css); daqui só sai o que é da API oficial (`.wao-*`). */

.canal-card.is-wa-oficial { --canal-cor: #00a884; }

.canal-marca.is-wa-oficial { position: relative; }
.canal-marca.is-wa-oficial::after {
    content: "\f058";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: -5px;
    bottom: -5px;
    font-size: 13px;
    line-height: 1;
    color: #0866ff;
    background: var(--bg-card);
    border-radius: 50%;
    padding: 1px;
}

/* Com a API oficial ligada, o cartão do QR fica em espera: sem botões que religariam o Chromium. */
.canal-card.wao-qr-fora .canal-acoes,
.canal-card.wao-qr-fora .canal-protecao { display: none; }
.canal-card.wao-qr-fora { opacity: .78; }

.wao-vantagens {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.wao-vantagens li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-main);
}

.wao-vantagens i { color: var(--canal-cor); margin-top: 2px; }

/* Aviso da conexão ligada (token vencendo, renovação que falhou): o mesmo âmbar do "religar". */
.wao-alerta {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    /* Em cima, a margem dos dados (16 px); embaixo, a mesma, senão os botões encostam no aviso. */
    margin: 0 0 16px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .08);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-main);
}

.wao-alerta i { color: #f59e0b; margin-top: 2px; }
:root.light-theme .wao-alerta i { color: #8a4d05; }

.wao-religar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .08);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    color: var(--text-main);
}

.wao-avancado {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-surface);
}

.wao-avancado > summary {
    cursor: pointer;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    list-style: none;
    display: flex;
    gap: 9px;
    align-items: center;
}

.wao-avancado > summary::-webkit-details-marker { display: none; }
.wao-avancado > summary i { color: var(--text-secondary); }
.wao-avancado[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.wao-avancado .wao-form { padding: 14px; }

.wao-form {
    display: grid;
    gap: 12px;
    text-align: left;
}

.wao-form > strong { font-size: 14px; color: var(--text-main); }

.wao-form label {
    display: grid;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.wao-form input,
.wao-form select,
.wao-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-card);
    color: var(--text-main);
    font: 500 13.5px/1.4 inherit;
    font-family: inherit;
}

.wao-form textarea { resize: vertical; min-height: 84px; }

.wao-form input:focus,
.wao-form select:focus,
.wao-form textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--canal-cor, #00a884) 55%, transparent);
    outline-offset: 1px;
    border-color: transparent;
}

.wao-form .canal-btn { justify-self: start; }

/* Os campos das variáveis do modelo moram num div só: sem grade própria, o gap do formulário não chegava neles. */
#wao-env-variaveis { display: grid; gap: 12px; }
#wao-env-variaveis:empty { display: none; }

.wao-novo {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    --canal-cor: #00a884;
}

.wao-ajuda {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: left;
}

.wao-vazio {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0;
    text-align: left;
}

.wao-modelos {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    text-align: left;
}

.wao-modelo {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-surface);
    padding: 10px 12px;
}

.wao-modelo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--text-main);
}

.wao-modelo-topo strong { overflow-wrap: anywhere; }

.wao-modelo-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.wao-modelo-texto {
    font-size: 12.5px;
    color: var(--text-main);
    margin-top: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wao-pilula {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.wao-pilula.is-approved { color: #15803d; border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .10); }
.wao-pilula.is-pending,
.wao-pilula.is-in_appeal { color: #b45309; border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .10); }
.wao-pilula.is-rejected,
.wao-pilula.is-disabled,
.wao-pilula.is-paused { color: #b91c1c; border-color: rgba(239, 68, 68, .32); background: rgba(239, 68, 68, .08); }
html.dark-theme .wao-pilula.is-approved { color: #4ade80; }
html.dark-theme .wao-pilula.is-pending,
html.dark-theme .wao-pilula.is-in_appeal { color: #fbbf24; }
html.dark-theme .wao-pilula.is-rejected,
html.dark-theme .wao-pilula.is-disabled,
html.dark-theme .wao-pilula.is-paused { color: #f87171; }

.wao-link-perigo {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: 600 12px/1.4 inherit;
    font-family: inherit;
    color: #b91c1c;
    cursor: pointer;
}

html.dark-theme .wao-link-perigo { color: #f87171; }
.wao-link-perigo:disabled { opacity: .5; cursor: default; }

.wao-tabela-rolagem { overflow-x: auto; }

.wao-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-main);
    text-align: left;
}

.wao-tabela th,
.wao-tabela td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.wao-tabela th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
}

.wao-total {
    margin: 14px 0 6px;
    font-size: 14px;
    color: var(--text-main);
    text-align: left;
}

.wao-previa {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, #00a884 10%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, #00a884 25%, var(--border));
    font-size: 13px;
    color: var(--text-main);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: 40px;
}

/* A faixa da conversa: fora da janela de 24 h a Meta só aceita modelo aprovado. */
.wa-oficial-janela {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid rgba(245, 158, 11, .35);
    background: color-mix(in srgb, #f59e0b 9%, var(--bg-card));
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-main);
}

.wa-oficial-janela[hidden] { display: none; }
.wa-oficial-janela > i { color: #b45309; }
html.dark-theme .wa-oficial-janela > i { color: #fbbf24; }
.wa-oficial-janela [data-wao-texto] { flex: 1; min-width: 0; }
.wa-oficial-janela .canal-btn { --canal-cor: #00a884; flex: 0 0 auto; }

@media (max-width: 600px) {
    .wa-oficial-janela { flex-wrap: wrap; }
    .wa-oficial-janela .canal-btn { width: 100%; }
}