/* Ajustes do juris-atende sobre a tela original do Painel Cordeiro.
 * Carregado por último no index.html: tudo o que é nosso fica aqui, o CSS do
 * Eduardo continua intacto nos arquivos dele. */

/* Abas cujo motor ainda não existe nesta versão: somem até ficarem prontas. */
#t_cr, #t_fu { display: none !important; }

/* Placar de contratos (ZapSign) e gasto da IA: entram com o fechamento e a IA. */
#placar, #custo_ia { display: none !important; }

/* Topo: nada quebra linha e nada sai da tela. */
header { min-width: 0; }
header .marca { white-space: nowrap; flex-shrink: 0; }
.abas { flex-shrink: 0; }
.abas button { white-space: nowrap; }
header > button, header .sair-b { flex-shrink: 0; }
header .quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { header .marca small { display: none; } }
@media (max-width: 1200px) { header .quem { display: none; } #status_fila { display: none; } }

/* Notebook pequeno e tablet deitado (701 a 1100 px): as três colunas lado a
 * lado, mais estreitas, em vez de jogar a coluna da direita para baixo e
 * espremer a fila. */
@media (min-width: 701px) and (max-width: 1100px) {
  #app { grid-template-columns: 250px 1fr 290px; }
  #lado { grid-column: auto; grid-row: auto; border-left: 1px solid var(--b); border-top: 0; max-height: none; }
  .abas button { padding: 6px 9px; font-size: 12px; }
  header .ico { width: 32px; height: 32px; }
}

/* Celular: as abas do topo rolam para o lado em vez de sumir. */
@media (max-width: 700px) {
  .abas { flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  header > button.ico { display: none; }
  header #b_tema, header .sair-b { display: grid; }
}

/* Ícones (Lucide) no lugar dos emojis: ver icones.js. */
.ic-w { display: inline-flex; align-items: center; vertical-align: -0.16em; line-height: 1; }
.ic { width: 1.05em; height: 1.05em; flex-shrink: 0; }
header .ico .ic, .ico-c .ic, header .sair-b .ic { width: 18px; height: 18px; }
.abas .ic { width: 15px; height: 15px; }
#mascote .p .ic { width: 18px; height: 18px; color: var(--azul); }

/* Personalização com temas de enfeite (chuva de emojis, Barbie, Hortifruti...): fora do produto. */
#b_pers { display: none !important; }

/* Rascunho editável: rótulo sem símbolo. */
.fantasmas .b.fantasma::after { content: "editar" !important; }

/* ========================================================================
 * Marca dinâmica (nome, subtítulo e logo vêm do servidor: ver ajustes-atende.js)
 * ====================================================================== */
#login .edu { display: none !important; }
.selo-ini { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--titulo); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--azul), var(--roxo)); letter-spacing: 0; font-size: 13px; border-radius: inherit; line-height: 1; }
header .marca .logo img, #login .topo .logo img, .eq-logo-prev img { object-fit: contain; }
#login .topo .logo .selo-ini { font-size: 28px; border-radius: 20px; }
header .marca .marca-nome { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; }
header .marca small { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#login h1 { font-size: clamp(20px, 6vw, 28px); letter-spacing: 2px; line-height: 1.2; overflow-wrap: anywhere; }
@media (max-width: 1100px) { header .marca .marca-nome { max-width: 150px; } }
@media (max-width: 700px) { header .marca .marca-nome { max-width: 92px; } }

/* ========================================================================
 * Passar o chat: botões gerados a partir da equipe cadastrada
 * ====================================================================== */
.passar-eq button small { color: inherit; opacity: .72; font-weight: 400; font-size: 11.5px; }
.passar-vazio { display: flex; gap: 8px; align-items: flex-start; color: var(--m); font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border: 1px dashed var(--b2); border-radius: 11px; width: 100%; }
.passar-vazio .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--azul); }
.passar-vazio b { color: var(--t); }

/* ========================================================================
 * Aba Equipe (só administrador)
 * ====================================================================== */
.abas #t_config { display: inline-flex; align-items: center; gap: 5px; }
#aba_config { grid-column: 1 / -1; overflow: auto; padding: 18px 24px 48px; display: none; }
#aba_config h2 { margin: 0 0 4px; font-size: 20px; font-family: var(--titulo); display: flex; align-items: center; gap: 8px; }
#aba_config h2 .ic { width: 20px; height: 20px; color: var(--azul); }
#aba_config button, .eq-btn-arq { display: inline-flex; align-items: center; gap: 6px; }
#aba_config button .ic, .eq-btn-arq .ic, dialog .acoes button .ic { width: 15px; height: 15px; }
body.config-aberta #mascote { display: none; }
.eq-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; }
.eq-card { background: var(--card); border: 1px solid var(--b); border-radius: 16px; padding: 16px; box-shadow: var(--sombra); min-width: 0; }
.eq-card h3 { margin: 0 0 12px; font-size: 15px; font-family: var(--titulo); display: flex; align-items: center; gap: 7px; }
.eq-card h3 .ic { width: 17px; height: 17px; color: var(--azul); }
.eq-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.eq-linha h3 { margin: 0; }
.eq-linha .sp { flex: 1; }
.eq-campo { display: block; margin-top: 12px; font-size: 12px; color: var(--m); }
.eq-campo input { margin-top: 4px; }
.eq-cont { float: right; color: var(--m2); font-size: 11px; }
.eq-logo-area { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.eq-logo-acoes { flex: 1; min-width: 180px; }
.eq-logo-prev { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; box-shadow: var(--glow); background: var(--bg2); flex-shrink: 0; display: grid; place-items: center; }
.eq-logo-prev img { width: 100%; height: 100%; display: block; }
.eq-logo-prev .selo-ini { font-size: 24px; }
.eq-btn-arq { cursor: pointer; border: 1px solid var(--b2); background: var(--card2); color: var(--t); border-radius: 11px; padding: 8px 12px; font-size: 13px; font-weight: 500; transition: .15s; }
.eq-btn-arq:hover { border-color: var(--azul2); }
.eq-btn-arq input { display: none; }
.eq-tab { display: flex; flex-direction: column; gap: 6px; }
.eq-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.8fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--b); border-radius: 12px; background: var(--bg2); font-size: 13px; }
.eq-row.cab { background: transparent; border-color: transparent; color: var(--m2); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 12px; }
.eq-row.inativa { opacity: .6; }
.eq-cel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-cel b { font-weight: 600; }
.eq-cel.situ { white-space: normal; }
.eq-acoes { display: flex; gap: 2px; justify-content: flex-end; }
.eq-acoes button { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.eq-acoes .ic { width: 14px; height: 14px; }
.eq-senha { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.eq-senha code { flex: 1; min-width: 160px; font-size: 18px; letter-spacing: 1px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--b2); border-radius: 10px; user-select: all; overflow-wrap: anywhere; }
#dlgPessoa, #dlgSenhaProv { width: 92vw; max-width: 440px; }
#dlgPessoa label.aviso { display: block; margin-top: 10px; margin-bottom: 3px; }
@media (max-width: 1100px) {
  .eq-grid { grid-template-columns: 1fr; }
  .eq-row.cab { display: none; }
  .eq-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .eq-cel { white-space: normal; }
  .eq-cel::before { content: attr(data-rot); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--m2); }
  .eq-cel.nome { grid-column: 1 / -1; }
  .eq-acoes { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; border-top: 1px solid var(--b); padding-top: 8px; }
}
@media (max-width: 700px) {
  #aba_config { padding: 12px 12px 80px; }
  .eq-grid { gap: 12px; }
  .eq-card { padding: 12px; }
  .eq-row { grid-template-columns: 1fr 1fr; }
  .eq-linha .p { width: 100%; justify-content: center; }
}

