/* ================================================================================================
   UNIPLIM-ADVANCED-AGENT-INTELLIGENCE-01 — Resumo da conversa (painel do contato no Atendimento) e
   Procedimentos/Papéis (Atendente de IA). Só tokens `--uni-*` (claro e escuro herdam dos tokens);
   nenhuma classe emprestada de outra feature (o esqueleto é desta superfície — DESIGN_GAPS G44).
   ================================================================================================ */

.brief { display: flex; flex-direction: column; gap: var(--uni-space-3); min-width: 0; }

.brief-muted { margin: 0; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.brief-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-2); }
.brief-status-meta { flex: 1 1 auto; min-width: 0; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.brief-skeleton { display: flex; flex-direction: column; gap: var(--uni-space-2); }
.brief-skeleton span {
    display: block;
    height: var(--uni-space-4);
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-neutral-soft);
    animation: brief-pulse 1.4s ease-in-out infinite;
}
.brief-skeleton span:nth-child(2) { width: 82%; }
.brief-skeleton span:nth-child(3) { width: 56%; }
@keyframes brief-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .brief-skeleton span { animation: none; } }

.brief-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--uni-space-2); }
.brief-empty-title { margin: 0; font-size: var(--uni-font-size-sm); color: var(--uni-color-text); }

.brief-summary { display: flex; flex-direction: column; gap: var(--uni-space-1); }
.brief-subject { margin: 0; font-size: var(--uni-font-size-sm); font-weight: 600; color: var(--uni-color-text); }
.brief-text { margin: 0; font-size: var(--uni-font-size-sm); color: var(--uni-color-text); overflow-wrap: anywhere; }

.brief-evidence {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-primary);
    cursor: pointer;
}
.brief-evidence:hover { color: var(--uni-color-primary-hover); text-decoration: underline; }
.brief-evidence:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; border-radius: var(--uni-radius-xs); }
.brief-evidence .crm-icon { width: var(--uni-space-4); height: var(--uni-space-4); }

.brief-next {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding: var(--uni-space-3);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
}
.brief-next p { margin: 0; font-size: var(--uni-font-size-sm); color: var(--uni-color-text); }
.brief-next small { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.brief-label {
    display: block;
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    color: var(--uni-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.brief-group { display: flex; flex-direction: column; gap: var(--uni-space-2); }

.brief-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.brief-item {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-2);
    padding: var(--uni-space-2) 0;
    border-top: 1px solid var(--uni-color-border);
}
.brief-item:first-child { border-top: 0; }
.brief-item.is-conflict { border-left: 3px solid var(--uni-color-warning); padding-left: var(--uni-space-2); }
.brief-item-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--uni-space-1); }
.brief-item-text { font-size: var(--uni-font-size-sm); color: var(--uni-color-text); overflow-wrap: anywhere; }
.brief-item-copy small { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }
.brief-attention { color: var(--uni-color-warning); }

.brief-suggestions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uni-space-2); }
.brief-suggestions li { display: flex; align-items: flex-start; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); color: var(--uni-color-text); }
.brief-suggestions .crm-icon { flex: 0 0 auto; width: var(--uni-space-4); height: var(--uni-space-4); color: var(--uni-color-info); }

.brief-progress { display: flex; flex-direction: column; gap: var(--uni-space-1); }
.brief-progress small { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.brief-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uni-space-1); }
.brief-checklist li { display: flex; align-items: center; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }
.brief-checklist li.is-known { color: var(--uni-color-text); }
.brief-checklist .crm-icon { flex: 0 0 auto; width: var(--uni-space-4); height: var(--uni-space-4); }
.brief-checklist li.is-known .crm-icon { color: var(--uni-color-success); }

/* ── Atendente de IA → Procedimentos ─────────────────────────────────────────────────────────── */

.aiproc-roles { display: flex; flex-wrap: wrap; gap: var(--uni-space-2); }

.aiproc-template-list { display: flex; flex-direction: column; gap: var(--uni-space-2); }
.aiproc-template {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    width: 100%;
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.aiproc-template:hover { border-color: var(--uni-color-border-strong); }
.aiproc-template.is-selected { border-color: var(--uni-color-primary); outline: 1px solid var(--uni-color-primary); }
.aiproc-template:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
.aiproc-template strong { font-size: var(--uni-font-size-sm); }
.aiproc-template small { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.aiproc-editor { display: flex; flex-direction: column; gap: var(--uni-space-5); }
/* UNIPLIM-SOLUTION-CONVERGENCE-01 — F4/F9: "O que reunir" usa a primitiva UniEditGrid (uni-components.css). Aqui só as
   colunas e a coluna "Obrigatória": no desktop o rótulo vem do cabeçalho e o checkbox fica centralizado na coluna;
   no celular o rótulo volta ao lado do checkbox, na base do cartão. */
.aiproc-info-grid { --uni-edit-grid-cols: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(140px, 0.8fr) 88px 40px; }
.aiproc-info-grid .uni-edit-grid-head > :nth-child(4) { text-align: center; }
.aiproc-info-grid .uni-edit-grid-inline { justify-content: center; }
.aiproc-pending-list { margin: 2px 0 0; padding-left: 1.1em; display: grid; gap: 2px; font-size: var(--uni-font-size-xs); color: var(--uni-color-text); }
@media (min-width: 768px) {
    .aiproc-info-grid .aiproc-required-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) {
    .aiproc-info-grid .uni-edit-grid-inline { justify-content: flex-start; }
}
.aiproc-check { display: inline-flex; align-items: center; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); color: var(--uni-color-text); }
.aiproc-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--uni-space-2); }
.aiproc-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--uni-space-3); }
.aiproc-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uni-space-1); font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }

@media (max-width: 767px) {
    .aiproc-footer { justify-content: stretch; }
    .aiproc-footer > * { flex: 1 1 auto; }
}

.aiagent-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--uni-space-4); }
.aiagent-block-head > div { min-width: 0; }
@media (max-width: 767px) {
    .aiagent-block-head { flex-direction: column; align-items: stretch; }
}

/* Título do bloco no desktop (mesma anatomia dos títulos irmãos do painel); no celular o título vem do <summary>. */
.brief-heading {
    margin: 0;
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
    font-size: var(--uni-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--uni-color-text-muted);
}
@media (max-width: 1023px) { .brief-heading { display: none; } }