/* Marca da empresa: logo e contatos nas telas do cliente (e a barra superior responsiva da área do cliente).
 * Nas outras páginas só é carregado quando a empresa configura a marca.
 * As variáveis --marca-* vêm do <style id="marca-cores"> (servidor) e, na tela do cliente, de appearance_store.js
 * (quando a pessoa escolhe outra cor para a barra, o logo certo continua aparecendo). */
.marca-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.marca-barra { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.marca-barra .marca-logo { width: auto; max-height: 36px; max-width: min(168px, 38vw); box-sizing: content-box; }
.marca-barra .marca-logo--claro { display: var(--marca-barra-claro, block); padding: var(--marca-barra-pad, 0); border-radius: 8px; background: var(--marca-barra-chip, transparent); }
.marca-barra .marca-logo--escuro { display: var(--marca-barra-escuro, none); }

/* Barra superior da área do cliente (página e widget). Nome e frase nunca encostam nos botões: cortam com reticências
 * e, quando não cabem na mesma linha (celular, widget, muitos botões), os botões descem para uma segunda linha.
 * Seletores com html:root/body para vencer cliente_workspace.css e cliente_canal.css, carregados depois. */
html:root body.client-workspace .client-topbar { flex-wrap: wrap; row-gap: 8px; }
html:root body.client-workspace .client-brand { flex: 1 1 180px; min-width: 0; }
html:root body.client-workspace .client-brand > div { min-width: 0; }
html:root body.client-workspace .client-brand strong,
html:root body.client-workspace .client-brand div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body.client-workspace .client-preferences { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; margin-left: auto; }
/* O logo mantém o tamanho (com o fundo branco, quando houver) e quem encolhe é o nome, com reticências. */
.marca-client-brand .marca-barra { flex: none; }
.marca-client-brand .marca-logo { max-width: min(168px, 38vw); }

/* Faixa das páginas de entrada, cadastro, política e erro */
html:root .ui-auth-brand { color: var(--marca-texto-barra, #ffffff); }
html:root .ui-auth-brand-icon { background: color-mix(in srgb, currentColor 10%, transparent); }
html .ui-auth-brand span.marca-barra { display: inline-flex; margin-top: 0; font-size: inherit; opacity: 1; }
.marca-auth-brand { min-width: 0; }
.marca-auth-brand > div { min-width: 0; }
.marca-auth-sub span { font-size: 11px !important; opacity: .8; }

/* Logo no cartão de entrada do chat (fundo do cartão: claro ou escuro conforme o tema) */
.marca-logo-card { display: flex; justify-content: center; margin: 0 auto 6px; }
.marca-logo-card .marca-logo { width: auto; max-height: 56px; max-width: min(220px, 100%); box-sizing: content-box; }
.marca-logo-card .marca-logo--escuro { display: none; }
body.dark-mode .marca-logo-card--duplo .marca-logo--claro { display: none; }
body.dark-mode .marca-logo-card--duplo .marca-logo--escuro { display: block; }
body.dark-mode .marca-logo-card:not(.marca-logo-card--duplo) .marca-logo--claro { padding: 6px 10px; border-radius: 10px; background: #ffffff; }

/* Outros canais de contato */
.marca-contato { display: grid; gap: 8px; margin-top: 4px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-input); color: var(--text-main); text-align: left; }
.marca-contato-titulo { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.marca-contato ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.marca-contato li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.marca-contato li i { flex: 0 0 auto; font-size: 14px; color: var(--accent-text); }
.marca-contato li span { overflow-wrap: anywhere; }
.marca-contato a { color: var(--accent-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.marca-contato a:hover { text-decoration: underline; }
.marca-contato a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
.marca-contato--auth { background: var(--bg-sidebar); }
.marca-contato--painel { margin: 0; padding: 0; border: 0; background: transparent; }
.marca-contato--painel li { min-height: 36px; }

@media (max-width: 680px) {
    .marca-client-brand .marca-logo { max-height: 28px; max-width: min(120px, 34vw); }
}
@media (max-width: 400px) {
    /* Telas bem estreitas (e o widget): botões de 36 px para caberem numa linha só. */
    html:root body.client-workspace .client-preferences { gap: 4px; }
    html:root body.client-workspace .client-nav-button { min-width: 36px; min-height: 36px; padding: 4px 7px; }
    html:root body.client-workspace .client-own-profile { width: 36px; padding: 4px; }
}
@media (max-width: 680px) {
    /* Celular e widget: abaixo de ~220 px para o nome, ele fica com a primeira linha e os botões descem. */
    html:root body.client-workspace .client-brand { flex-basis: 220px; }
}