/* UNICHAT-MVP-UX-PRODUCT-EXPERIENCE-COMPLETION-01 (Fase A) — Central de Ajuda.

   UNICHAT-RESIDUAL-PRODUCT-SURFACE-VISUAL-COMPLETION-01 (RS-08..RS-11) — convergência visual.

   O CONTEÚDO e as FUNCIONALIDADES desta superfície estão na Preserve List do proprietário (§5.10:
   "Central de Ajuda: categorizada, com busca, honesta sobre suporte"). Nada aqui muda o que a
   página faz. O que muda é como ela se parece, e o motivo é medível:

   - a folha declarava OITO tamanhos de fonte (11.5px, 12.5px, 13px, 13.5px, 14px, 15px, 18px,
     20px), e quatro deles não existem na escala do contrato (VL-01). Agora todos vêm de token;
   - a busca era caixa própria (`.help-search` completa) em vez da primitive `.uni-search` (VL-14);
   - os raios, espaçamentos, bordas e sombras eram literais ou tokens `--crm-*` com fallback em
     hexadecimal. Os fallbacks funcionavam nos dois temas, então NÃO havia defeito de tema escuro
     aqui — mas cada literal é uma decisão que deixa de acompanhar o contrato quando ele muda.

   `.help-search` deixa de ser uma ficha e vira apenas o posicionamento da primitive nesta página:
   `.uni-search` nasce com `flex: 1 1 auto` para viver em barra de ferramentas, e aqui ela é um
   bloco solto. */

.help-page .help-section {
    margin-top: var(--uni-space-5);
}

.help-page .help-section > h2 {
    font-size: var(--uni-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--uni-space-3);
    color: var(--uni-color-text);
}

.help-muted {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    line-height: 1.55;
}

/* ---- busca (VL-14: a ficha é `.uni-search`; aqui só o lugar dela) ---- */
.help-search {
    flex: 0 1 auto;
    max-width: 620px;
    margin-top: var(--uni-space-2);
}

/* ---- primeiros passos ---- */
.help-getting-started {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-4);
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-neutral-soft);
}

.help-getting-started strong { display: block; font-size: var(--uni-font-size-md); }
.help-getting-started span { font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }

/* ---- grade de categorias ---- */
.help-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--uni-space-3);
}

.help-category-card {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.help-category-card:hover {
    border-color: var(--uni-color-primary);
    box-shadow: var(--uni-shadow-sm);
}

/* VL-44 — o cartão é o alvo do clique, então o realce de foco é dele, não de um filho. */
.help-category-card:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.help-category-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
}

.help-category-card strong { font-size: var(--uni-font-size-md); }
.help-category-desc { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); line-height: 1.5; }
.help-category-count { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); margin-top: 2px; }

/* ---- listas de artigos ---- */
.help-article-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.help-article-list a {
    display: block;
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    text-decoration: none;
    color: inherit;
}

.help-article-list a:hover { border-color: var(--uni-color-primary); }

.help-article-list a:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.help-article-list strong { display: block; font-size: var(--uni-font-size-sm); }
.help-article-list span { display: block; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); margin-top: 2px; }

/* ---- artigo ---- */
.help-article { max-width: 720px; }

/* UNICHAT-CUT-6 (F-18, Owner smoke) — página de leitura: voltar de verdade, card com largura de leitura e ritmo
   tipográfico do Uni. Antes o corpo caía solto na página, com o título repetido e um breadcrumb minúsculo. */
.help-back {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    margin: 0 0 var(--uni-space-3);
    padding: 6px 10px 6px 6px;
    border-radius: var(--uni-radius-md);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--uni-color-text-muted);
    text-decoration: none;
}
.help-back .crm-icon { width: 18px; height: 18px; }
.help-back:hover { color: var(--uni-color-primary); background: var(--uni-color-neutral-soft); }
.help-back:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
@media (max-width: 1023px) { .help-back { display: none; } }