/* ---- Configurações: cabeçalho e sub-abas (uma função por sub-aba) ---- */
.cfg-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg-cab h2 { margin: 0; }
.cfg-nav { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--b); border-radius: 12px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cfg-nav::-webkit-scrollbar { display: none; }
.cfg-nav button { background: transparent; border-color: transparent; color: var(--m); padding: 6px 12px; font-size: 13px; border-radius: 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cfg-nav button .ic { width: 15px; height: 15px; }
.cfg-nav button.ativo { background: linear-gradient(135deg, var(--azul), var(--azulb)); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.cfg-painel { animation: entra .2s ease-out both; }
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg-grid .cfg-largo { grid-column: 1 / -1; }
.cfg-painel .eq-card h4 { margin: 18px 0 8px; font-size: 13.5px; font-family: var(--titulo); display: flex; align-items: center; gap: 6px; color: var(--t); }
.cfg-painel .eq-card h4 .ic { width: 15px; height: 15px; color: var(--azul); }
.cfg-passos { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--m); line-height: 1.55; }
.cfg-passos li { margin: 3px 0; }
.cfg-passos b { color: var(--t); font-weight: 600; }

/* WhatsApp: seletor do tipo de conexão */
.modo-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modo-op { position: relative; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 64px 12px 14px; border: 1px solid var(--b2); background: var(--bg2); border-radius: 12px; color: var(--t); min-height: 96px; }
.modo-op b { font-weight: 600; font-size: 14px; }
.modo-op span { font-size: 12px; color: var(--m); line-height: 1.45; font-weight: 400; }
.modo-op i { position: absolute; top: 10px; right: 10px; font-style: normal; display: none; }
.modo-op.ativo { border-color: var(--azul); box-shadow: var(--glow); background: color-mix(in srgb, var(--azul) 10%, var(--card)); }
.modo-op.ativo i { display: inline-block; }
.modo-op:hover { transform: none; border-color: var(--azul2); }

/* WhatsApp: status, QR e números */
.wa-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wa-selo { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 4px 11px 4px 8px; border-radius: 999px; border: 1px solid var(--b2); background: var(--bg2); color: var(--m); }
.wa-selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--m2); display: inline-block; }
.wa-selo.on { color: #4ade80; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); }
.wa-selo.on i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.wa-selo.wait { color: #f5b041; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.1); }
.wa-selo.wait i { background: #f59e0b; animation: pulsa-selo 1.2s ease-in-out infinite; }
.wa-selo.off { color: #f87171; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.wa-selo.off i { background: #ef4444; }
@keyframes pulsa-selo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wa-qr-area { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.wa-qr { width: 240px; max-width: 100%; height: auto; border-radius: 14px; background: #fff; padding: 8px; box-shadow: var(--sombra); flex-shrink: 0; }
.wa-qr-area .cfg-passos { flex: 1; min-width: 220px; margin: 0; }
.cfg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cfg-stat { background: var(--bg2); border: 1px solid var(--b); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-stat b { font-size: 20px; font-family: var(--titulo); font-weight: 700; line-height: 1.1; }
.cfg-stat span { font-size: 11.5px; color: var(--m); text-transform: uppercase; letter-spacing: .4px; }

/* WhatsApp: API oficial */
.cfg-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cfg-copia { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--m); }
.cfg-copia code { font-size: 12px; padding: 7px 10px; background: var(--bg2); border: 1px solid var(--b); border-radius: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t); user-select: all; }
.cfg-copia button { padding: 5px 9px; font-size: 12px; }
.wa-teste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wa-teste input { flex: 1; min-width: 200px; }

/* Avisos: interruptores e lista da equipe */
.cfg-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--t); margin: 6px 0; user-select: none; position: relative; }
.cfg-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-sw .sw { width: 36px; height: 20px; border-radius: 999px; background: var(--b2); position: relative; flex-shrink: 0; transition: .15s; border: 1px solid transparent; }
.cfg-sw .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cfg-sw input:checked + .sw { background: linear-gradient(135deg, var(--azul), var(--azulb)); }
.cfg-sw input:checked + .sw::after { left: 18px; }
.cfg-sw input:focus-visible + .sw { outline: 2px solid var(--azul); outline-offset: 2px; }
.cfg-sub { margin: 6px 0 0 10px; padding-left: 14px; border-left: 2px solid var(--b); display: flex; flex-direction: column; transition: opacity .15s; }
.cfg-sub.apagado { opacity: .45; }
.cfg-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin: 6px 0; }
.cfg-inline input { width: 84px; padding: 6px 9px; }
.cfg-inline small { color: var(--m); }
.av-tab { display: flex; flex-direction: column; gap: 6px; }
.av-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--b); border-radius: 12px; background: var(--bg2); font-size: 13px; }
.av-row.cab { background: transparent; border-color: transparent; color: var(--m2); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 12px; }
.av-cel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-cel b { font-weight: 600; }

/* Equipe: cadastro completo (WhatsApp, OAB, recebe novos) */
.eq-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; }
.eq-oab { display: block; font-size: 11px; color: var(--m); font-weight: 400; }
.dp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
#dlgPessoa .cfg-sw span:last-child { font-size: 12.5px; color: var(--m); line-height: 1.35; }
#dlgPessoa { max-width: 480px; }

/* Créditos: lugar reservado */
.cfg-embreve { max-width: 520px; text-align: center; padding: 34px 24px; }
.cfg-embreve > .ic { width: 40px; height: 40px; color: var(--azul); margin: 0 auto 10px; display: block; }
.cfg-embreve h3 { justify-content: center; margin-bottom: 6px; }
.cfg-embreve p { margin: 0; color: var(--m); font-size: 14px; }

