/* ia.css — S5: I.A (#ia), I.A de Simulacao (#ferramentas), Trafego Pago (#trafego) */
/* Spec 2026-09-15 secoes 3, 4, 5 + ENTREGA-FRONT.md */

/* === LAYOUT DA TELA I.A (#ia) === */
.ia-shell{display:flex;flex-direction:row;height:calc(100vh - var(--de-topbar-height, 64px));gap:0;background:var(--de-canvas, #f5f5f7);}
/* Barra lateral "Clientes aprovados" — design do dono: docs/design/lateral-clientes-aprovados-v1.html
   (216px, tokens --de-*, um article.lead-card por cliente, estados .is-mine e .is-expiring). */
.ia-sidebar.ia-leads{width:216px;min-width:216px;box-sizing:border-box;background:var(--de-marfim,#F7F5F1);border-right:1px solid var(--de-divisoria,#F0EDE7);padding:16px 10px;display:flex;flex-direction:column;gap:10px;overflow:hidden;font-family:var(--de-fonte-texto,'Inter',sans-serif);color:var(--de-grafite,#181818);}
.ia-leads__head{padding:0 6px 12px;border-bottom:1px solid var(--de-divisoria,#F0EDE7);flex:none;}
.ia-leads__title-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.ia-leads__title{font-family:var(--de-fonte-titulo,'Plus Jakarta Sans',sans-serif);font-weight:700;font-size:17px;line-height:1.2;color:var(--de-grafite,#181818);}
/* Em 216px o título ocupa duas linhas e não cabe título + Ver todos + botão na mesma linha. Então o
   cabeçalho fica como no HTML do dono (título à esquerda, 'Ver todos →' à direita, na mesma linha) e
   o botão de rolagem ganha a linha de controle abaixo do subtítulo, no mesmo recuo do texto. */
.ia-leads__controle{display:flex;align-items:center;gap:8px;margin-top:8px;}
.ia-leads__all,.ia-leads .ia-see-all-link{font-size:13px;font-weight:700;color:var(--de-laranja-hover,#E2560B);text-decoration:none;white-space:nowrap;margin:0;}
/* botão discreto (o botão padrão da plataforma é laranja cheio; aqui é pílula pequena) */
.ia-leads__toggle{border:1px solid var(--de-borda,#DEDBD5)!important;background:var(--de-branco,#FFFFFF)!important;color:var(--de-grafite,#181818)!important;border-radius:999px!important;padding:3px 10px!important;min-height:0!important;height:auto!important;font:700 11px/1.2 var(--de-fonte-texto,'Inter',sans-serif)!important;box-shadow:none!important;cursor:pointer;white-space:nowrap;}
.ia-leads__toggle.is-on{background:var(--de-laranja-claro,#FFF7F0)!important;border-color:var(--de-laranja-claro3,#FBD2B2)!important;color:var(--de-laranja-escuro,#A6410A)!important;}
.ia-leads__toggle:focus-visible{outline:2px solid var(--de-laranja-principal,#FF7617);outline-offset:1px;}
.ia-leads__sub{font-size:13px;color:var(--de-texto-secundario,#5D6068);margin-top:6px;}
.ia-leads__ajuda{font-size:12px;line-height:1.35;color:var(--de-texto-secundario,#5D6068);margin:6px 0 0;}
.ia-leads__live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--de-status-contrato-texto,#175E34);}
.ia-leads__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--de-status-contrato-ponto,#1F7A43);animation:ia-leads-pulso 1.6s ease-in-out infinite;}
.ia-leads__live[hidden]{display:none;}
@keyframes ia-leads-pulso{0%,100%{opacity:.35}50%{opacity:1}}
/* bloco simples (não grid): dentro da coluna flex, o grid dividia a altura da barra em linhas iguais
   e cada cartão ficava com 61px, cortando tudo abaixo do nome. */
.ia-leads__list{flex:1;min-height:0;overflow-y:auto;display:block;padding:0 2px 8px;}
.ia-leads__empty{font-size:13px;color:var(--de-texto-secundario,#5D6068);padding:8px 6px;margin:0;}
.ia-leads .lead-card{background:var(--de-branco,#FFFFFF);border:1px solid var(--de-borda,#DEDBD5);border-radius:14px;padding:12px;box-sizing:border-box;margin:0 0 10px;height:auto;transition:opacity .3s ease,transform .3s ease;}
.ia-leads .lead-card__who{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.ia-leads .lead-card__avatar{width:34px;height:34px;border-radius:50%;background:var(--de-marfim,#F7F5F1);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;}
.ia-leads .lead-card__name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ia-leads .lead-card__since{font-size:11px;color:var(--de-texto-terciario,#9A9A93);}
.ia-leads .lead-card__label{font-size:11px;color:var(--de-texto-secundario,#5D6068);}
.ia-leads .lead-card__amount{font-family:var(--de-fonte-titulo,'Plus Jakarta Sans',sans-serif);font-weight:800;font-size:22px;letter-spacing:-.02em;margin:2px 0 10px;}
.ia-leads .lead-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--de-divisoria,#F0EDE7);border-bottom:1px solid var(--de-divisoria,#F0EDE7);font-size:12px;}
.ia-leads .lead-card__grid > div:only-child{grid-column:1 / -1;}
.ia-leads .lead-card__grid small{display:block;color:var(--de-texto-terciario,#9A9A93);font-size:10px;}
/* telefone em cima, CPF embaixo: os dois inteiros em 12px, sem reticências (190px não cabe os dois numa linha) */
.ia-leads .lead-card__contact{font-size:12px;color:var(--de-texto-secundario,#5D6068);margin:10px 0 4px;display:grid;gap:2px;}
.ia-leads .lead-card__contact span{display:block;white-space:nowrap;}
/* Copiar e WhatsApp: mesma linha, mesma altura (36px), mesma largura (flex:1), mesmo raio — o
   .btn da plataforma trazia altura e sombra próprias e deixava o WhatsApp maior e mais acima. */
/* grade de duas colunas iguais: com flex:1 os dois ficavam com 2px de diferença por causa do padding */
.ia-leads .lead-card__actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:6px;margin:8px 0 10px;}
.ia-leads .lead-card__actions > .btn{flex:1 1 0!important;width:auto!important;min-width:0!important;}
.ia-leads .btn{flex:1;display:flex!important;align-items:center!important;justify-content:center!important;height:36px!important;min-height:36px!important;max-height:36px!important;line-height:1!important;border-radius:10px!important;font-weight:600!important;font-size:12px!important;text-decoration:none!important;cursor:pointer;border:0;font-family:inherit!important;box-sizing:border-box!important;padding:0 8px!important;margin:0!important;box-shadow:none!important;vertical-align:top;}
.ia-leads .btn--ghost{border:1px solid var(--de-borda,#DEDBD5);background:var(--de-branco,#FFFFFF);color:var(--de-grafite,#181818);}
.ia-leads .btn--whats{background:var(--de-status-contrato-fundo,#DFF1E4);color:var(--de-status-contrato-texto,#175E34);font-weight:700;}
.ia-leads .lead-card__timer{font-size:11px;font-weight:700;color:var(--de-status-novo-texto,#7A3206);margin-bottom:8px;}
.ia-leads .btn--primary{width:100%;height:44px;border-radius:12px;background:var(--de-laranja-principal,#FF7617);color:#fff;font-weight:700;font-size:14px;box-shadow:var(--de-sombra-botao,0 10px 24px var(--de-laranja-principal-a30));}
.ia-leads .btn--primary:hover{background:var(--de-laranja-hover,#E2560B);}
.ia-leads .btn--primary:disabled{cursor:default;opacity:.7;box-shadow:none;}
.ia-leads .btn--primary.is-mine{background:var(--de-status-contrato-fundo,#DFF1E4);color:var(--de-status-contrato-texto,#175E34);opacity:1;}
.ia-leads .lead-card.is-expiring .lead-card__timer{color:#B4342F;}
.ia-leads .lead-card.is-mine{border-color:var(--de-laranja-principal,#FF7617);}
/* entrada e saída de cliente na roleta (300ms) */
.ia-leads .lead-card.is-entering{opacity:0;transform:translateY(-8px);}
.ia-leads .lead-card.is-leaving{opacity:0;transform:translateX(-12px);pointer-events:none;}
/* o brilho de cartão da plataforma não vale aqui: o design do dono é plano */
.ia-leads .lead-card.card-glow{transform:none;box-shadow:none;overflow:visible;}
@media (prefers-reduced-motion: reduce){.ia-leads .lead-card{transition:none;}.ia-leads__live::before{animation:none;}}

.ia-lead-card{padding:12px;border-bottom:1px solid var(--de-border);background:#fff;}
.ia-lead-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.ia-lead-card__head strong{font:600 14px/1.2 var(--de-font-title);color:var(--de-ink);}
.ia-lead-card__info{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;font:400 11px/1.4 var(--de-font-body);color:var(--de-muted);margin-bottom:6px;}
.ia-lead-card__timer{font:600 11px/1.2 var(--de-font-body);color:var(--de-orange);margin-bottom:6px;}
.ia-lead-card .aline-btn{width:100%;padding:6px;font-size:11px;}

/* === BADGES DA MAQUETE (ESTILO_STATUS) === */
.ia-badge{display:inline-block;padding:2px 8px;border-radius:999px;font:600 10px/1.2 var(--de-font-body);white-space:nowrap;}
.ia-badge--awaiting_reservation{background:#FDE3CE;color:#7A3206;border:1px solid #F9C79C;}
.ia-badge--in_service{background:#E3EDFD;color:#1E4E9C;border:1px solid #BCD3F7;}
.ia-badge--no_interest{background:#F0EDE7;color:#4F4E49;border:1px solid #DEDBD5;}
.ia-badge--no_contact{background:#FBE5E5;color:#8E2A26;border:1px solid #F0C7C5;}
.ia-badge--closed{background:#DFF1E4;color:#175E34;border:1px solid #BCE0C7;}
.ia-badge--returned_to_operations{background:#EDEAE4;color:#6A6963;border:1px solid #DEDBD5;}

.ia-main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.ia-guidance-line{background:var(--de-laranja-claro);border-bottom:1px solid #F9C79C;padding:10px 20px;display:flex;align-items:center;gap:8px;box-sizing:border-box;}
.ia-guidance-line p{margin:0;font-family:var(--de-font-body,'Inter',sans-serif);font-size:13px;color:#7A3206;font-weight:500;}
.ia-guidance-line a{color:var(--de-laranja-hover);font-weight:600;text-decoration:underline;}
.ia-frame-container{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.ia-frame-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px;color:var(--de-muted, #8e8e93);background:var(--de-surface, #ffffff);z-index:5;}
.ia-frame-placeholder h2{font:700 22px/1.2 var(--de-font-title);color:var(--de-ink);margin:0 0 8px;}
.ia-frame-placeholder p{font:400 14px/1.5 var(--de-font-body);margin:0;}
.ia-iframe{flex:1;width:100%;border:none;min-height:400px;}
.ia-frame-error{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px 20px;gap:12px;background:var(--de-surface, #ffffff);box-sizing:border-box;}
.ia-frame-error h2{font:700 20px/1.2 var(--de-font-title);color:var(--de-ink);margin:0;}
.ia-frame-error p{font:400 14px/1.5 var(--de-font-body);color:var(--de-muted);margin:0;max-width:440px;line-height:1.4;}
.ia-lead-detail{padding:16px;border-top:1px solid var(--de-border);overflow-y:auto;}

/* === RESPONSIVO === */
@media(max-width:768px){
 .ia-shell{flex-direction:column;height:auto;}
 .ia-sidebar,.ia-sidebar.ia-leads{width:100%;min-width:0;max-height:none;border-right:none;border-bottom:1px solid var(--de-divisoria,#F0EDE7);overflow:visible;}
 .ia-leads__list{max-height:35vh;overflow-y:auto;}
 /* No celular a "tela fixa" do PC (design-system.css, .layout:has(.ia-shell)) não cabe: a lista de
    clientes (≈500px) mais a ferramenta não entram nos 676px que sobram entre a barra de cima (76px)
    e a reserva do menu de baixo (92px, shell.css), e o .main com overflow:hidden cortava o resto —
    a ferramenta ficava com ~170px e ninguém conseguia usar a I.A. Aqui a página volta a rolar, a
    ferramenta vem primeiro e ocupa a tela inteira, e a lista de clientes fica logo abaixo, a um
    dedo de distância. Mesmo conteúdo, mesma ordem no HTML; só a disposição muda no celular. */
 .layout:has(.ia-shell) .main{height:auto!important;overflow:visible!important;}
 .layout:has(.ia-shell) .ia-shell{height:auto!important;}
 .ia-main{order:-1;flex:none;min-height:0;height:calc(100vh - 76px - 92px);height:calc(100dvh - 76px - 92px);}
 .ia-frame-container{min-height:0;}
}
/* Cartão de banco na lateral da I.A (D8, D10): etiqueta com a cor do banco e linha da consulta. */
.ia-leads .banco-tag{align-self:flex-start;margin:2px 0 4px;}
.ia-leads .banco-consulta{margin:6px 0 2px;font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1.35;color:var(--de-texto-secundario,#5D6068);}
.ia-leads .banco-seguro{margin:2px 0 4px;font-size:10px;font-weight:600;line-height:1.35;color:var(--de-texto-secundario,#5D6068);}
/* Reserva: hoje a lateral mostra o prazo na grade; a regra vale se o blocoDoPrazo entrar no cartão (spec Soma §8.3). */
.ia-leads .banco-prazo{margin:2px 0 4px;font-size:10px;font-weight:600;line-height:1.35;color:var(--de-texto-secundario,#5D6068);}
.ia-leads .banco-consulta.banco-consulta--laranja{color:var(--de-laranja-principal,#FF7617);}