.help-reading { max-width: 760px; }
.help-reading-card {
    padding: var(--uni-space-6) var(--uni-space-6);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-sm, none);
}
@media (max-width: 767px) { .help-reading-card { padding: var(--uni-space-4); } }
.help-reading-card .help-article-body { font-size: var(--uni-font-size-md); line-height: 1.7; }
.help-reading-card .help-article-body h2,
.help-reading-card .help-article-body h3 {
    margin: var(--uni-space-5) 0 var(--uni-space-2);
    font-weight: 700;
    color: var(--uni-color-text);
    line-height: 1.3;
}
.help-reading-card .help-article-body h2 { font-size: var(--uni-font-size-lg); }
.help-reading-card .help-article-body h3 { font-size: var(--uni-font-size-md); }
.help-reading-card .help-article-body > :first-child { margin-top: 0; }
.help-reading-card .help-article-body p { margin: 0 0 var(--uni-space-3); }
.help-reading-card .help-article-body ol,
.help-reading-card .help-article-body ul { margin: 0 0 var(--uni-space-3); padding-left: 24px; }
.help-reading-card .help-article-body li { margin-bottom: var(--uni-space-2); }
.help-reading-card .help-article-body strong { font-weight: 600; }
.help-reading-card .help-official-note {
    margin: var(--uni-space-4) 0 var(--uni-space-3);
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}
.help-reading-nav {
    margin: var(--uni-space-3) 0 0;
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}
.help-reading-nav a { color: var(--uni-color-primary); text-decoration: none; font-weight: 600; }
.help-reading-nav a:hover { text-decoration: underline; }
.help-skeleton-line {
    height: 14px;
    margin: 0 0 var(--uni-space-3);
    border-radius: var(--uni-radius-sm);
    background: linear-gradient(90deg, var(--uni-color-neutral-soft) 25%, var(--uni-color-border) 50%, var(--uni-color-neutral-soft) 75%);
    background-size: 200% 100%;
    animation: help-skeleton 1.2s ease-in-out infinite;
}
@keyframes help-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .help-skeleton-line { animation: none; } }

.help-article > h2 {
    font-size: var(--uni-font-size-xl);
    font-weight: 700;
    margin: var(--uni-space-1) 0 var(--uni-space-3);
}

.help-article-body { font-size: var(--uni-font-size-md); line-height: 1.65; color: var(--uni-color-text); }
.help-article-body p { margin: 0 0 var(--uni-space-3); }
.help-article-body ul,
.help-article-body ol { margin: 0 0 var(--uni-space-3); padding-left: 22px; }
.help-article-body li { margin-bottom: var(--uni-space-1); }

.help-article-body code {
    background: var(--uni-color-neutral-soft);
    padding: 1px 5px;
    border-radius: var(--uni-radius-sm);
    font-size: var(--uni-font-size-xs);
}

.help-related { margin-top: var(--uni-space-5); }

.help-related h3,
.help-videos h3 {
    font-size: var(--uni-font-size-sm);
    font-weight: 700;
    margin: 0 0 var(--uni-space-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--uni-color-text-muted);
}

.help-videos ul { margin: 0; padding-left: 18px; font-size: var(--uni-font-size-sm); }

/* ---- suporte ---- */
.help-support-card {
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    font-size: var(--uni-font-size-sm);
    line-height: 1.6;
}

.help-support-actions {
    display: flex;
    gap: var(--uni-space-2);
    flex-wrap: wrap;
    margin: var(--uni-space-3) 0;
}

@media (max-width: 767px) {
    .help-getting-started { flex-direction: column; align-items: flex-start; }
    .help-category-grid { grid-template-columns: 1fr; }
    /* A busca é bloco solto nesta página: no celular ela ocupa a largura toda, senão sobra
       espaço morto à direita de um campo que é o principal caminho de entrada da superfície. */
    .help-search { max-width: none; width: 100%; }
}

/* ==========================================================================================
   UNICHAT-GUIDED-ONBOARDING-HELP-SUPPORT-01 — D-41: assistente, feedback, guias rápidos, suporte.
   Nenhuma ficha nova: o assistente reusa a anatomia do "Testar conhecimento" (campo + botão na
   mesma linha, resultado em superfície), as fontes reusam `.help-article-list`, os guias reusam a
   linha de artigo com o ícone de categoria, e o feedback é uma linha de botões fantasma.
   ========================================================================================== */

/* ---- assistente ("Uni") ----
   Revisão local do Owner (2026-09-18): o card do assistente é uma CONVERSA de alto padrão —
   cabeçalho com o rosto do Uni, linha do tempo com o mascote como ornamento de fundo (bem
   transparente), bolhas com sombra suave, composer em pílula com o botão azul do Atendimento.
   Na aba Assistente (`.help-assistant--fill`) o card ocupa a altura disponível e a página não
   rola; nos artigos ele continua um bloco de altura própria. ---- */
.help-assistant {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-sm);
    overflow: hidden;
}

/* Aba Assistente: o card estica até a base da página e a conversa rola por dentro. */
.help-assistant--fill {
    flex: 1 1 auto;
    min-height: 0;
}

