/* ==========================================================================
   INGRA Cartórios: Agentes de IA. Vitrine (cartões e painel de detalhes, no molde do INGRA Jurídico),
   especialistas por atribuição, Sentinela dos protocolos, Solicitar agente e atalho do topo.
   Cores de superfície e de texto pelos tokens de ingra-tema.css (tema escuro).
   ========================================================================== */

/* ---------- Cartão clicável e painel de detalhes ---------- */
.ag-cartao-abrir { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.ag-cartao-abrir:focus-visible { outline: 2px solid var(--ag-cor, #2dd4ea); outline-offset: 4px; border-radius: 14px; }
.ag-cartao-nome { display: flex; flex-direction: column; min-width: 0; }
.ag-cartao-abrir:hover h3 { color: var(--ag-cor, #006699); }
.ag-slogan { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: color-mix(in srgb, var(--ag-cor, #006699) 70%, var(--ig-text, #0f2a3d)); }
.ag-conhecer {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ig-link, #006699);
}
.ag-conhecer:hover { color: var(--ag-cor, #006699); }

/* Acima do menu lateral (30) e abaixo dos modais do Filament (40), para o modal de contratação abrir por cima. */
.ag-gaveta-raiz { position: fixed; inset: 0; z-index: 35; display: flex; justify-content: flex-end; }
body:has(.ag-gaveta-raiz) .ig-ajuda, body:has(.ag-gaveta-raiz) .ig-pwa-oferta { display: none; }
.ag-gaveta-fundo { position: absolute; inset: 0; background: rgba(1, 20, 36, .45); backdrop-filter: blur(2px); animation: ag-gaveta-fade .2s ease-out; }
.ag-gaveta {
    position: relative; display: flex; flex-direction: column; width: min(560px, 100vw); height: 100%; overflow: hidden;
    background: var(--ig-surface, #fff); box-shadow: -24px 0 60px rgba(1, 20, 36, .25); animation: ag-gaveta-entra .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ag-gaveta-entra { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ag-gaveta-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ag-gaveta, .ag-gaveta-fundo { animation: none; } }

.ag-gaveta-hero {
    position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; padding: 30px 26px 24px; color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ag-cor, #2dd4ea) 55%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, #001b29 0%, #013252 55%, color-mix(in srgb, var(--ag-cor, #006699) 60%, #013252) 100%);
}
.ag-gaveta-fechar {
    position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff;
}
.ag-gaveta-fechar:hover { background: rgba(255, 255, 255, .22); }
.ag-gaveta-avatar {
    display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; color: #fff;
    background: linear-gradient(145deg, var(--ag-cor, #2dd4ea), color-mix(in srgb, var(--ag-cor, #2dd4ea) 62%, #001b29));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ag-cor, #2dd4ea) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ag-gaveta-avatar-ic { width: 40px; height: 40px; }
.ag-gaveta-titulos { min-width: 0; }
.ag-gaveta-situacao {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    background: rgba(255, 255, 255, .14); color: #d7eef7;
}
.ag-gaveta-situacao.on { background: rgba(34, 197, 94, .22); color: #bbf7d0; }
.ag-gaveta-hero h2 { margin: 8px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.1; color: #fff; }
.ag-gaveta-area { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: #9fd3e6; }
.ag-gaveta-slogan { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: #fff; }

.ag-gaveta-corpo { flex: 1; overflow-y: auto; padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; }
.ag-gaveta-texto p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--ig-text-soft, #334155); }
.ag-gaveta-texto p:last-child { margin-bottom: 0; }
.ag-gaveta-texto strong { color: var(--ig-text, #0f2a3d); font-weight: 800; }
.ag-gaveta-bloco h3 { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ig-text-2, #64748b); }
.ag-gaveta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ag-gaveta-chips li {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: color-mix(in srgb, var(--ag-cor, #2dd4ea) 12%, var(--ig-surface, #fff)); color: color-mix(in srgb, var(--ag-cor, #006699) 75%, var(--ig-text, #0f2a3d));
    border: 1px solid color-mix(in srgb, var(--ag-cor, #2dd4ea) 30%, transparent);
}
.ag-gaveta-chip-ic { width: 16px; height: 16px; color: var(--ag-cor, #006699); }
.ag-gaveta-pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ag-gaveta-pecas li {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: var(--ig-surface-2, #f8fafc); border: 1px solid var(--ig-border-soft, #e2e8f0); color: var(--ig-text, #0f2a3d);
}
.ag-gaveta-peca-ic { width: 16px; height: 16px; flex: none; color: var(--ag-cor, #006699); }
.ag-gaveta-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ag-gaveta-lista li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ig-text-soft, #334155); }
.ag-gaveta-lista-ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ag-cor, #006699); }
.ag-gaveta-perguntas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ag-gaveta-perguntas li {
    padding: 9px 12px; border-radius: 12px 12px 12px 4px; font-size: 13.5px; font-style: italic; color: var(--ig-text-soft, #334155);
    background: var(--ig-surface-brand, #eef6fb); border: 1px solid var(--ig-border-soft, #e2e8f0);
}
.ag-gaveta-como {
    padding: 18px; border-radius: 18px; border: 1px solid var(--ig-border-soft, #e2e8f0);
    background: linear-gradient(160deg, color-mix(in srgb, var(--ag-cor, #2dd4ea) 8%, var(--ig-surface, #fff)), var(--ig-surface, #fff));
}
.ag-gaveta-preco { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ig-text-soft, #334155); }
.ag-gaveta-preco b { color: var(--ig-text, #0f2a3d); }
.ag-gaveta-preco a { font-weight: 700; color: var(--ig-link, #006699); }
.ag-gaveta-passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ag-gaveta-passos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.ag-gaveta-passo-ic {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff;
    background: linear-gradient(135deg, #06A6E3, #2F6BEA 55%, #3B2BD9);
}
.ag-gaveta-passos b { display: block; font-size: 13.5px; color: var(--ig-text, #0f2a3d); }
.ag-gaveta-passos div > span { display: block; font-size: 13px; line-height: 1.5; color: var(--ig-text-2, #64748b); }
.ag-gaveta-saldo {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--ig-border-soft, #e2e8f0); font-size: 13.5px; color: var(--ig-text-soft, #334155);
}
.ag-gaveta-saldo a { font-weight: 800; color: var(--ig-link, #006699); }
.ag-gaveta-rodape {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 26px; border-top: 1px solid var(--ig-border-soft, #e2e8f0);
    background: var(--ig-surface, #fff); box-shadow: 0 -10px 24px rgba(1, 20, 36, .06);
}
.ag-gaveta-rodape .ag-bt { padding: 10px 16px; font-size: 14px; }
@media (max-width: 640px) {
    .ag-gaveta-hero { grid-template-columns: 60px minmax(0, 1fr); padding: 26px 18px 20px; }
    .ag-gaveta-avatar { width: 60px; height: 60px; border-radius: 18px; }
    .ag-gaveta-avatar-ic { width: 32px; height: 32px; }
    .ag-gaveta-hero h2 { font-size: 24px; }
    .ag-gaveta-corpo { padding: 18px 16px 24px; }
    .ag-gaveta-rodape { padding: 12px 16px; }
}


/* ---------- Selos de situação dos agentes do cartório ---------- */
.ag-selo { margin-left: auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.ag-selo-verde { background: rgba(34, 197, 94, .16); color: #15803d; }
.ag-selo-amarelo { background: rgba(245, 158, 11, .18); color: #b45309; }
.ag-selo-azul { background: rgba(6, 166, 227, .14); color: var(--ig-link, #006699); }
.ag-selo-cinza { background: var(--ig-surface-3, #f1f5f9); color: var(--ig-text-2, #64748b); }
.dark .ag-selo-verde { color: #86efac; }
.dark .ag-selo-amarelo { color: #fcd34d; }
.ag-tipos { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ag-tipos li { font-size: 11.5px; font-weight: 600; color: var(--ig-brand-text, #01527d); background: var(--ig-surface-brand, #eef6fb); border-radius: 8px; padding: 3px 8px; }
.ag-cobertura { margin: 0; font-size: 12px; color: var(--ig-text-2, #64748b); }
.ag-preco { font-size: 12.5px; font-weight: 800; color: var(--ig-text, #0f2a3d); }

/* ---------- Faixas de aviso da vitrine ---------- */
.ag-faixas { display: flex; flex-direction: column; gap: 10px; }
.ag-faixa {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.5;
    background: var(--ig-surface, #fff); border: 1px solid var(--ig-border-soft, #e2e8f0); color: var(--ig-text-soft, #334155);
}
.ag-faixa strong { display: block; color: var(--ig-text, #0f2a3d); font-weight: 800; }
.ag-faixa a { font-weight: 700; color: var(--ig-link, #006699); }
.ag-faixa-ic { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--ig-link, #006699); }
.ag-faixa-alerta { border-color: rgba(245, 158, 11, .45); }
.ag-faixa-alerta .ag-faixa-ic { color: #d97706; }
.ag-faixa-escolha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ag-secao-titulo { margin: 6px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--ig-heading, #0f2a3d); }
.ag-secao-nota { margin: 2px 0 0; font-size: 13px; color: var(--ig-text-2, #64748b); }

/* ---------- Conversa com especialista: tipos de ato, fontes e avisos ---------- */
.ag-tipos-lista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ag-tipo-item { display: flex; align-items: center; gap: 6px; }
.ag-tipo-foco {
    flex: 1; min-width: 0; text-align: left; border: 1px solid var(--ig-border-soft, #e2e8f0); background: var(--ig-surface-2, #f8fafc); color: var(--ig-text, #0f2a3d);
    border-radius: 10px; padding: 7px 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ag-tipo-foco.ativo { border-color: var(--ag-cor, #006699); box-shadow: inset 3px 0 0 var(--ag-cor, #006699); background: var(--ig-surface-brand, #eef6fb); }
.ag-tipo-catalogo { flex: none; border: 0; background: none; color: var(--ig-link, #006699); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; padding: 4px; }
.ag-tipo-catalogo:hover { text-decoration: underline; }
.ag-fontes { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ig-border-soft, #e2e8f0); font-size: 12px; color: var(--ig-text-2, #64748b); }
.ag-fontes b { color: var(--ig-text-soft, #334155); }
.ag-avisos { margin: 6px 0 0; padding: 0 0 0 16px; font-size: 12px; color: #b45309; }
.dark .ag-avisos { color: #fcd34d; }
.ia-msg-catalogo .ia-msg-balao { border: 1px dashed var(--ig-border-brand, #bfe3f0); }
.ag-regime { margin-bottom: 10px; }

/* ---------- Sentinela dos protocolos ---------- */
.sn-pagina { display: flex; flex-direction: column; gap: 16px; }
.sn-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sn-lista { display: flex; flex-direction: column; gap: 8px; }
.sn-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px;
    background: var(--ig-surface, #fff); border: 1px solid var(--ig-border-soft, #e2e8f0); box-shadow: inset 4px 0 0 #f59e0b;
}
.sn-item.grave { box-shadow: inset 4px 0 0 #dc2626; }
.sn-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ig-text, #0f2a3d); }
.sn-item-topo strong { font-weight: 800; }
.sn-estado { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: var(--ig-surface-3, #f1f5f9); color: var(--ig-text-2, #64748b); }
.sn-motivos { margin: 4px 0 0; padding: 0 0 0 16px; font-size: 13px; color: var(--ig-text-soft, #334155); }
.sn-vazio { padding: 28px; text-align: center; border-radius: 18px; border: 1px dashed var(--ig-border-soft, #e2e8f0); color: var(--ig-text-2, #64748b); font-size: 14px; }
.sn-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sn-lateral { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ig-text-soft, #334155); }
.sn-lateral a { font-weight: 700; color: var(--ig-link, #006699); }

/* ---------- Solicitar agente ---------- */
.sa-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .sa-pagina { grid-template-columns: 1fr; } }
.sa-cartao { padding: 18px 20px; border-radius: 20px; background: var(--ig-surface, #fff); border: 1px solid var(--ig-border-soft, #e2e8f0); }
.sa-cartao h3 { margin: 0 0 10px; font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 700; color: var(--ig-heading, #0f2a3d); }
.sa-cartao p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ig-text-soft, #334155); }
.sa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sa-pedidos { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sa-pedido { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ig-border-soft, #e2e8f0); font-size: 13px; color: var(--ig-text-soft, #334155); }
.sa-pedido strong { display: block; color: var(--ig-text, #0f2a3d); }
.sa-pedido small { color: var(--ig-text-2, #64748b); }

/* ---------- Atalho do topo em duas partes: Íris e a lista dos agentes ---------- */
.iris-atalho-grupo { position: relative; display: inline-flex; align-items: stretch; margin-left: 8px; }
.iris-atalho-grupo .iris-atalho { margin-left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.iris-atalho-seta {
    display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid rgba(45, 212, 234, .35); border-left: 0; cursor: pointer;
    border-radius: 0 999px 999px 0; background: linear-gradient(135deg, #006699, #0a83bd); color: #eaf7fc;
}
.iris-atalho-seta:hover { filter: brightness(1.1); }
.iris-atalho-seta-ic { width: 16px; height: 16px; }
.iris-atalho-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 250px; padding: 6px; border-radius: 14px;
    background: var(--ig-surface, #fff); border: 1px solid var(--ig-border-soft, #e2e8f0); box-shadow: 0 18px 40px rgba(1, 50, 82, .22);
}
.iris-atalho-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ig-text, #0f2a3d); font-size: 13px; font-weight: 700; }
.iris-atalho-item:hover { background: var(--ig-surface-brand, #eef6fb); }
.iris-atalho-item small { display: block; font-size: 11px; font-weight: 600; color: var(--ig-text-2, #64748b); }
.iris-atalho-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; color: #fff; background: var(--ag-cor, #006699); font-size: 11px; font-weight: 800; }
.iris-atalho-rodape { display: block; margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--ig-border-soft, #e2e8f0); font-size: 12.5px; font-weight: 800; color: var(--ig-link, #006699); text-decoration: none; }
@media (max-width: 640px) { .iris-atalho-seta { padding: 0 6px; } }


/* Cabeçalho do cartão: nome e área ocupam a largura toda; o selo fica numa linha própria, embaixo, sem cobrir o texto. */
.ag-cartao .ag-cartao-topo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ag-cartao .ag-cartao-abrir { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; text-align: left; }
.ag-cartao .ag-cartao-nome { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ag-cartao .ag-cartao-nome h3, .ag-cartao .ag-area { overflow-wrap: normal; word-break: normal; }
.ag-cartao .ag-selo { margin-left: 0; max-width: 100%; white-space: nowrap; line-height: 1.25; }

/* Contratar de fora a fora (abre a gaveta do agente, à direita). */
.ag-bt.ag-bt-largo { flex: 1 1 100%; width: 100%; justify-content: center; }