@media (max-width: 1100px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .av-row.cab { display: none; }
  .av-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .av-cel { white-space: normal; }
  .av-cel::before { content: attr(data-rot); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--m2); margin-bottom: 3px; }
  .av-cel.nome { grid-column: 1 / -1; }
  .av-row .eq-acoes { grid-column: 1 / -1; justify-content: flex-start; border-top: 1px solid var(--b); padding-top: 8px; }
}
@media (max-width: 700px) {
  .cfg-cab { gap: 10px; }
  .modo-opcoes { grid-template-columns: 1fr; }
  .cfg-form2 { grid-template-columns: 1fr; }
  .cfg-copia { grid-template-columns: 1fr; gap: 4px; }
  .cfg-copia button { justify-self: start; }
  .cfg-stats { gap: 6px; }
  .cfg-stat b { font-size: 17px; }
  .av-row { grid-template-columns: 1fr; }
  .wa-qr { width: 220px; }
  .dp-2col { grid-template-columns: 1fr; }
}

/* ---- Distribuição dos chats: regras, pessoas e áreas ---- */
.di-exp { margin: -2px 0 10px 45px; }
.di-tab { display: flex; flex-direction: column; gap: 6px; }
.di-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--b); border-radius: 12px; background: var(--bg2); font-size: 13px; }
.di-cel { min-width: 0; }
.di-cel.nome b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-cel.nome small { display: block; color: var(--m); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-cel.hoje { text-align: center; min-width: 44px; }
.di-cel.hoje b { display: block; font-size: 18px; font-family: var(--titulo); line-height: 1.1; }
.di-cel.hoje small { font-size: 10.5px; color: var(--m2); text-transform: uppercase; letter-spacing: .4px; }
.dp-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dp-area { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border: 1px solid var(--b2); border-radius: 999px; background: var(--bg2); cursor: pointer; user-select: none; }
.dp-area input { width: auto; margin: 0; accent-color: var(--azul); }
.dp-area:has(input:checked) { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 14%, var(--card)); }
#dlgArea { width: 92vw; max-width: 480px; }
#dlgArea label.aviso { display: block; margin-top: 10px; margin-bottom: 3px; }
#dlgArea textarea { min-height: 54px; }
@media (max-width: 700px) {
  .di-exp { margin-left: 0; }
  .di-row { grid-template-columns: minmax(0, 1fr) auto; }
  .di-cel.hoje { grid-column: 2; grid-row: 1 / span 2; }
}
/* Áreas: um cartão por área, título + botões na mesma linha, descrição e palavras-chave rotuladas. */
#di_areas .di-tab { gap: 12px; }
.di-area { background: var(--card); border: 1px solid var(--b); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 0 rgba(255,255,255,.02); }
.di-area.inativa { opacity: .65; }
.di-area-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--b); margin-bottom: 10px; }
.di-area-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 200px; }
.di-area-titulo b { font-family: var(--titulo); font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-area-acoes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.di-area-acoes button { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
.di-area-acoes .ic { width: 14px; height: 14px; }
.di-rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--m2); margin: 0 0 3px; }
.di-rotulo small { text-transform: none; letter-spacing: 0; font-size: 10.5px; }
.di-area-desc { font-size: 13px; color: var(--t); line-height: 1.5; margin-bottom: 10px; }
.di-chips { display: flex; flex-wrap: wrap; gap: 6px 6px; }
.di-chip { display: inline-block; font-size: 12px; line-height: 1.3; padding: 3px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--b2); color: var(--t); white-space: nowrap; }
.di-vazio { font-size: 12.5px; color: var(--m2); font-style: italic; }
@media (max-width: 700px) {
  .di-area { padding: 12px; }
  .di-area-titulo { flex-basis: 100%; }
  .di-area-acoes { width: 100%; justify-content: flex-start; margin-left: 0; }
}

/* Equipe: a coluna de ações tem largura fixa no desktop, senão a linha da própria
 * conta (que não tem Desativar/Resetar) fica com as colunas fora de alinhamento. */
@media (min-width: 1101px) {
  .eq-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) 292px; }
  .eq-acoes { justify-content: flex-end; }
}

/* ========================================================================
 * Ajuda (Como usar o painel): janela larga e baixa, menu fixo à esquerda,
 * texto em largura confortável. O CSS base limita todo dialog a 420 px, por
 * isso a janela original saía fina e esticada; aqui o limite é refeito.
 * ====================================================================== */
#dlgAjuda { width: min(1000px, 94vw); max-width: min(1000px, 94vw); max-height: 86vh; padding: 0; margin: auto; overflow: hidden; }
#dlgAjuda .corpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-height: 86vh; }
#dlgAjuda nav { min-height: 0; overflow: auto; padding: 16px 10px; border-radius: 18px 0 0 18px; }
#dlgAjuda nav h2 { font-size: 15px; margin: 4px 8px 12px; display: flex; align-items: center; gap: 7px; font-family: var(--titulo); padding-right: 28px; }
#dlgAjuda nav h2 .ic { width: 17px; height: 17px; color: var(--azul); flex-shrink: 0; }
#dlgAjuda nav .aj-lista { display: flex; flex-direction: column; gap: 2px; }
#dlgAjuda nav .aj-lista button { display: block; width: 100%; text-align: left; white-space: normal; line-height: 1.3; }
#dlgAjuda article { min-height: 0; max-height: 86vh; overflow: auto; padding: 26px 32px 30px; line-height: 1.6; font-size: 14px; }
#dlgAjuda article > * { max-width: 68ch; }
#dlgAjuda article h3 { font-family: var(--titulo); font-size: 19px; }
#dlgAjuda article .regra { max-width: 68ch; }
#dlgAjuda article .aj-breve { margin-top: 8px; border-left-color: var(--amar, #f59e0b); }
#dlgAjuda .fechar { position: absolute; right: 10px; top: 8px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; }
#dlgAjuda .fechar .ic { width: 16px; height: 16px; }
@media (max-width: 700px) {
  #dlgAjuda { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  #dlgAjuda .corpo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: 100%; height: 100%; }
  #dlgAjuda nav { display: block; border-right: 0; border-bottom: 1px solid var(--b); border-radius: 0; padding: 12px 12px 8px; overflow: hidden; }
  #dlgAjuda nav h2 { margin: 0 0 8px; }
  #dlgAjuda nav .aj-lista { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  #dlgAjuda nav .aj-lista::-webkit-scrollbar { display: none; }
  #dlgAjuda nav .aj-lista button { width: auto; white-space: nowrap; flex-shrink: 0; padding: 6px 11px; }
  #dlgAjuda article { max-height: none; padding: 16px 16px 40px; }
}