.help-page--assistant {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-page--assistant .help-tab-panel--assistant {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

/* Cabeçalho da conversa: avatar do Uni + nome + status factual, no mesmo eixo (8A). */
.help-assistant-head {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
    background: var(--uni-color-surface);
}

/* O retrato do Uni (img/brand/uni-assistant.webp, fundo TRANSPARENTE — escolha do Owner) sobre um
   círculo azul-claro suave, com anel fino; enquadramento afastado (capacete, orelhas e antena). */
.help-assistant-persona {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #eaf5ff 0%, #d3e8ff 100%);
    box-shadow: 0 0 0 1px rgba(22, 135, 255, 0.28);
}

:root[data-crm-theme="dark"] .help-assistant-persona,
:root[data-crm-theme="dark"] .help-msg-avatar {
    background: radial-gradient(circle at 50% 30%, #1b3a66 0%, #10243f 100%);
}

.help-assistant-persona img,
.help-msg-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    /* Menos "close": o retrato aparece um pouco afastado, com o capacete inteiro e as orelhas. */
    transform: scale(0.98);
}

.help-assistant-head-copy { min-width: 0; }

.help-page .help-tab-panel .help-assistant-head h2,
.help-assistant-head h2 {
    margin: 0;
    font-size: var(--uni-font-size-md);
    font-weight: 700;
    line-height: 1.25;
    color: var(--uni-color-text);
}

.help-assistant-head .help-muted {
    margin: 2px 0 0;
    font-size: var(--uni-font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 8B — linha do tempo: cronológica, rolagem própria, composer estável embaixo ---- */
.help-assistant-body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg, var(--uni-color-app-bg) 0%, var(--uni-color-surface) 100%);
}

.help-assistant--fill .help-assistant-body {
    flex: 1 1 auto;
}

.help-assistant-thread {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    /* Altura FIXA fora da aba (bloco nos artigos): o composer nunca desce quando a conversa cresce. */
    height: clamp(280px, 60vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--uni-space-4) var(--uni-space-4) var(--uni-space-3);
    scroll-behavior: smooth;
}

.help-assistant--fill .help-assistant-thread {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* Ornamento: o Uni ao fundo, à direita e embaixo da área da conversa, bem transparente; fica
   parado atrás da rolagem (é irmão do elemento que rola) e nunca captura clique. */
.help-assistant-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    /* O Uni de corpo inteiro (uni-assistant-backdrop.webp, fundo transparente — decisão do Owner: o
       retrato fica só nos avatares), em transparência baixa: ornamento, não conteúdo. */
    opacity: 0.11;
}

:root[data-crm-theme="dark"] .help-assistant-backdrop { opacity: 0.09; }

.help-assistant-backdrop::after {
    content: "";
    position: absolute;
    right: -6%;
    bottom: -4%;
    width: min(52vh, 420px);
    height: min(52vh, 420px);
    background: url("/img/brand/uni-assistant-backdrop.webp") center / contain no-repeat;
}

.help-msg {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: var(--uni-space-2);
    max-width: 100%;
}

.help-msg-user { justify-content: flex-end; }
.help-msg-assistant { justify-content: flex-start; align-items: flex-start; }

.help-msg-bubble {
    min-width: 0;
    padding: var(--uni-space-2) var(--uni-space-3);
    border-radius: var(--uni-radius-lg);
    font-size: var(--uni-font-size-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Você: à direita, azul do produto com texto claro. */
.help-msg-user .help-msg-bubble {
    max-width: min(72%, 560px);
    background: var(--uni-color-primary);
    color: var(--crm-color-on-primary);
    border-bottom-right-radius: var(--uni-radius-sm);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    white-space: pre-wrap;
}

/* Uni: à esquerda, com o rosto; a bolha é a ficha da resposta (fontes, feedback, próximo passo). */
.help-msg-assistant .help-msg-bubble {
    max-width: min(88%, 720px);
    border-bottom-left-radius: var(--uni-radius-sm);
}

.help-msg-plain {
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    border: 1px solid var(--uni-color-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.help-msg-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #eaf5ff 0%, #d3e8ff 100%);
    box-shadow: 0 0 0 1px rgba(22, 135, 255, 0.28);
}

/* Saudação chegando: entra deslizando de baixo, uma vez. */
.help-msg-greeting { animation: help-msg-in .32s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes help-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* "Escrevendo": três pontos na bolha do Uni. */
.help-msg-typing {
    display: inline-flex;
    gap: 4px;
    padding: var(--uni-space-3) var(--uni-space-3);
    background: var(--uni-color-surface);
    border: 1px solid var(--uni-color-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.help-msg-typing span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--uni-color-text-muted);
    animation: help-typing 1.2s ease-in-out infinite;
}

.help-msg-typing span:nth-child(2) { animation-delay: .15s; }
.help-msg-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes help-typing {
    0%, 80%, 100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .help-msg-typing span { animation: none; opacity: .7; }
    .help-msg-greeting { animation: none; }
    .help-assistant-thread { scroll-behavior: auto; }
}

/* ---- 8C — composer em pílula na base do card; o botão de enviar é o azul do Atendimento ---- */
.help-assistant-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--uni-space-2);
    margin: 0;
    padding: var(--uni-space-3) var(--uni-space-4);
    border-top: 1px solid var(--uni-color-border);
    background: var(--uni-color-surface);
}

.help-assistant-composer-field {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    padding: 3px 3px 3px var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: 20px;
    background: var(--uni-color-app-bg);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.help-assistant-composer-field:focus-within {
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px var(--uni-color-primary-soft);
    background: var(--uni-color-surface);
}

.help-assistant-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 30px;
    max-height: 148px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--uni-color-text);
    font: inherit;
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
    resize: none;
    outline: none;
}

.help-assistant-input::placeholder { color: var(--uni-color-text-muted); }

/* O botão de enviar do Atendimento: redondo, azul, ícone 16px — com a altura da pílula (38px). */
.help-assistant-send {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: var(--uni-color-primary);
    color: var(--crm-color-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s ease, opacity .12s ease;
}

.help-assistant-send .crm-icon { width: 16px; height: 16px; }

.help-assistant-send:hover:not(:disabled) { background: var(--crm-color-primary-hover); }

.help-assistant-send:disabled { cursor: not-allowed; opacity: .45; }

.help-assistant-send:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.help-assistant-unavailable {
    margin: var(--uni-space-4);
    padding: var(--uni-space-3);
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

/* 8B — `.help-assistant-exchange/-question/-you` (pergunta em linha + resposta solta) saíram: a troca
   agora é par de bolhas na linha do tempo (`.help-msg-*`, acima). A ficha da resposta continua. */
/* A ficha da resposta é a mesma bolha branca do Uni (borda, sombra suave) com um filete à esquerda
   que diz o estado: azul = respondeu, âmbar = não encontrou, vermelho = Base indisponível. */
.help-assistant-answer {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3) var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-left: 3px solid var(--uni-color-primary);
    border-radius: var(--uni-radius-lg);
    border-bottom-left-radius: var(--uni-radius-sm);
    background: var(--uni-color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.help-assistant-answer.is-noanswer { border-left-color: var(--uni-color-warning); }

/* CUT 5G / F-03 — Base Oficial indisponível: estado, não resposta. Tom de atenção e ações à mão. */
.help-assistant-answer.is-unavailable {
    border-left-color: var(--uni-color-danger);
    background: var(--uni-color-danger-soft);
}

.help-assistant-answer.is-unavailable .help-support-actions { margin: 0; }

.help-assistant-answer .help-article-body { font-size: var(--uni-font-size-sm); }
.help-assistant-answer .help-article-body p:last-child { margin-bottom: 0; }

.help-assistant-refs h3 {
    font-size: var(--uni-font-size-xs);
    font-weight: 700;
    margin: 0 0 var(--uni-space-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--uni-color-text-muted);
}

.help-assistant-ref-static {
    display: block;
    padding: var(--uni-space-3);
    border: 1px dashed var(--uni-color-border);
    border-radius: var(--uni-radius-md);
}

.help-assistant-ref-static strong { display: block; font-size: var(--uni-font-size-sm); }
.help-assistant-ref-static span { display: block; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); margin-top: 2px; }

.help-assistant-next .help-muted { margin: 0 0 var(--uni-space-2); }
.help-assistant-next .help-support-actions { margin: 0; }

/* ---- "Isso resolveu?" ---- */
.help-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uni-space-2) var(--uni-space-3);
    margin-top: var(--uni-space-3);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

.help-feedback-actions { display: flex; gap: var(--uni-space-1); }
.help-feedback-done { color: var(--uni-color-text-muted); }

.help-feedback-comment {
    display: flex;
    gap: var(--uni-space-2);
    flex: 1 1 100%;
    margin: 0;
}

.help-feedback-comment .app-control { flex: 1 1 auto; min-width: 0; }

.help-feedback-error {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-danger);
}

.help-article-more {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    margin-top: var(--uni-space-4);
}

.help-article-more h3 {
    font-size: var(--uni-font-size-sm);
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--uni-color-text-muted);
}

/* ---- guias rápidos (tours) ---- */
.help-tour-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.help-tour-item {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
}

.help-tour-copy { flex: 1 1 auto; min-width: 0; }
.help-tour-copy strong { display: block; font-size: var(--uni-font-size-sm); }
.help-tour-copy span { display: block; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); margin-top: 2px; }

/* ---- suporte: mensagem preparada ---- */
/* HELP CENTER CUSTOMER UX CORRECTIVE (R1 PRE-PRODUCTION GATE) — confirmação do canal em UniModal Sm:
   duas linhas (canal, referência) na grade dt/dd do produto, nota curta e a mensagem recolhida. */
.help-support-confirm { display: grid; gap: var(--uni-space-3); margin: 0; }
.help-support-confirm-row { display: grid; grid-template-columns: 112px 1fr; gap: var(--uni-space-3); align-items: start; }
.help-support-confirm dt { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--uni-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--uni-color-text-muted); line-height: 22px; }
.help-support-confirm dt .crm-icon { width: 16px; height: 16px; color: var(--uni-color-primary); }
.help-support-confirm dd { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--uni-font-size-sm); line-height: 22px; min-width: 0; overflow-wrap: anywhere; }
.help-support-confirm dd strong { font-weight: 600; color: var(--uni-color-text); }
.help-support-confirm-dest { color: var(--uni-color-text-muted); }
.help-support-confirm dd code { align-self: flex-start; padding: 2px 8px; border-radius: var(--uni-radius-sm); background: var(--uni-color-neutral-soft); font-size: var(--uni-font-size-sm); font-weight: 600; letter-spacing: 0.02em; }
.help-support-confirm-note { margin: var(--uni-space-4) 0 0; font-size: var(--uni-font-size-sm); line-height: 1.55; color: var(--uni-color-text-muted); }
.help-support-modal .help-support-preview { margin-top: var(--uni-space-3); }
@media (max-width: 767px) {
    .help-support-confirm-row { grid-template-columns: 1fr; gap: 4px; }
    /* rodapé empilhado do UniModal no celular: os dois CTAs (o link "Abrir" e o botão) ocupam a largura toda */
    .help-support-modal .uni-modal-footer .app-button { align-self: stretch; width: 100%; }
}
.help-support-preview { margin-top: var(--uni-space-2); }
.help-support-preview summary { cursor: pointer; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }
.help-support-preview pre {
    margin: var(--uni-space-2) 0 0;
    padding: var(--uni-space-3);
    white-space: pre-wrap;
    font: inherit;
    font-size: var(--uni-font-size-xs);
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-neutral-soft);
}

