/* Canal OLX (issue #49): cartão em Canais, selo na lista, item do filtro e cartão do anúncio.
   A MARCA é o logo oficial da OLX Brasil (public/img/olx.svg: "o" roxo, "L" verde, "x" laranja),
   sempre sobre FICHA BRANCA — no tema escuro o "o" roxo some direto no fundo. O roxo (#6e0ad6 no
   claro, 8,2:1 sobre #f7f7f7; #b98aff no escuro, 6:1 sobre #252525) fica só como acento de borda
   e de texto; texto usa os tokens do tema. */

.canal-card.is-olx { --canal-cor: #6e0ad6; }
html.dark-theme .canal-card.is-olx { --canal-cor: #b98aff; }

:root { --olx-logo: url('/img/olx.svg?v=20260928a'); }

/* Ficha branca com o logo: tamanho vem do `background-size` de cada contexto. */
.olx-ficha {
    display: inline-block;
    flex: 0 0 auto;
    background-color: #fff;
    background-image: var(--olx-logo);
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Canais: o quadrado da marca no cabeçalho do cartão. */
.canal-card.is-olx .canal-marca {
    background-color: #fff;
    background-image: var(--olx-logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px auto;
    border-color: rgba(0, 0, 0, .12);
}

/* Canais: uma conta OLX na lista do cartão. */
.olx-conta-marca {
    width: 40px;
    height: 28px;
    border-radius: 8px;
    background-size: 24px auto;
}

.olx-conta .canal-btn.is-mini + .canal-btn.is-mini { margin-left: -2px; }

/* "Baixar o app" é link (<a>) com cara de botão: sem o sublinhado de link. */
.canal-card.is-olx a.canal-btn,
.canal-card.is-olx a.canal-btn:hover { text-decoration: none; }

/* Início: o 4º conector só aparece com o canal liberado; com ele a caixa vira 2×2
   (quatro colunas espremiam "Conectado · @conta" em três linhas). */
.dash-connector.is-olx { --dash-connector-cor: #6e0ad6; }
html.dark-theme .dash-connector.is-olx { --dash-connector-cor: #b98aff; }
.dash-connector.is-olx[hidden] { display: none !important; }
.dash-cards:has(> .dash-connector.is-olx:not([hidden])) { grid-template-columns: repeat(2, 1fr); }
.dash-connector.is-olx .dash-card-icon {
    width: 44px;
    background-color: #fff;
    background-image: var(--olx-logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Selos do canal (lista, cabeçalho da conversa, filtro, CRM): o <i> é o próprio logo. O tamanho
   sai do font-size do <i> (1,87 de largura para 1 de altura, a proporção do logo); cada lugar
   abaixo dá o seu, porque o selo tem tamanhos diferentes e cada regra base do painel usa !important. */
.icone-olx {
    display: inline-block;
    width: 1.87em;
    height: 1em;
    background: var(--olx-logo) center / contain no-repeat;
    vertical-align: middle;
}

.chat-item-corner-network.is-olx,
.chat-channel-badge.is-olx,
.crm-avatar-net.is-olx {
    background: #fff !important;
}

.chat-item-corner-network.is-olx i { font-size: 7px; }
.chat-channel-badge.is-olx i { font-size: 12px; }
.chat-channel-badge.crm-channel-badge.is-olx i { font-size: 8px; }
.crm-avatar-net.is-olx i { font-size: 6px; }

/* Lista de conversas: selinho redondo de 20 px sobre a foto. */
#chat-list .chat-item-corner-network.is-olx {
    box-shadow: 0 0 0 2px var(--wa-anel), inset 0 0 0 1px rgba(0, 0, 0, .14) !important;
}
#chat-list .chat-item-corner-network.is-olx i { font-size: 8px !important; }

/* Selo do cabeçalho da conversa (pílula de 28x24). */
.chat-channel-badge.is-olx {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .12);
}

/* Aviso "começo da conversa" no fim do histórico: a ficha branca vem do próprio logo. */
.chat-history-status i.icone-olx {
    font-size: 11px;
    width: 26px;
    height: 16px;
    border-radius: 5px;
    background-color: #fff;
    background-image: var(--olx-logo);
    background-size: 20px auto;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Filtro de canais: o item do menu e o ícone do botão quando "só OLX" está ligado. */
.chat-list-toolbar .menu-canais-item.is-olx i.icone-olx,
.chat-list-toolbar .filtro-canal-botao i.icone-olx {
    width: 30px;
    height: 18px;
    font-size: inherit;
    border-radius: 5px;
    background-color: #fff;
    background-image: var(--olx-logo);
    background-size: 21px auto;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Cartão do anúncio: em cima do campo de digitação, onde o olho está antes de responder.
   Em cima o anúncio; embaixo o mesmo produto na loja (é o link que a IA manda ao comprador). */
.olx-cartao {
    width: fit-content;
    min-width: min(420px, calc(100% - 32px));
    max-width: min(600px, calc(100% - 32px));
    margin: 8px 16px 12px;
    border-radius: 14px;
    background: var(--bg-surface);
    border: 1px solid color-mix(in srgb, #6e0ad6 28%, var(--border));
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.olx-anuncio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.olx-loja {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 10px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-primary);
}

.olx-loja > i {
    width: 16px;
    flex: 0 0 auto;
    text-align: center;
    color: #6e0ad6;
}

html.dark-theme .olx-loja > i { color: #b98aff; }

.olx-loja > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.olx-loja a {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}

.olx-loja a:hover { text-decoration: underline; }

.olx-loja.is-apagada,
.olx-loja.is-apagada > i,
html.dark-theme .olx-loja.is-apagada > i { color: var(--text-secondary); }

.olx-loja-btn {
    flex: 0 0 auto;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card, var(--bg-surface));
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.olx-loja-btn:hover { border-color: color-mix(in srgb, #6e0ad6 45%, var(--border)); }

/* Canais: instruções da IA do OLX, dentro do cartão OLX. */
.olx-ia-config {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, #6e0ad6 30%, var(--border));
}

.olx-ia-config-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.olx-ia-config-linha > i { color: var(--canal-cor, #6e0ad6); width: 16px; text-align: center; }
.olx-ia-config-linha > span { flex: 1 1 auto; min-width: 0; }
.olx-ia-config-linha.is-chave { cursor: pointer; font-weight: 600; }
.olx-ia-config-linha.is-chave input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--canal-cor, #6e0ad6); cursor: pointer; }

.olx-anuncio-foto {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 10px;
    object-fit: cover;
    background: color-mix(in srgb, #6e0ad6 10%, transparent);
}

.olx-anuncio-foto.is-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.olx-anuncio-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.olx-anuncio-rotulo {
    font-size: 11px;
    font-weight: 700;
    color: #6e0ad6;
}

html.dark-theme .olx-anuncio-rotulo { color: #b98aff; }

.olx-anuncio-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olx-anuncio-valores {
    font-size: 12px;
    color: var(--text-secondary);
}

.olx-anuncio-valores strong { color: var(--text-primary); }

.olx-anuncio-link {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-text);
    text-decoration: none;
    white-space: nowrap;
}

.olx-anuncio-link:hover { text-decoration: underline; }

/* No tema claro o verde de destaque dá 2,9:1 sobre a ficha branca: os links do cartão usam o verde escuro (5,5:1). */
html.light-theme .olx-anuncio-link,
html.light-theme .olx-loja a { color: #047857; }

@media (max-width: 600px) {
    .olx-cartao { min-width: 0; max-width: calc(100% - 20px); margin: 6px 10px 10px; }
    .olx-anuncio-titulo { max-width: 170px; }
    .olx-loja { flex-wrap: wrap; }
    .olx-loja > span { flex-basis: calc(100% - 24px); }
    .olx-loja > .olx-loja-btn { margin-left: 24px; }
}