/* ========================================================================
 * Resposta automática (IA responde sozinha os chats do próprio login)
 * ====================================================================== */
header #b_iaauto { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 9px; border-radius: 999px; border: 1px solid var(--b2); background: var(--bg2); color: var(--m); font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }
header #b_iaauto:hover { border-color: var(--azul2); transform: none; color: var(--t); }
header #b_iaauto .ic { width: 16px; height: 16px; }
header #b_iaauto .txt b { font-weight: 600; color: var(--t); }
header #b_iaauto .sw { width: 32px; height: 18px; border-radius: 999px; background: var(--b2); position: relative; flex-shrink: 0; transition: .15s; }
header #b_iaauto .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
header #b_iaauto.on { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.1); color: #4ade80; }
header #b_iaauto.on .txt b { color: #4ade80; }
header #b_iaauto.on .sw { background: linear-gradient(135deg, #22c55e, #15803d); }
header #b_iaauto.on .sw::after { left: 16px; }
header #b_iaauto:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
header .iaauto-selo { display: inline-flex; align-items: center; gap: 5px; background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.35); flex-shrink: 0; }
header .iaauto-selo .ic { width: 13px; height: 13px; }
@media (max-width: 1800px) { header .iaauto-selo { display: none; } }
@media (max-width: 1700px) { header .quem { display: none; } }
@media (max-width: 1300px) { header #b_iaauto .txt { display: none; } header #b_iaauto { padding: 5px 8px; } }
@media (max-width: 700px) { header #b_iaauto { display: inline-flex; gap: 5px; padding: 4px 7px; } header #b_iaauto .sw { width: 28px; height: 16px; } header #b_iaauto .sw::after { width: 12px; height: 12px; } header #b_iaauto.on .sw::after { left: 14px; } }

/* selo no cabeçalho do chat e rótulo nas bolhas da IA */
#cab .iaauto-cab { display: inline-flex; align-items: center; gap: 5px; background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.35); margin-left: 4px; }
#cab .iaauto-cab .ic { width: 13px; height: 13px; }
#msgs .b .ia-rot { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #4ade80; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: 999px; padding: 1px 7px 1px 5px; margin-bottom: 5px; line-height: 1.4; }
#msgs .b .ia-rot .ic { width: 12px; height: 12px; }
#msgs .b.de-ia { border-color: rgba(34,197,94,.4); }

/* Topo: o status da fila pode vir com frase longa; não pode empurrar os botões para fora. */
header #status_fila { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }
@media (max-width: 1400px) { header #status_fila { max-width: 160px; } }

/* Assumir / Devolver para a IA no cabeçalho do chat, selo assumido e ícone na fila */
#cab .iaauto-assumir { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#cab .iaauto-assumir .ic { width: 14px; height: 14px; }
#cab .iaauto-cab.assumido { background: rgba(59,130,246,.12); color: var(--azul2); border-color: rgba(59,130,246,.35); }
#fila_itens .ia-fila { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 4px; color: #4ade80; }
#fila_itens .ia-fila .ic { width: 13px; height: 13px; }

/* ========================================================================
 * Protocolo do cliente (#003) na fila e no cabeçalho do chat
 * ====================================================================== */
#fila_itens .item .f3-num { display: none; }  /* o número passa para a linha do protocolo */
#fila_itens .item .f3-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; line-height: 1.3; margin: 1px 0 3px; color: var(--m); min-width: 0; }
#fila_itens .item .f3-meta .proto { font-family: var(--titulo); font-weight: 700; letter-spacing: .3px; color: var(--azul2); background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
#fila_itens .item .f3-meta .num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#fila_itens .item .u { margin-top: 1px; }
#cab .proto-cab { font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .3px; color: var(--azul2); background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); border-radius: 6px; padding: 1px 7px; margin: 0 6px 0 2px; white-space: nowrap; }
@media (max-width: 700px) { #fila_itens .item .f3-meta { font-size: 11px; gap: 6px; } }

/* ========================================================================
 * Créditos de IA sempre visíveis (topo), faixa de aviso e sub-aba Créditos
 * ====================================================================== */
header #creditos_topo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--b2); background: var(--bg2); color: var(--m); font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }
header #creditos_topo:hover { transform: none; border-color: var(--azul2); color: var(--t); }
header #creditos_topo .ic { width: 15px; height: 15px; }
header #creditos_topo b { font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; }
header #creditos_topo.baixo { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.12); color: #f5b041; }
header #creditos_topo.baixo b { color: #f5b041; }
header #creditos_topo.zerado { border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.14); color: #f87171; }
header #creditos_topo.zerado b { color: #f87171; }
@media (max-width: 1300px) { header #creditos_topo .txt { display: none; } }
#creditos_faixa { position: fixed; top: 58px; left: 0; right: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 7px 14px; background: linear-gradient(135deg, #b91c1c, #7f1d1d); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
#creditos_faixa .ic { width: 16px; height: 16px; flex-shrink: 0; }
#creditos_faixa .p { padding: 4px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #7f1d1d; box-shadow: none; }
#creditos_faixa .p .ic { width: 13px; height: 13px; }
body.cred-zerada #fila .top, body.cred-zerada #cab, body.cred-zerada #aba_config, body.cred-zerada #jogo { padding-top: 40px; }
@media (max-width: 700px) { #creditos_faixa { font-size: 12px; padding: 6px 10px; } }
.cr-saldo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cr-saldo .cr-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--m2); width: 100%; }
.cr-saldo b { font-family: var(--titulo); font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cr-saldo .wa-selo { align-self: center; }
.cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.cr-tab { display: flex; flex-direction: column; gap: 4px; }
.cr-row { display: grid; grid-template-columns: 150px 110px minmax(0, 1fr) 120px; gap: 10px; align-items: center; padding: 7px 12px; border: 1px solid var(--b); border-radius: 10px; background: var(--bg2); font-size: 13px; }
.cr-row.cab { background: transparent; border-color: transparent; color: var(--m2); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 12px; }
.cr-cel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-row .dir { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cr-cel.pos { color: #4ade80; }
.cr-cel.neg { color: var(--t); }
@media (max-width: 1100px) {
  .cr-row.cab { display: none; }
  .cr-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .cr-cel { white-space: normal; }
  .cr-cel::before { content: attr(data-rot); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--m2); }
  .cr-row .dir { text-align: left; }
}
@media (max-width: 700px) { .cr-saldo b { font-size: 28px; } .cr-row { grid-template-columns: 1fr; } }
/* Celular: topo compacto para caber marca, abas, IA, créditos, tema e sair em 390 px. */
@media (max-width: 700px) {
  header { gap: 4px; padding: 0 8px; }
  header .marca { gap: 6px; }
  header .marca .marca-nome { max-width: 62px; }
  header #creditos_topo { padding: 3px 6px; gap: 4px; font-size: 11.5px; }
  header #creditos_topo .ic { width: 13px; height: 13px; }
  header #b_iaauto { padding: 3px 6px; }
  header .sair-b { padding: 5px 8px; }
}
/* Assumir / Devolver para a IA: pílula própria, colada ao selo, diferente do "Devolver" do chamado. */
#cab .iaauto-assumir { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(59,130,246,.5); background: rgba(59,130,246,.12); color: var(--azul2); margin-right: 6px; }
#cab .iaauto-assumir:hover { transform: none; background: rgba(59,130,246,.22); }
#cab .iaauto-assumir.devolver { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.12); color: #4ade80; }
#cab .iaauto-assumir.devolver:hover { background: rgba(34,197,94,.22); }
#cab .iaauto-assumir .ic { width: 14px; height: 14px; }
/* O que a IA fez ou por que parou, abaixo do parecer do rascunho. */
#nota .ia-acao { display: flex; align-items: flex-start; gap: 7px; background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35); font-size: 12.5px; color: var(--t); }
#nota .ia-acao .ic { width: 15px; height: 15px; color: var(--azul2); flex-shrink: 0; margin-top: 2px; }

/* ========================================================================
 * Coluna Resposta: caixas crescem com o texto; Aprovar e enviar sempre alcançável
 * ====================================================================== */
.msgbox textarea { height: auto; min-height: 42px; overflow: hidden; resize: none; }
#lado { overflow-y: auto; overscroll-behavior: contain; }
#lado .sec { flex-shrink: 0; }
#lado .sec-resposta { position: relative; }
#lado .resp-acoes { position: sticky; bottom: -12px; z-index: 2; background: var(--card); margin: 4px -14px -12px; padding: 10px 14px 12px; border-top: 1px solid var(--b); border-radius: 0 0 16px 16px; box-shadow: 0 -8px 16px -10px rgba(0,0,0,.4); }
#lado .sec-resposta > .aviso { padding-bottom: 2px; }

/* ========================================================================
 * Telas menores (notebook com zoom): tudo mais compacto abaixo de 1600 px de
 * largura ou 900 px de altura
 * ====================================================================== */
@media (max-width: 1600px) and (min-width: 1101px) { #app { grid-template-columns: 300px 1fr 360px; } }
@media (max-width: 1600px), (max-height: 900px) {
  #app { grid-template-rows: 50px 1fr; }
  header { padding: 0 10px; gap: 6px; }
  header .marca { font-size: 14px; }
  header .marca .logo { width: 28px; height: 28px; }
  .abas { padding: 2px; margin-left: 6px; }
  .abas button { padding: 4px 9px; font-size: 12px; }
  header .ico { width: 32px; height: 32px; }
  header .ico .ic, header .sair-b .ic { width: 16px; height: 16px; }
  header .sair-b { padding: 5px 9px; font-size: 12px; }
  header #b_iaauto, header #creditos_topo { font-size: 11.5px; padding: 4px 8px; }
  header #b_iaauto .sw { width: 28px; height: 16px; } header #b_iaauto .sw::after { width: 12px; height: 12px; } header #b_iaauto.on .sw::after { left: 14px; }
  #status_fila { display: none !important; }
  #creditos_faixa { top: 50px; }
  body.cred-zerada #fila .top, body.cred-zerada #cab, body.cred-zerada #aba_config, body.cred-zerada #jogo { padding-top: 36px; }

  #fila .top { padding: 7px 10px; gap: 5px; }
  #fila .top #f_busca { padding: 5px 8px 5px 28px; font-size: 12px; }
  #fila .abinhas { padding: 2px; }
  #fila .abinhas button { padding: 3px 2px 4px; font-size: 10px; }
  #fila .abinhas button b { font-size: 13px; }
  #fila .top .linha button { padding: 3px 7px; font-size: 11.5px; }
  #fila .top .linha b { font-size: 12px; }
  .item { padding: 7px 10px; gap: 8px; }
  .item .av { width: 30px; height: 30px; font-size: 12px; }
  .item .nome { font-size: 13px; }
  .item .u { font-size: 11.5px; }
  #fila_itens .item .f3-meta { font-size: 11px; margin: 0 0 2px; }
  .f3-cab { padding: 6px 10px; font-size: 11px; }

  #cab { padding: 6px 12px; gap: 6px; }
  #cab b { font-size: 14px; }
  #cab button { padding: 5px 9px; font-size: 12px; }
  #cab .ico { width: 28px; height: 28px; }
  #cab .iaauto-assumir { padding: 3px 9px; font-size: 12px; }
  #cab .tag { font-size: 10.5px; padding: 1px 7px; }
  #msgs { padding: 12px; gap: 6px; }

  #lado { padding: 8px; gap: 8px; }
  #lado .sec { padding: 10px 10px 8px; border-radius: 14px; }
  #lado h3 { margin-bottom: 8px; font-size: 10.5px; }
  #lado .resp-acoes { margin: 4px -10px -8px; padding: 8px 10px 9px; }
  #nota .nota, #lado .nota { padding: 7px 10px; font-size: 12.5px; margin-bottom: 7px; }
  .msgbox { margin-bottom: 6px; gap: 6px; }
  .msgbox span { width: 20px; height: 20px; font-size: 10px; margin-top: 7px; }
  .msgbox textarea { font-size: 13px; padding: 8px 10px; line-height: 1.4; }
  .msgbox button { padding: 4px 7px; }
  .acoes { gap: 6px; }
  .acoes button { padding: 6px 10px; font-size: 12.5px; }
  #lado .sec .aviso { font-size: 11.5px; margin-top: 6px; }
  .passar-eq button small { font-size: 11px; }
}

/* ========================================================================
 * Permissões por cargo: a tela esconde o que a pessoa não pode (o servidor barra)
 * ====================================================================== */
body.sem-ver-equipe #fila [data-aba="equipe"], body.sem-ver-equipe #fila [data-esc="equipe"], body.sem-ver-equipe .fu-todos { display: none !important; }
body.sem-transferir #lado .sec-passar { display: none !important; }
body.sem-acoes-chamado #cab button[onclick*="acaoChamado"] { display: none !important; }
body.sem-fechamento #lado .sec-fechamento { display: none !important; }
body.sem-lote #fila .top .linha-lote, body.sem-lote #t_fu, body.sem-lote #b_lote { display: none !important; }
body.sem-creditos #creditos_topo { display: none !important; }

/* Sub-aba Cargos */
.cg-lista { display: flex; flex-direction: column; gap: 6px; }
.cg-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--b); border-radius: 12px; background: var(--bg2); cursor: pointer; }
.cg-item.so-leitura { cursor: default; opacity: .85; }
.cg-item .cfg-sw { margin: 2px 0 0; }
.cg-item .cg-ok { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(34,197,94,.15); color: #4ade80; flex-shrink: 0; margin-top: 1px; }
.cg-item .cg-ok .ic { width: 13px; height: 13px; }
.cg-item b { display: block; font-size: 13.5px; font-weight: 600; }
.cg-item small { display: block; color: var(--m); font-size: 12px; line-height: 1.4; margin-top: 1px; }
.cg-item small em { color: var(--m2); font-style: normal; }

/* Sub-aba IA: um cartão por etapa */
#ia_lista { display: flex; flex-direction: column; gap: 12px; }
.ia-etapa.configurada { border-color: rgba(59,130,246,.45); }
.ia-corpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ia-info code { display: inline-block; font-size: 12px; padding: 5px 9px; background: var(--bg2); border: 1px solid var(--b); border-radius: 8px; overflow-wrap: anywhere; }
.ia-info small { display: block; color: var(--m); font-size: 11.5px; margin-top: 3px; }
.ia-info b { font-weight: 700; }
@media (max-width: 1100px) { .ia-corpo { grid-template-columns: 1fr; gap: 10px; } }
/* Aba Follow-up: aparece quando GET /api/followup responde 200 (e a pessoa pode enviar em lote). */
body.tem-followup:not(.sem-lote) #t_fu { display: inline-flex !important; align-items: center; }

/* ========================================================================
 * Follow-up: caixa de marcar em todo card, "Marcar todos", card marcado em destaque
 * ====================================================================== */
.fu .topo > input[type=checkbox] { display: none; }  /* a caixa nativa dá lugar à nossa */
.fu { cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.fu textarea, .fu button, .fu a { cursor: auto; }
.fu button { cursor: pointer; }
.fu-marca { display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.fu-marca input { position: absolute; opacity: 0; width: 0; height: 0; }
.fu-marca .cx { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--b2); background: var(--bg2); display: grid; place-items: center; color: transparent; transition: .15s; }
.fu-marca .cx .ic { width: 15px; height: 15px; stroke-width: 3; }
.fu-marca:hover .cx { border-color: var(--azul2); }
#followup .fu-marca input:checked + .cx { background: linear-gradient(135deg, var(--azul), var(--azulb)) !important; border-color: var(--azul) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
#followup .fu-marca input:checked + .cx .ic { stroke: #fff; }
.fu-marca input:focus-visible + .cx { outline: 2px solid var(--azul); outline-offset: 2px; }
.fu.marcado { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 12%, var(--card)); box-shadow: 0 0 0 1px var(--azul), 0 8px 24px rgba(59,130,246,.22); }
.fu.marcado .av { box-shadow: 0 0 0 2px var(--azul); }
#followup .barra-fu #fu_marcar_todos { display: inline-flex; align-items: center; gap: 5px; }
#followup .barra-fu #fu_marcar_todos .ic { width: 14px; height: 14px; }
#fu_lote:disabled { opacity: .45; }

/* ========================================================================
 * Marca do produto: Atrium (o escritório continua vindo da configuração)
 * ====================================================================== */
#login h1.wordmark { font-family: var(--titulo); font-weight: 800; letter-spacing: 6px; text-transform: uppercase; font-size: clamp(22px, 5vw, 30px); background: linear-gradient(90deg, #fff 0%, #bfdbfe 55%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#login .sub { margin-top: 8px; font-size: 13px; letter-spacing: .2px; }
#login .sub b { color: var(--t); font-weight: 600; }
/* Jogo, mascote e cordeirinhos: fora do produto. */
#t_jogo, #jogo { display: none !important; }
/* Atrium Coins: atalhos de recarga e linha de cortesia no histórico */
.cr-atalhos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cr-atalhos button { padding: 4px 10px; font-size: 12px; border-color: var(--b2); }
.cr-row.cortesia { opacity: .75; }

/* ========================================================================
 * Casos e arquivos do cliente (coluna da direita)
 * ====================================================================== */
#lado .sec-casos .ca-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
#lado .sec-casos .ca-cab h3 { margin: 0; }
#lado .sec-casos .ca-cab button { padding: 4px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
#lado .sec-casos .ic { width: 14px; height: 14px; flex-shrink: 0; }
.ca-pasta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--m2); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-caso { border: 1px solid var(--b); border-radius: 12px; background: var(--bg2); padding: 9px 10px; margin-bottom: 8px; }
.ca-caso.ativo { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), 0 6px 18px rgba(59,130,246,.18); background: color-mix(in srgb, var(--azul) 9%, var(--card)); }
.ca-caso.encerrado { opacity: .72; }
.ca-topo { display: flex; align-items: flex-start; gap: 8px; }
.ca-toggle { padding: 4px; border-radius: 8px; background: transparent; border-color: transparent; color: var(--azul2); line-height: 0; }
.ca-toggle .ic { width: 16px; height: 16px; }
.ca-nome { min-width: 0; flex: 1; }
.ca-nome b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ca-nome small { display: block; color: var(--m); font-size: 11px; margin-top: 3px; line-height: 1.5; }
.ca-nome .tag { font-size: 10px; padding: 0 6px; }
.ca-botoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ca-botoes button { padding: 3px 8px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; }
.ca-botoes .ic { width: 12px; height: 12px; }
.ca-arquivos { margin-top: 8px; border-top: 1px solid var(--b); padding-top: 6px; }
.ca-grupo { margin-top: 6px; }
.ca-grupo .di-rotulo { margin-bottom: 4px; }
.ca-arq { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; }
.ca-arq:hover { background: var(--card2); }
.ca-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--card2); border: 1px solid var(--b); display: grid; place-items: center; color: var(--azul2); flex-shrink: 0; }
.ca-ico .ic { width: 15px; height: 15px; }
.ca-info { flex: 1; min-width: 0; }
.ca-info .ca-nome { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-info small { display: block; color: var(--m); font-size: 10.5px; line-height: 1.4; }
.ca-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.ca-acoes a, .ca-acoes button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--m); cursor: pointer; }
.ca-acoes a:hover, .ca-acoes button:hover { color: var(--t); border-color: var(--b2); transform: none; }
.ca-vazio { margin: 0; font-size: 11.5px; }
#dlgCaso, #dlgMover { width: 92vw; max-width: 420px; }
#dlgCaso label.aviso, #dlgMover label.aviso { display: block; margin-top: 10px; margin-bottom: 3px; }
/* Quadro Resposta quando a IA está respondendo sozinha */
#nota .ia-estado { display: flex; align-items: flex-start; gap: 8px; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: var(--t); font-size: 12.5px; line-height: 1.5; }
#nota .ia-estado.pendente { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); }
#nota .ia-estado .ic { width: 16px; height: 16px; color: #4ade80; flex-shrink: 0; margin-top: 2px; }
#nota .ia-estado.pendente .ic { color: #f5b041; }

/* ========================================================================
 * Prévias dos arquivos do caso e visualizador em tela cheia
 * ====================================================================== */
.ca-arq { align-items: center; }
.ca-prev { width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--b); background: var(--card2); display: grid; place-items: center; color: var(--azul2); flex-shrink: 0; padding: 0; overflow: hidden; position: relative; cursor: pointer; }
.ca-prev:hover { transform: none; border-color: var(--azul2); }
.ca-prev.aud { cursor: default; }
.ca-prev img, .ca-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-prev .ic { width: 20px; height: 20px; }
.ca-prev.pdf .ic { color: #f87171; }
.ca-prev .ca-selo { position: absolute; right: 3px; bottom: 3px; font-size: 9px; font-weight: 800; letter-spacing: .3px; background: rgba(239,68,68,.9); color: #fff; border-radius: 4px; padding: 0 4px; line-height: 14px; }
.ca-prev .ca-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); color: #fff; }
.ca-prev .ca-play .ic { width: 18px; height: 18px; }
.ca-info .ca-nome { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ca-audio { display: block; width: 100%; max-width: 260px; height: 30px; margin-top: 4px; }
#visor { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(3,6,14,.94); color: #fff; }
#visor.aberto { display: block; animation: visor-entra .15s ease-out both; }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }
body.visor-aberto { overflow: hidden; }
.vs-topo { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.vs-nome { min-width: 0; flex: 1; }
.vs-nome b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-nome small { display: block; color: rgba(255,255,255,.65); font-size: 11.5px; }
.vs-botoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vs-botoes .g, .vs-botoes a.g { display: inline-flex; align-items: center; gap: 5px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 6px 10px; font-size: 12px; text-decoration: none; }
.vs-botoes .g:hover { background: rgba(255,255,255,.18); transform: none; }
.vs-botoes .ic { width: 15px; height: 15px; }
.vs-cont { font-size: 12px; color: rgba(255,255,255,.7); margin-right: 6px; font-variant-numeric: tabular-nums; }
.vs-palco { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 70px 24px; overflow: auto; }
.vs-palco img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); transition: transform .15s; cursor: zoom-in; transform-origin: center; }
.vs-palco img.ampliada { cursor: zoom-out; }
.vs-palco video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
.vs-palco iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.vs-audio { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vs-audio .ic { width: 48px; height: 48px; color: #93c5fd; }
.vs-audio audio { width: min(520px, 80vw); }
.vs-outro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: rgba(255,255,255,.8); }
.vs-outro .ic { width: 40px; height: 40px; }
.vs-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 0; }
.vs-seta:hover { background: rgba(255,255,255,.22); transform: translateY(-50%); }
.vs-seta.ant { left: 14px; } .vs-seta.prox { right: 14px; }
.vs-seta .ic { width: 20px; height: 20px; }
#msgs .b img { cursor: zoom-in; }
@media (max-width: 700px) {
  .vs-botoes .g span { display: none; }
  .vs-palco { padding: 58px 10px 70px; }
  .vs-seta { top: auto; bottom: 14px; transform: none; width: 42px; height: 42px; }
  .vs-seta:hover { transform: none; }
  .ca-prev { width: 42px; height: 42px; }
}
/* Evento do sistema no meio da conversa (ex.: cliente assinou): pílula centralizada, como o separador de dia. */
#msgs .b.evento { align-self: center; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 92%; margin: 4px 0; animation: none; }
#msgs .b.evento .ev-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; color: #4ade80; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); border-radius: 999px; padding: 4px 12px; line-height: 1.4; text-align: center; }
#msgs .b.evento .ev-pill .ic { width: 14px; height: 14px; flex-shrink: 0; }
#msgs .b.evento .ev-pill small { color: var(--m); font-weight: 500; font-size: 10.5px; white-space: nowrap; }
[data-tema="claro"] #msgs .b.evento .ev-pill { color: #15803d; }

/* ========================================================================
 * Diálogo do Atrium (no lugar de confirm/prompt/alert do navegador)
 * ====================================================================== */
#dlgAtrium { width: 92vw; max-width: 440px; padding: 22px 22px 18px; }
#dlgAtrium .da-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(59,130,246,.14); color: var(--azul2); margin-bottom: 10px; }
#dlgAtrium .da-ico .ic { width: 20px; height: 20px; }
#dlgAtrium h3 { margin: 0 0 6px; font-family: var(--titulo); font-size: 17px; }
#dlgAtrium .da-msg { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--t); max-height: 50vh; overflow: auto; }
#dlgAtrium #da_input { margin-top: 10px; }
#dlgAtrium .acoes { margin-top: 16px; justify-content: flex-end; }

/* ========================================================================
 * Timbre: folha A4 em miniatura com a arte de fundo e as margens desenhadas
 * ====================================================================== */
.tb-prev { display: flex; justify-content: center; }
.tb-folha { position: relative; width: min(100%, 300px); aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--b2); border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; }
.tb-folha .tb-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.tb-folha .tb-zona { position: absolute; left: 0; right: 0; background: rgba(59,130,246,.14); border: 0 dashed rgba(59,130,246,.9); pointer-events: none; }
.tb-folha .tb-zona.topo { top: 0; border-bottom-width: 1px; }
.tb-folha .tb-zona.baixo { bottom: 0; border-top-width: 1px; }
.tb-folha .tb-zona span { position: absolute; right: 4px; font-size: 9px; font-weight: 700; color: #1d4ed8; background: rgba(255,255,255,.85); border-radius: 4px; padding: 0 4px; line-height: 14px; }
.tb-folha .tb-zona.topo span { bottom: 2px; }
.tb-folha .tb-zona.baixo span { top: 2px; }
.tb-folha .tb-texto { position: absolute; left: 9%; right: 9%; display: flex; flex-direction: column; gap: 4.5%; padding-top: 3%; pointer-events: none; }
.tb-folha .tb-texto i { display: block; height: 2.2%; min-height: 3px; width: 100%; background: rgba(15,23,42,.55); border-radius: 2px; }
.tb-folha.sem .tb-texto i { background: rgba(15,23,42,.25); }
.tb-folha .tb-vazio { position: absolute; left: 12%; right: 12%; top: 38%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #475569; font-size: 11px; line-height: 1.4; background: rgba(255,255,255,.85); border-radius: 8px; padding: 8px; }
.tb-folha .tb-vazio .ic { width: 22px; height: 22px; color: #1d4ed8; }
.tb-margens { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#tb_card .acoes a.g { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 12px; }
@media (max-width: 700px) { .tb-margens { grid-template-columns: 1fr; } }

/* ========================================================================
 * Erros dentro dos diálogos, campo de senha com olho e regras da senha
 * ====================================================================== */
dialog .erro-dlg { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.45); color: #fca5a5; font-size: 12.5px; line-height: 1.45; }
[data-tema="claro"] dialog .erro-dlg { color: #b91c1c; }
dialog .erro-dlg .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.campo-olho { position: relative; }
.campo-olho input { padding-right: 42px; }
.campo-olho .olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--m); }
.campo-olho .olho:hover { color: var(--t); border-color: var(--b2); transform: translateY(-50%); }
.campo-olho .olho.ativo { color: var(--azul2); }
.campo-olho .olho .ic { width: 16px; height: 16px; }
.regras-senha { margin-top: 6px; font-size: 12px; color: var(--m); line-height: 1.45; }
.regras-senha span { display: inline-flex; align-items: center; gap: 5px; }
.regras-senha .ic { width: 13px; height: 13px; }
.regras-senha ul { margin: 3px 0 0; padding-left: 18px; }
#dlgSenha label.aviso { display: block; margin-top: 10px; margin-bottom: 3px; }
/* Primeiro acesso: troca de senha obrigatória e botão de trocar nas mensagens de bloqueio */
#dlgSenha.obrigatorio .acoes button:not(.p) { display: none; }
#dlgSenha .aviso-provisoria { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); font-size: 13px; }
#dlgSenha .aviso-provisoria .ic { width: 16px; height: 16px; color: #f5b041; flex-shrink: 0; }
.bt-trocar-senha { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 10px; padding: 5px 10px; font-size: 12px; }
.nota .bt-trocar-senha .ic { width: 14px; height: 14px; }
/* Atrium Coins: origem do saldo (plano x avulsos) e paginação do histórico */
.cr-origens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.cr-origem { background: var(--bg2); border: 1px solid var(--b); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cr-origem b { display: block; font-family: var(--titulo); font-size: 18px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.cr-origem.sem b { font-size: 14px; color: var(--m); }
.cr-origem small { display: block; color: var(--m); font-size: 11.5px; line-height: 1.4; margin-top: 3px; }
.cr-origem ul { margin: 6px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--m); line-height: 1.5; }
.cr-origem ul b { display: inline; font-size: 11.5px; font-family: inherit; color: var(--t); }
.cr-origem ul span { color: var(--m2); }
.cr-pag { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--m); }
.cr-pag button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; }
.cr-pag button .ic { width: 14px; height: 14px; }
@media (max-width: 700px) { .cr-origens { grid-template-columns: 1fr; } }

/* ---- 21. Recursos do plano (licença da central): o que o plano não tem, some ---- */
body.sem-followup #t_fu, body.sem-followup.tem-followup:not(.sem-lote) #t_fu, body.sem-followup #followup { display: none !important; }
body.sem-distribuicao .cfg-nav [data-sub="distribuicao"], body.sem-distribuicao .cfg-painel[data-sub="distribuicao"] { display: none !important; }
body.sem-assinatura #fe_zap, body.sem-assinatura [data-recurso="assinatura"] { display: none !important; }
body.sem-drive #lado .sec-pasta, body.sem-drive [onclick^="guardarDrive"], body.sem-drive #b_drive { display: none !important; }
body.sem-jurisscore #lado .sec-parecer { display: none !important; }
/* a faixa ganha uma linha própria da grade; tudo que não é header nem faixa desce uma linha */
body.tem-faixa #app { grid-template-rows: 58px auto 1fr !important; }
body.tem-faixa #app > :not(header):not(#faixa_plano) { grid-row: 3; }
@media (max-width: 1600px), (max-height: 900px) { body.tem-faixa #app { grid-template-rows: 50px auto 1fr !important; } }
@media (max-width: 700px) {
  body.tem-faixa #app { grid-template-rows: 50px auto 1fr auto !important; }
  body.tem-faixa #app > #lado#lado { grid-row: 4; }
}
#faixa_plano { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; border-bottom: 1px solid rgba(245,158,11,.4); background: rgba(245,158,11,.12); color: #f5b041; }
#faixa_plano.suspenso { background: rgba(239,68,68,.12); border-bottom-color: rgba(239,68,68,.45); color: #f87171; }
#faixa_plano .ic { width: 15px; height: 15px; flex-shrink: 0; }
body.plano-suspenso #b_iaauto, body.plano-suspenso #iaauto_selo { display: none !important; }
/* recursos do plano, rodada 2: marcação [data-recurso] (hidden pelo JS) e ganchos por classe */
body.sem-resposta-automatica [data-recurso="resposta_automatica"],
body.sem-followup [data-recurso="followup"],
body.sem-fechamento [data-recurso="fechamento"],
body.sem-assinatura [data-recurso="assinatura"],
body.sem-jurisscore [data-recurso="jurisscore"],
body.sem-drive [data-recurso="drive"],
body.sem-envio-em-lote [data-recurso="envio_em_lote"],
body.sem-distribuicao [data-recurso="distribuicao"],
body.sem-leitura-midia [data-recurso="leitura_midia"],
body.sem-comandos-whatsapp [data-recurso="comandos_whatsapp"] { display: none !important; }
body.sem-leitura-midia .b .tr.aviso { display: none !important; }
body.sem-distribuicao .eq-row .col-areas, body.sem-distribuicao #di_areas_card { display: none !important; }
@media (min-width: 1101px) { body.sem-distribuicao .eq-row { grid-template-columns: minmax(0,1.6fr) minmax(0,1.6fr) 1fr .9fr .9fr 1fr auto; } }
body.sem-envio-em-lote #fila .top .linha-lote, body.sem-envio-em-lote #b_lote { display: none !important; }
body.sem-fechamento #fe_gerar, body.sem-fechamento #dlgFech { display: none !important; }
#av_comandos { margin-top: 10px; }
#av_comandos code { font: 12px ui-monospace, Consolas, monospace; background: var(--card2); border: 1px solid var(--b); border-radius: 6px; padding: 1px 5px; }