.help-support-card code {
    background: var(--uni-color-neutral-soft);
    padding: 1px 6px;
    border-radius: var(--uni-radius-sm);
    font-weight: 700;
}

@media (max-width: 767px) {
    .help-assistant-thread { height: clamp(240px, 52vh, 520px); }
    .help-assistant--fill .help-assistant-thread { height: auto; }
    .help-assistant-backdrop::after { width: 220px; height: 220px; }
    .help-tour-item { flex-wrap: wrap; }
    .help-tour-item .app-button { flex: 1 1 100%; }
    .help-feedback-comment { flex-direction: column; }
}

/* CUT 5G (corretivo Owner AI Acceptance) — Central em abas: os h2 de secao dentro de uma aba (Categorias, Guias
   rapidos) e os titulos dos documentos da Base Oficial seguem a escala de secao da Help, nao o h2 cru do navegador. */
.help-page .help-tab-panel h2,
.help-page .help-tours h2,
.help-article-body h2 {
    font-size: var(--uni-font-size-lg);
    font-weight: 700;
    margin: var(--uni-space-5) 0 var(--uni-space-3);
    color: var(--uni-color-text);
}
.help-article-body h3 { font-size: var(--uni-font-size-md); font-weight: 700; margin: var(--uni-space-4) 0 var(--uni-space-2); }
.help-page .help-tabrail { margin-bottom: var(--uni-space-4); }
.help-page .help-tab-panel > .help-search { margin-bottom: var(--uni-space-4); }
.help-official-note { margin-top: var(--uni-space-4); }
.help-tours { margin-top: var(--uni-space-6); }