/* Central de Chamados — Loop Mais (Ajuda e suporte, Atendimento) e página externa /central-chamados.html.
   Marca Loop+ (public/css/brand.css): roxo #6C33A2, uva #3B1D5C, amarelo #FFB90A, Baloo 2 + Nunito.
   Semântica de estado igual a internal-tokens.css (sucesso, atenção, erro, info).
   Dentro do Loop Mais o style.css global estiliza button/input/label/h2: as regras abaixo são escopadas em
   .ch-central / .ch-pagina para não depender da ordem de carga. */

.ch-central, .ch-pagina, #chamadosAtendimentoPanel {
  --ch-uva: #3B1D5C;
  --ch-roxo: #6C33A2;
  --ch-roxo-hover: #5A2A89;
  --ch-amarelo: #FFB90A;
  --ch-amarelo-suave: #FFF1C7;
  --ch-nevoa: #F4EFF9;
  --ch-fundo: #F7F4FB;
  --ch-branco: #FBF9FD;
  --ch-borda: #EAE0F5;
  --ch-lilas: #C9A8E8;
  --ch-texto: #3B1D5C;
  --ch-corpo: #5C4A73;
  --ch-sutil: #6f6677;
  --ch-sucesso: #157347; --ch-sucesso-bg: #e9f7ef;
  --ch-aviso: #7a5700; --ch-aviso-bg: #fff4d6;
  --ch-erro: #b42318; --ch-erro-bg: #fdecec;
  --ch-neutro: #514857; --ch-neutro-bg: #ede9f2;
  --ch-raio: 14px;
  --ch-raio-card: 20px;
  --ch-sombra: 0 10px 30px rgba(108, 51, 162, .08);
  --ch-sombra-forte: 0 20px 48px rgba(108, 51, 162, .14);
  --ch-titulo: 'Baloo 2', 'Nunito', Arial, sans-serif;
  --ch-fonte: 'Nunito', Arial, Helvetica, sans-serif;
}

.ch-central { color: var(--ch-corpo); font-family: var(--ch-fonte); }
/* Componentes com display próprio continuam respeitando o atributo hidden. */
.ch-central [hidden], .ch-pagina [hidden] { display: none !important; }
.ch-central h2, .ch-central h3 { font-family: var(--ch-titulo); color: var(--ch-texto); margin: 0; line-height: 1.15; }
.ch-central p { margin: 0; }
/* style.css aplica deslocamento e sombra a todo botão no hover: aqui os botões têm estado próprio. */
.ch-central button:hover, .ch-pagina button:hover { transform: none; box-shadow: none; }

.ch-icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-icone--grande { width: 40px; height: 40px; stroke-width: 1.6; color: var(--ch-lilas); }

/* ---------- página externa: trilho Loop Mais + central em tela cheia ---------- */
.ch-pagina { display: flex; margin: 0; min-height: 100vh; background: var(--ch-fundo); font-family: var(--ch-fonte); color: var(--ch-corpo); }
.ch-trilho { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; height: 100vh; flex: none; padding: 14px 0; box-sizing: border-box; background: #fff; border-right: 1px solid var(--ch-borda); z-index: 2; }
.ch-pagina .ch-trilho__marca, .ch-pagina .ch-trilho__marca:hover { display: block; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 11px; text-decoration: none; }
.ch-trilho__marca img { display: block; width: 42px; height: 42px; border-radius: 11px; }
.ch-trilho__item { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; background: none; color: var(--ch-roxo); cursor: pointer; }
.ch-trilho__item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ch-trilho__item:hover { background: var(--ch-nevoa); }
.ch-pagina .ch-trilho__item--on, .ch-pagina .ch-trilho__item--on:hover { background: var(--ch-roxo); color: #fff; }
.ch-trilho__usuario { display: grid; place-items: center; width: 38px; height: 38px; margin-top: auto; border-radius: 50%; background: var(--ch-borda); color: var(--ch-texto); font-size: 12px; font-weight: 800; cursor: default; }
.ch-trilho__sair { margin-bottom: 4px; }
.ch-trilho :focus-visible { outline: 3px solid var(--ch-amarelo); outline-offset: 2px; }
.ch-main { flex: 1; min-width: 0; }
.ch-pagina .ch-central { height: 100vh; }
.ch-carregando { text-align: center; padding: 64px 16px; color: var(--ch-sutil); }
.ch-vinculo { max-width: 640px; margin: 48px auto; }
.ch-vinculo h1 { margin: 0 0 6px; font-family: var(--ch-titulo); color: var(--ch-texto); font-size: 28px; line-height: 1.15; }
.ch-vinculo > p { margin: 0 0 18px; }


/* ---------- botões e links ---------- */
.ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ch-borda); border-radius: 999px; background: #fff; color: var(--ch-roxo); font-family: var(--ch-titulo); font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; width: auto; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.ch-btn:hover { background: var(--ch-nevoa); border-color: var(--ch-lilas); color: var(--ch-roxo); }
.ch-btn--primario { background: var(--ch-roxo); border-color: var(--ch-roxo); color: #fff; }
.ch-btn--primario:hover { background: var(--ch-roxo-hover); border-color: var(--ch-roxo-hover); color: #fff; }
.ch-btn--perigo { color: var(--ch-erro); border-color: rgba(180, 35, 24, .3); }
.ch-btn--perigo:hover { background: var(--ch-erro-bg); border-color: var(--ch-erro); color: var(--ch-erro); }
.ch-btn--compacto { min-height: 36px; padding: 0 14px; font-size: 14px; }
.ch-btn--bloco { width: 100%; }
.ch-btn--fantasma-claro { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.ch-btn--fantasma-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.ch-btn[disabled], .ch-btn[aria-busy=true] { opacity: .6; cursor: progress; }
.ch-btn .ch-icone { width: 18px; height: 18px; }
.ch-btn-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1.5px solid var(--ch-borda); border-radius: 999px; background: #fff; color: var(--ch-roxo); cursor: pointer; }
.ch-link { background: none; border: 0; padding: 2px; color: var(--ch-roxo); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; width: auto; border-radius: 4px; }
.ch-link:hover { color: var(--ch-uva); }
.ch-link--icone { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: 40px; padding: 0 6px; margin: 0; font-size: 14px; }
.ch-central :is(.ch-btn, .ch-btn-icone, .ch-link, .ch-card, .ch-opcao, .ch-chip, .ch-anexo, .ch-nota-btn, [role=tab]):focus-visible,
.ch-pagina :is(.ch-btn, .ch-link, a):focus-visible,
.ch-central :is(input, select, textarea):focus-visible { outline: 3px solid var(--ch-amarelo); outline-offset: 2px; }

/* ---------- campos ---------- */
.ch-central input:not([type=checkbox]):not([type=radio]):not([type=file]), .ch-central select, .ch-central textarea,
.ch-pagina input:not([type=checkbox]):not([type=file]), .ch-pagina textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 10px 14px; border: 1.5px solid var(--ch-borda); border-radius: var(--ch-raio);
  background: #fff; color: var(--ch-texto); font-family: var(--ch-fonte); font-size: 15px; font-weight: 600;
}
.ch-central textarea, .ch-pagina textarea { resize: vertical; line-height: 1.5; }
.ch-campo { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; color: var(--ch-texto); font-size: 14px; font-weight: 800; }
.ch-campo legend { padding: 0; margin-bottom: 10px; color: var(--ch-texto); font-size: 14px; font-weight: 800; }
.ch-campo small, .ch-rotulo small { color: var(--ch-sutil); font-weight: 600; }
.ch-rotulo { color: var(--ch-texto); font-size: 14px; font-weight: 800; margin: 0; }
.ch-ajuda { color: var(--ch-sutil); font-size: 13px; font-weight: 600; }
.ch-erro-campo { margin: 0; min-height: 0; color: var(--ch-erro); font-size: 13px; font-weight: 700; }
.ch-erro-campo:empty { display: none; }
.ch-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }
.ch-form label { display: grid; gap: 6px; margin: 0; font-weight: 700; font-size: 14px; color: var(--ch-texto); }
.ch-form small { font-weight: 400; color: var(--ch-sutil); }
.ch-largo { grid-column: 1 / -1; }
.ch-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ch-check { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ch-corpo); cursor: pointer; }
.ch-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 8px; }
.ch-status { margin: 0; color: var(--ch-sutil); font-size: 14px; }
.ch-status:empty { display: none; }
.ch-status--erro { color: var(--ch-erro); font-weight: 700; }
.ch-sutil { color: var(--ch-sutil); font-size: 13px; }

/* Opções grandes (produto, impacto) e chips (tipo, seguidores) */
.ch-opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ch-opcoes--grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ch-opcoes--tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 16px; border: 1.5px solid var(--ch-borda); border-radius: 18px; background: #fff; color: var(--ch-corpo); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; width: auto; }
.ch-opcao strong { color: var(--ch-texto); font-size: 15px; font-weight: 800; }
.ch-opcao:hover { border-color: var(--ch-lilas); background: var(--ch-branco); }
.ch-opcao--on, .ch-opcao--on:hover { border: 2px solid var(--ch-roxo); background: var(--ch-nevoa); }
.ch-opcao--perigo strong { color: var(--ch-erro); }
.ch-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 16px; border: 1.5px solid var(--ch-borda); border-radius: 999px; background: #fff; color: var(--ch-texto); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; width: auto; }
.ch-chip:hover { border-color: var(--ch-lilas); }
.ch-chip--on, .ch-chip--on:hover { background: var(--ch-uva); border-color: var(--ch-uva); color: #fff; }
.ch-chip input[type=checkbox] { width: 16px; height: 16px; }

/* ---------- faixas, selos e dicas ---------- */
.ch-faixa { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 12px 14px; border-radius: var(--ch-raio); font-size: 14px; line-height: 1.45; }
.ch-faixa .ch-icone { margin-top: 1px; }
.ch-faixa > span { flex: 1; min-width: 0; }
.ch-faixa .ch-link { color: inherit; }
.ch-faixa--aviso { background: var(--ch-aviso-bg); color: #5c4300; }
.ch-faixa--aviso .ch-icone, .ch-faixa--aviso strong { color: var(--ch-aviso); }
.ch-faixa--info { background: var(--ch-nevoa); color: var(--ch-texto); }
.ch-faixa--sucesso { background: var(--ch-sucesso-bg); color: var(--ch-sucesso); }
.ch-faixa--erro { background: var(--ch-erro-bg); color: var(--ch-erro); font-weight: 700; }
.ch-dica { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--ch-borda); border-radius: 18px; background: #fff; color: var(--ch-corpo); font-size: 14px; line-height: 1.5; }
.ch-dica .ch-icone { color: var(--ch-roxo); margin-top: 1px; }
.ch-dica strong { color: var(--ch-texto); }
.ch-kicker { color: var(--ch-roxo); font-size: 13px; font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; }
.ch-selo { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ch-selo--neutro { background: var(--ch-neutro-bg); color: var(--ch-neutro); }
.ch-selo--info { background: #f2e9fb; color: var(--ch-roxo); }
.ch-selo--destaque { background: var(--ch-amarelo); color: var(--ch-uva); }
.ch-selo--sucesso { background: var(--ch-sucesso-bg); color: var(--ch-sucesso); }
.ch-ponto { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--ch-roxo); vertical-align: middle; }

/* ---------- Chamados v2 — cliente: menu lateral do suporte + área + painel de informações ---------- */
.ch-kick { margin: 0; color: var(--ch-roxo); font-size: 12px; font-weight: 800; letter-spacing: .08em; overflow-wrap: anywhere; }
.ch-app { display: flex; height: calc(100vh - 150px); min-height: 600px; background: var(--ch-fundo); border: 1px solid var(--ch-borda); border-radius: var(--ch-raio-card); overflow: hidden; }
.ch-pagina .ch-app { height: 100vh; min-height: 0; border: 0; border-radius: 0; }

.ch-lado { width: 248px; flex: none; display: flex; flex-direction: column; padding: 20px 12px; box-sizing: border-box; background: #fff; border-right: 1px solid var(--ch-borda); overflow-y: auto; }
.ch-lado__cabeca { padding: 0 8px 16px; }
.ch-central .ch-lado__cabeca h2 { margin-top: 2px; font-size: 24px; }
.ch-abrir { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin: 0 4px 14px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ch-roxo); color: #fff; font-family: var(--ch-titulo); font-weight: 700; font-size: 16px; cursor: pointer; }
.ch-abrir .ch-icone { stroke-width: 2.4; }
.ch-abrir:hover { background: var(--ch-roxo-hover); }
.ch-lado__nav { display: flex; flex-direction: column; gap: 2px; }
.ch-nv { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ch-texto); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.ch-nv .ch-icone { width: 19px; height: 19px; stroke-width: 1.9; }
.ch-nv:hover { background: var(--ch-branco); }
.ch-nv--on, .ch-nv--on:hover { background: var(--ch-nevoa); color: var(--ch-roxo); }
.ch-cnt { display: grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--ch-borda); color: var(--ch-texto); font-size: 12px; font-weight: 800; }
.ch-cnt--y { background: var(--ch-amarelo); }
.ch-sec { margin: 16px 12px 6px; color: var(--ch-sutil); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ch-central p.ch-sec { margin: 16px 12px 6px; }
.ch-equipe { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 14px; border-radius: 16px; background: var(--ch-fundo); font-size: 12px; line-height: 1.5; }
.ch-equipe:empty { display: none; }
.ch-equipe strong { color: var(--ch-texto); }
.ch-equipe__status { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; }
.ch-equipe__ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ch-sucesso); }
.ch-equipe__ponto--off { background: var(--ch-sutil); }

.ch-area { flex: 1; min-width: 0; overflow-y: auto; }
.ch-app[data-modo=chamado] .ch-area { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.ch-geral { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px; }
.ch-geral .ch-faixa { margin: 0; padding: 14px 18px; border-radius: 16px; align-items: center; }
.ch-geral .ch-faixa .ch-icone { width: 20px; height: 20px; margin: 0; }
.ch-ola { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ch-ola h1 { margin: 4px 0 6px; font-family: var(--ch-titulo); font-size: 38px; line-height: 1; color: var(--ch-texto); }
.ch-ola h1:focus { outline: none; }
.ch-ola p:not(.ch-kick) { margin: 0; font-size: 15px; }
.ch-procura { margin: 0; }
.ch-procura label { display: flex; align-items: center; gap: 8px; width: 340px; max-width: 100%; height: 46px; margin: 0; padding: 0 14px; box-sizing: border-box; border: 1.5px solid var(--ch-borda); border-radius: 14px; background: #fff; color: var(--ch-sutil); }
.ch-central .ch-procura input:not([type=checkbox]):not([type=radio]):not([type=file]) { flex: 1; min-height: 0; height: 40px; padding: 0; border: 0; background: none; font-size: 14px; box-shadow: none; }
.ch-central .ch-procura input:focus-visible { outline: none; }
.ch-procura label:focus-within { border-color: var(--ch-lilas); box-shadow: 0 0 0 3px var(--ch-amarelo-suave); }
.ch-kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ch-kpi { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--ch-borda); border-radius: 20px; box-shadow: 0 10px 30px rgba(108, 51, 162, .06); }
.ch-kpi--destaque { border-color: var(--ch-amarelo); }
.ch-kpi strong { display: block; font-family: var(--ch-titulo); font-size: 28px; line-height: 1; color: var(--ch-texto); }
.ch-kpi span:not(.ch-kpi__ic) { font-size: 13px; font-weight: 700; }
.ch-kpi__ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; }
.ch-kpi__ic .ch-icone { width: 19px; height: 19px; stroke-width: 1.9; }
.ch-kpi__ic--roxo { background: var(--ch-nevoa); color: var(--ch-roxo); }
.ch-kpi__ic--amarelo { background: var(--ch-amarelo-suave); color: var(--ch-aviso); }
.ch-kpi__ic--verde { background: var(--ch-sucesso-bg); color: var(--ch-sucesso); }
.ch-cartao-lista { background: #fff; border: 1px solid var(--ch-borda); border-radius: 20px; box-shadow: 0 10px 30px rgba(108, 51, 162, .06); overflow: hidden; }
.ch-cartao-lista > .ch-status, .ch-cartao-lista > .ch-vazio { padding: 24px 18px; }
.ch-cartao-lista__topo { display: flex; justify-content: space-between; align-items: center; padding: 18px; }
.ch-central .ch-cartao-lista__topo h3 { margin-top: 2px; font-size: 21px; line-height: 1.1; }
.ch-ver { padding: 4px; border: 0; background: none; color: var(--ch-roxo); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.ch-ver:hover { color: var(--ch-uva); }
.ch-linhas { list-style: none; margin: 0; padding: 0; }
.ch-linha { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px 150px 110px; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--ch-borda); font-size: 14px; color: var(--ch-texto); text-decoration: none; }
.ch-linha:hover { background: var(--ch-branco); color: var(--ch-texto); }
.ch-linha:focus-visible { outline: 3px solid var(--ch-amarelo); outline-offset: -3px; }
.ch-linha--cabeca { background: var(--ch-branco); color: var(--ch-sutil); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ch-linha--cabeca:hover { background: var(--ch-branco); color: var(--ch-sutil); }
.ch-linha__protocolo { color: var(--ch-roxo); }
.ch-linha__assunto { display: flex; flex-direction: column; min-width: 0; }
.ch-linha__assunto strong { overflow-wrap: anywhere; }
.ch-linha__assunto span { font-size: 13px; color: var(--ch-sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-linha__quando { color: var(--ch-sutil); }
.ch-pref-cartao { display: flex; flex-direction: column; gap: 10px; padding: 22px; }

/* conversa do chamado */
.ch-conv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ch-conv__topo { display: flex; flex-direction: column; gap: 14px; padding: 20px 28px 16px; border-bottom: 1px solid var(--ch-borda); }
.ch-conv__linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ch-conv__titulo { flex: 1; min-width: 0; }
.ch-conv__kick { margin: 0; color: var(--ch-roxo); font-size: 13px; font-weight: 800; }
.ch-conv__titulo h1 { margin: 4px 0 0; font-family: var(--ch-titulo); font-size: 27px; line-height: 1.1; color: var(--ch-texto); overflow-wrap: anywhere; }
.ch-conv__titulo h1:focus { outline: none; }
.ch-selo--grande { padding: 6px 14px; font-size: 13px; }
.ch-voltar { display: none; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 1.5px solid var(--ch-borda); border-radius: 999px; background: #fff; color: var(--ch-roxo); cursor: pointer; }
.ch-progresso { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.ch-progresso li { display: flex; flex-direction: column; gap: 6px; color: var(--ch-sutil); font-size: 12px; font-weight: 800; }
.ch-progresso__barra { height: 6px; border-radius: 999px; background: var(--ch-borda); }
.ch-progresso--feito, .ch-progresso--atual { color: var(--ch-texto); }
.ch-progresso--feito .ch-progresso__barra { background: var(--ch-roxo); }
.ch-progresso--atual .ch-progresso__barra { background: var(--ch-amarelo); }
.ch-conv__fio { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 28px; background: var(--ch-branco); overflow-y: auto; }
.ch-bolha { display: flex; flex-direction: column; max-width: min(560px, 92%); }
.ch-bolha--minha { align-self: flex-end; align-items: flex-end; }
.ch-bolha--loop { align-self: flex-start; }
.ch-quem { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--ch-sutil); }
.ch-quem strong { color: var(--ch-texto); }
.ch-av { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ch-borda); color: var(--ch-texto); font-size: 11px; font-weight: 800; }
.ch-av--loop { display: block; object-fit: cover; border-radius: 8px; background: var(--ch-roxo); }
.ch-msg-txt { padding: 14px 16px; border-radius: 18px; font-size: 15px; line-height: 1.55; color: var(--ch-texto); overflow-wrap: anywhere; text-align: left; }
.ch-msg-txt ul { margin: 4px 0; padding-left: 20px; }
.ch-bolha--minha .ch-msg-txt { background: #fff; border: 1px solid var(--ch-borda); }
.ch-bolha--loop .ch-msg-txt { background: var(--ch-nevoa); }
.ch-bolha__arqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ch-chip-arq { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--ch-borda); border-radius: 10px; background: #fff; color: var(--ch-texto); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.ch-chip-arq .ch-icone { width: 15px; height: 15px; stroke-width: 1.9; }
.ch-chip-arq:hover { border-color: var(--ch-lilas); }
.ch-chip-arq--off { cursor: default; color: var(--ch-corpo); }
.ch-chip-arq--off:hover { border-color: var(--ch-borda); }
.ch-chip-arq small { color: var(--ch-sutil); font-weight: 600; }
.ch-evento { align-self: center; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--ch-neutro-bg); color: var(--ch-neutro); font-size: 12px; text-align: center; }
.ch-central p.ch-evento { margin: 0; }
.ch-aguarda { align-self: center; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-radius: 14px; background: var(--ch-aviso-bg); color: #5c4300; font-size: 13px; font-weight: 700; text-align: center; }
.ch-central p.ch-aguarda { margin: 0; }
.ch-aguarda--ok { background: var(--ch-sucesso-bg); color: var(--ch-sucesso); }
.ch-compor { margin: 0; padding: 16px 28px 20px; border-top: 1px solid var(--ch-borda); background: #fff; }
.ch-compor__caixa { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--ch-lilas); border-radius: 18px; box-shadow: var(--ch-sombra); }
.ch-compor__rotulo { margin: 0; color: var(--ch-texto); font-size: 13px; font-weight: 800; }
.ch-central .ch-compor textarea { display: block; min-height: 0; margin: 0; padding: 0; border: 0; resize: none; font-size: 15px; font-weight: 600; box-shadow: none; }
.ch-central .ch-compor textarea:focus-visible { outline: none; }
.ch-compor__caixa:focus-within { border-color: var(--ch-roxo); }
.ch-compor__barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-compor__ferr { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-ferr { display: inline-flex; align-items: center; gap: 6px; height: 38px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--ch-fundo); color: var(--ch-roxo); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ch-ferr .ch-icone { width: 16px; height: 16px; stroke-width: 1.9; }
.ch-ferr:hover { background: var(--ch-nevoa); }
.ch-ferr:focus-within { outline: 3px solid var(--ch-amarelo); outline-offset: 2px; }
.ch-enviar { height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ch-roxo); color: #fff; font-family: var(--ch-titulo); font-weight: 700; font-size: 16px; cursor: pointer; }
.ch-enviar:hover { background: var(--ch-roxo-hover); }
.ch-enviar[disabled] { opacity: .6; cursor: progress; }
.ch-conv .ch-avaliar { margin: 0; border-radius: 0; border-top: 1px solid var(--ch-borda); padding: 18px 28px; }
.ch-conv__nota { margin: 0; border-radius: 0; padding: 14px 28px; }

/* painel de informações */
.ch-info { width: 300px; flex: none; display: flex; flex-direction: column; gap: 22px; padding: 22px 20px; box-sizing: border-box; background: #fff; border-left: 1px solid var(--ch-borda); overflow-y: auto; }
.ch-ttl { margin: 0 0 10px; color: var(--ch-sutil); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ch-central p.ch-ttl { margin: 0 0 10px; }
.ch-prazos { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--ch-fundo); font-size: 13px; }
.ch-prazos > div { display: flex; justify-content: space-between; gap: 8px; }
.ch-prazos strong { color: var(--ch-texto); text-align: right; }
.ch-prazos small { color: var(--ch-sutil); font-size: 12px; }
.ch-ok { color: var(--ch-sucesso) !important; }
.ch-dl2 { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; margin: 0; font-size: 13px; }
.ch-dl2 dt { color: var(--ch-sutil); }
.ch-dl2 dd { margin: 0; color: var(--ch-texto); font-weight: 700; overflow-wrap: anywhere; }
.ch-info-txt { font-size: 13px; color: var(--ch-texto); }
.ch-arqs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ch-pessoas { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: var(--ch-texto); }
.ch-pessoas li { display: flex; align-items: center; gap: 8px; }
.ch-pessoas__add { flex-wrap: wrap; }
.ch-x { margin-left: auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ch-sutil); font-size: 18px; line-height: 1; cursor: pointer; }
.ch-x:hover { background: var(--ch-erro-bg); color: var(--ch-erro); }
.ch-mais-link { padding: 0; border: 0; background: none; color: var(--ch-roxo); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ch-central .ch-pessoas select { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.ch-info__fim { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ch-info__fim .ch-check { font-size: 13px; font-weight: 600; }
.ch-info__fim input[type=checkbox] { accent-color: var(--ch-roxo); }
.ch-acao-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ch-roxo); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ch-acao-link--perigo { color: var(--ch-erro); }
.ch-acao-link:hover { text-decoration: underline; }

/* abertura guiada dentro da área */
.ch-app[data-modo=novo] .ch-area { padding: 28px 32px; }
.ch-assistente .ch-painel-topo h1 { margin: 2px 0 0; font-family: var(--ch-titulo); font-size: 30px; line-height: 1.1; color: var(--ch-texto); }
.ch-assistente .ch-painel-topo h1:focus { outline: none; }
.ch-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; color: var(--ch-sutil); text-align: center; }
.ch-painel-topo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ch-salvo { margin-left: auto; color: var(--ch-sucesso); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ch-ponto { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--ch-roxo); vertical-align: middle; }
.ch-avaliar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 18px; border-radius: var(--ch-raio-card); background: var(--ch-nevoa); }
.ch-avaliar h3 { font-size: 20px; }
.ch-notas { display: flex; gap: 8px; }
.ch-nota-btn { width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--ch-borda); border-radius: 50%; background: #fff; color: var(--ch-roxo); font-family: var(--ch-titulo); font-size: 18px; font-weight: 800; cursor: pointer; }
.ch-nota-btn:hover { background: var(--ch-amarelo); border-color: var(--ch-amarelo); color: var(--ch-uva); }


/* ---------- abertura guiada (B3) ---------- */
.ch-passos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; padding: 0; }
.ch-passo { display: flex; align-items: center; gap: 10px; color: var(--ch-sutil); font-size: 14px; font-weight: 800; }
.ch-passo__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ch-borda); color: var(--ch-sutil); font-size: 13px; }
.ch-passo__n .ch-icone { width: 16px; height: 16px; stroke-width: 2.6; }
.ch-passo--feito .ch-passo__n { background: var(--ch-roxo); color: #fff; }
.ch-passo--feito { color: var(--ch-texto); }
.ch-passo--atual .ch-passo__n { background: var(--ch-amarelo); color: var(--ch-uva); box-shadow: 0 0 0 4px var(--ch-amarelo-suave); }
.ch-passo--atual { color: var(--ch-texto); }
.ch-assistente__grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.ch-assistente__form { display: flex; flex-direction: column; gap: 20px; padding: 26px; border: 1px solid var(--ch-borda); border-radius: var(--ch-raio-card); background: #fff; box-shadow: var(--ch-sombra); }
.ch-assistente__lado { display: flex; flex-direction: column; gap: 12px; }
.ch-assistente__lado .ch-faixa { margin: 0; }
.ch-soltar { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px; border: 1.5px dashed var(--ch-lilas); border-radius: 18px; background: var(--ch-branco); color: var(--ch-roxo); cursor: pointer; }
.ch-soltar span { display: flex; flex-direction: column; gap: 2px; }
.ch-soltar strong { color: var(--ch-texto); font-size: 15px; }
.ch-soltar small { color: var(--ch-sutil); font-size: 13px; font-weight: 600; }
.ch-soltar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ch-soltar:focus-within { outline: 3px solid var(--ch-amarelo); outline-offset: 2px; }
.ch-arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-arquivos:empty { display: none; }
.ch-arquivo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px solid var(--ch-borda); border-radius: 12px; color: var(--ch-texto); font-size: 14px; font-weight: 700; }
.ch-arquivo__nome { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ch-arquivo small { color: var(--ch-sutil); font-weight: 600; }
.ch-arquivo--falhou { border-color: rgba(180, 35, 24, .35); background: var(--ch-erro-bg); }
.ch-arquivo--falhou small { color: var(--ch-erro); }
.ch-arquivo--enviado small { color: var(--ch-sucesso); }
.ch-revisao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.ch-revisao div { min-width: 0; }
.ch-revisao dt { color: var(--ch-sutil); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ch-revisao dd { margin: 4px 0 0; color: var(--ch-texto); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ch-revisao--largo { grid-column: 1 / -1; }
.ch-pre { white-space: pre-wrap; font-weight: 600 !important; }

/* ---------- atendimento (matriz) e componentes compartilhados ---------- */
.ch-cartao { background: #fff; border: 1px solid var(--ch-borda); border-radius: var(--ch-raio-card); padding: 22px; margin: 14px 0; box-shadow: var(--ch-sombra); }
.ch-barra, .ch-filtros, .ch-acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ch-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-abas--modulo { display: inline-flex; margin: 8px 0 12px; padding: 4px; border: 1px solid var(--ch-borda); border-radius: 999px; background: #fff; }
.ch-abas button { min-height: 38px; border: 0; background: transparent; border-radius: 999px; padding: 0 16px; cursor: pointer; color: var(--ch-sutil); font-weight: 800; }
.ch-abas button[aria-selected="true"] { background: var(--ch-uva); color: #fff; }
.ch-nota { background: var(--ch-nevoa); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--ch-texto); }
.ch-aviso { background: var(--ch-aviso-bg); border-radius: var(--ch-raio); padding: 12px 14px; margin: 6px 0; color: #5c4300; }
.ch-rolagem { overflow-x: auto; border: 1px solid var(--ch-borda); border-radius: var(--ch-raio-card); background: #fff; }
.ch-tabela { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.ch-tabela caption { text-align: left; font-weight: 800; padding: 8px 0; color: var(--ch-texto); }
.ch-tabela th { text-align: left; background: var(--ch-branco); color: var(--ch-sutil); padding: 12px 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ch-borda); }
.ch-tabela td { padding: 12px; border-top: 1px solid var(--ch-borda); vertical-align: top; color: var(--ch-texto); }
.ch-tabela tr[data-id], .ch-tabela tr[data-incidente] { cursor: pointer; }
.ch-tabela tr[data-id]:hover, .ch-tabela tr[data-incidente]:hover { background: var(--ch-branco); }
.ch-tabela tr[tabindex]:focus-visible { outline: 3px solid var(--ch-amarelo); outline-offset: -3px; }
.ch-nao-lido td:first-child { box-shadow: inset 4px 0 0 var(--ch-amarelo); }
.ch-sla-vencido td:first-child { box-shadow: inset 4px 0 0 var(--ch-erro); }
.ch-sla-proximo td:first-child { box-shadow: inset 4px 0 0 var(--ch-amarelo); }
.ch-pill { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ch-pill--info { background: #f2e9fb; color: var(--ch-roxo); }
.ch-pill--aviso { background: var(--ch-aviso-bg); color: var(--ch-aviso); }
.ch-pill--erro { background: var(--ch-erro-bg); color: var(--ch-erro); }
.ch-pill--sucesso { background: var(--ch-sucesso-bg); color: var(--ch-sucesso); }
.ch-pill--neutro { background: var(--ch-neutro-bg); color: var(--ch-neutro); }
.ch-badge { background: var(--ch-amarelo); color: var(--ch-uva); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 800; }
.ch-tag { background: var(--ch-neutro-bg); color: var(--ch-neutro); border-radius: 6px; padding: 0 6px; font-size: 11px; }
.ch-detalhe-topo h3 { margin: 6px 0; color: var(--ch-texto); font-size: 24px; overflow-wrap: anywhere; }
.ch-detalhe-topo h3:focus { outline: none; }
.ch-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ch-sutil); margin-bottom: 12px; }
.ch-dl { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 8px 14px; font-size: 14px; }
.ch-dl dt { color: var(--ch-sutil); font-weight: 700; }
.ch-dl dd { margin: 0; overflow-wrap: anywhere; color: var(--ch-texto); }
.ch-diag { background: var(--ch-uva); color: #f3eefb; padding: 14px; border-radius: var(--ch-raio); max-height: 360px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
/* Nota interna: visualmente distinta (fundo amarelo, selo) — nunca é enviada ao cliente. */
.ch-msg--interna { align-self: flex-end; background: #fff8de; border: 2px dashed #c99a00; }
.ch-selo-interna { display: inline-block; background: #ffe08a; color: var(--ch-uva); font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 8px; margin-bottom: 4px; text-transform: uppercase; }
.ch-responder--interna { background: #fff8de; border: 2px dashed #c99a00; }
.ch-tipo { border: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.ch-historico { padding-left: 18px; }
.ch-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; }
.ch-kpis > div { background: #fff; border: 1px solid var(--ch-borda); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ch-kpis strong { font-family: var(--ch-titulo); font-size: 28px; line-height: 1; color: var(--ch-texto); }
.ch-kpis span { font-size: 13px; font-weight: 700; color: var(--ch-sutil); }
.ch-kpi--erro strong { color: var(--ch-erro); }
.ch-kpi--aviso strong { color: var(--ch-aviso); }
.ch-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ch-sla-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ch-sla-linha input[type=number] { width: 80px; }
.ch-toast { position: fixed; right: 16px; bottom: 16px; background: var(--ch-uva, #3B1D5C); color: #fff; padding: 12px 16px; border-radius: 14px; max-width: min(420px, calc(100vw - 32px)); z-index: 1200; font-family: 'Nunito', Arial, sans-serif; box-shadow: 0 20px 48px rgba(59, 29, 92, .28); }
.ch-toast[data-tipo=error] { background: #b42318; }

/* Dentro do Loop Mais o style.css global dá estilo a todo botão no hover: aqui os botões têm estado próprio. */
#chamadosAtendimentoPanel button:hover { transform: none; box-shadow: none; }
#chamadosAtendimentoPanel button { width: auto; }

/* ---------- Chamados v2 — atendimento: caixas + mesa em três colunas + gestão ---------- */
.cha-app { display: flex; height: calc(100vh - 150px); min-height: 600px; background: var(--ch-fundo); border: 1px solid var(--ch-borda); border-radius: var(--ch-raio-card); overflow: hidden; color: var(--ch-corpo); font-family: var(--ch-fonte); }
.cha-app button { font-family: inherit; }
.cha-lado { width: 212px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; box-sizing: border-box; background: #fff; border-right: 1px solid var(--ch-borda); overflow-y: auto; }
.ch-central .cha-lado h2 { margin: 0 10px 10px; font-size: 21px; }
.cha-sec { margin: 14px 10px 4px; color: var(--ch-sutil); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ch-central p.cha-sec { margin: 14px 10px 4px; }
.ch-central p.cha-sec--topo { margin-top: 0; }
.cha-sec--acao { display: flex; align-items: center; justify-content: space-between; }
.cha-sec__btn { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ch-roxo); cursor: pointer; }
.cha-sec__btn .ch-icone { width: 14px; height: 14px; stroke-width: 2.4; }
.cha-sec__btn:hover { background: var(--ch-nevoa); }
.cha-nv { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ch-texto); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.cha-nv:hover { background: var(--ch-branco); }
.cha-nv--on, .cha-nv--on:hover { background: var(--ch-nevoa); color: var(--ch-roxo); }
.cha-cnt { display: grid; place-items: center; min-width: 22px; height: 20px; margin-left: auto; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--ch-borda); color: var(--ch-texto); font-size: 11px; font-weight: 800; }
.cha-cnt:empty { display: none; }
.cha-cnt--erro { background: var(--ch-erro-bg); color: var(--ch-erro); }
.cha-cnt--aviso { background: var(--ch-aviso-bg); color: var(--ch-aviso); }
.cha-cnt--forte { background: var(--ch-roxo); color: #fff; }
.cha-visao { display: flex; align-items: center; }
.cha-visao .cha-x { opacity: 0; }
.cha-visao:hover .cha-x, .cha-visao .cha-x:focus-visible { opacity: 1; }
.cha-vazio-mini { margin: 4px 10px; color: var(--ch-sutil); font-size: 12px; }
.ch-central p.cha-vazio-mini { margin: 4px 10px; }
.cha-fila__lista .cha-vazio-mini { margin: 24px 14px; text-align: center; }
.cha-x { width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ch-sutil); font-size: 18px; line-height: 1; cursor: pointer; }
.cha-x:hover { background: var(--ch-erro-bg); color: var(--ch-erro); }
.cha-area { flex: 1; min-width: 0; overflow-y: auto; }
.cha-area--mesa { display: flex; overflow: hidden; }
.cha-app :is(button, a, input, select, textarea, [tabindex]:not(h1)):focus-visible { outline: 3px solid var(--ch-amarelo); outline-offset: 2px; }
.cha-app h1:focus, .ch-app h1:focus { outline: none; }
/* style.css do Loop Mais dá largura, transform e sombra a botões: a mesa mantém as medidas do desenho. */
#chamadosAtendimentoPanel .cha-tk { width: 100%; max-width: none; transform: none; box-shadow: none; }
#chamadosAtendimentoPanel .cha-tk--on { box-shadow: inset 3px 0 0 var(--ch-roxo); }
#chamadosAtendimentoPanel .cha-tb { width: 32px; min-width: 32px; height: 32px; }
#chamadosAtendimentoPanel .cha-compor__barra { gap: 4px; }

/* fila */
.cha-fila { width: 318px; flex: none; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--ch-borda); min-height: 0; }
.cha-fila__topo { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-bottom: 1px solid var(--ch-borda); }
.cha-fila__titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cha-fila__titulo > strong { font-family: var(--ch-titulo); font-size: 18px; color: var(--ch-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cha-fila__ferr { display: flex; align-items: center; gap: 2px; flex: none; }
.cha-ordem { padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: var(--ch-corpo); font-size: 12px; cursor: pointer; }
.cha-ordem strong { color: var(--ch-texto); }
.cha-ordem:hover { background: var(--ch-fundo); }
.cha-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ch-roxo); cursor: pointer; }
.cha-ico .ch-icone { width: 17px; height: 17px; stroke-width: 1.9; }
.cha-ico:hover, .cha-ico[aria-expanded=true] { background: var(--ch-nevoa); }
.cha-busca { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 10px; box-sizing: border-box; border: 1.5px solid var(--ch-borda); border-radius: 10px; color: var(--ch-sutil); }
.cha-busca .ch-icone { width: 17px; height: 17px; stroke-width: 1.9; }
.ch-central .cha-busca input:not([type=checkbox]):not([type=radio]):not([type=file]) { flex: 1; min-width: 0; min-height: 0; height: 34px; padding: 0; border: 0; background: none; font-size: 13px; box-shadow: none; }
.ch-central .cha-busca input:focus-visible { outline: none; }
.cha-busca:focus-within { border-color: var(--ch-lilas); }
.cha-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-central .cha-filtros select, .ch-central .cha-filtros input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 34px; padding: 4px 8px; border-radius: 10px; font-size: 13px; }
.cha-filtros label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11px; font-weight: 800; color: var(--ch-sutil); }
.cha-filtros__acoes { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.cha-fila__lista { flex: 1; overflow-y: auto; }
.cha-tk { display: flex; flex-direction: column; gap: 5px; width: 100%; margin: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ch-borda); border-radius: 0; background: #fff; color: var(--ch-corpo); text-align: left; cursor: pointer; }
.cha-tk:hover { background: var(--ch-branco); }
.cha-tk--on, .cha-tk--on:hover { background: var(--ch-nevoa); box-shadow: inset 3px 0 0 var(--ch-roxo); }
.cha-tk__l1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cha-tk__l1 strong { color: var(--ch-roxo); font-size: 12px; }
.cha-tk__assunto { color: var(--ch-texto); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.cha-tk__meta { font-size: 12px; }
.cha-tk__sla { font-size: 11px; font-weight: 800; }
.cha-tk__sla--erro { color: var(--ch-erro); }
.cha-tk__sla--aviso { color: var(--ch-aviso); }
.cha-tk__sla--ok { color: var(--ch-sucesso); }
.cha-tk__sla--pausa { color: var(--ch-sutil); }
.cha-pr { flex: none; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.cha-pr--erro { background: var(--ch-erro-bg); color: var(--ch-erro); }
.cha-pr--aviso { background: var(--ch-aviso-bg); color: var(--ch-aviso); }
.cha-pr--neutro { background: var(--ch-neutro-bg); color: var(--ch-neutro); }
.cha-barra { display: block; height: 4px; border-radius: 999px; background: var(--ch-borda); overflow: hidden; }
.cha-barra__v { display: block; height: 100%; }
.cha-barra__v--erro { background: var(--ch-erro); }
.cha-barra__v--aviso { background: var(--ch-amarelo); }
.cha-barra__v--ok { background: var(--ch-sucesso); }
.cha-barra__v--pausa { background: var(--ch-lilas); }
.cha-barra__v--roxo { background: var(--ch-roxo); }

/* conversa */
.cha-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; min-height: 0; }
.cha-conv__vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 24px; text-align: center; background: var(--ch-branco); }
.ch-central .cha-conv__vazio h3 { font-size: 22px; }
.cha-kick { margin: 0; color: var(--ch-roxo); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ch-central p.cha-kick { margin: 0; }
.cha-conv__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ch-borda); }
.cha-conv__titulo { flex: 1; min-width: 0; }
.cha-conv__titulo p { margin: 0; color: var(--ch-roxo); font-size: 12px; font-weight: 800; }
.cha-conv__titulo h1 { margin: 2px 0 0; font-family: var(--ch-titulo); font-size: 22px; line-height: 1.1; color: var(--ch-texto); overflow-wrap: anywhere; }
.cha-conv__titulo h1:focus { outline: none; }
.cha-conv__acoes { display: flex; gap: 6px; flex: none; }
.cha-pilula { height: 36px; padding: 0 12px; border: 1.5px solid var(--ch-borda); border-radius: 999px; background: #fff; color: var(--ch-roxo); font-size: 13px; font-weight: 800; cursor: pointer; }
.cha-pilula:hover { background: var(--ch-nevoa); }
.cha-pilula--verde { border: 0; background: var(--ch-sucesso); color: #fff; }
.cha-pilula--verde:hover { background: #105c38; }
.cha-pilula--primaria { border: 0; background: var(--ch-roxo); color: #fff; }
.cha-pilula--primaria:hover { background: var(--ch-roxo-hover); }
.cha-pilula[disabled] { opacity: .6; cursor: progress; }
.cha-conv__fio { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--ch-branco); overflow-y: auto; }
.cha-m { display: flex; flex-direction: column; max-width: min(520px, 92%); }
.cha-m--interna, .cha-m--loop { align-self: flex-end; align-items: flex-end; }
.cha-who { margin-bottom: 4px; color: var(--ch-sutil); font-size: 12px; }
.cha-who strong { color: var(--ch-texto); }
.cha-msg { padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; color: var(--ch-texto); text-align: left; overflow-wrap: anywhere; }
.cha-msg ul { margin: 4px 0; padding-left: 20px; }
.cha-m--cliente .cha-msg { background: #fff; border: 1px solid var(--ch-borda); }
.cha-m--loop .cha-msg { background: var(--ch-nevoa); }
.cha-m--interna .cha-msg { background: #fff8de; border: 2px dashed #c99a00; }
.cha-evt { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--ch-neutro-bg); color: var(--ch-neutro); font-size: 12px; text-align: center; }
.cha-conv__fim { margin: 0; padding: 14px 20px; border-top: 1px solid var(--ch-borda); color: var(--ch-sutil); font-size: 14px; }
.cha-compor { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--ch-borda); background: #fff; }
.cha-compor__abas { display: flex; gap: 4px; margin-bottom: 8px; }
.cha-compor__abas button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ch-fundo); color: var(--ch-sutil); font-size: 13px; font-weight: 800; cursor: pointer; }
.cha-compor__abas [data-tipo=publica][aria-selected=true] { background: var(--ch-uva); color: #fff; }
.cha-compor__abas [data-tipo=interna] { background: #fff8de; color: var(--ch-aviso); }
.cha-compor__abas [data-tipo=interna][aria-selected=true] { background: #c99a00; color: #fff; }
.cha-compor__caixa { border: 1.5px solid var(--ch-lilas); border-radius: 16px; overflow: visible; background: #fff; }
.cha-compor--interna .cha-compor__caixa { border: 2px dashed #c99a00; background: #fffdf4; }
.cha-compor__barra { display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--ch-borda); border-radius: 16px 16px 0 0; background: var(--ch-branco); flex-wrap: wrap; }
.cha-compor--interna .cha-compor__barra { background: #fff8de; }
.cha-tb { display: grid; place-items: center; width: 32px; height: 32px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ch-roxo); font-size: 14px; cursor: pointer; }
.cha-tb .ch-icone { width: 17px; height: 17px; stroke-width: 1.9; }
.cha-tb:hover { background: var(--ch-nevoa); }
.cha-tb:focus-within { outline: 3px solid var(--ch-amarelo); outline-offset: 2px; }
.cha-compor__sep { width: 1px; height: 20px; margin: 0 6px; background: var(--ch-borda); }
.cha-pronta { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--ch-borda); border-radius: 8px; background: #fff; color: var(--ch-roxo); font-size: 12px; font-weight: 800; cursor: pointer; }
.cha-pronta .ch-icone { width: 14px; height: 14px; }
.cha-pronta:hover { border-color: var(--ch-lilas); }
.cha-compor__dica { margin-left: auto; color: var(--ch-sutil); font-size: 12px; }
.cha-compor__dica strong { color: var(--ch-texto); }
.cha-compor__texto { position: relative; }
.ch-central .cha-compor textarea { display: block; width: 100%; min-height: 0; margin: 0; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; resize: none; font-size: 14px; font-weight: 600; box-shadow: none; }
.ch-central .cha-compor textarea:focus-visible { outline: none; }
.cha-compor__caixa:focus-within { border-color: var(--ch-roxo); }
.cha-compor--interna .cha-compor__caixa:focus-within { border-color: #a37c00; }
.cha-sug { position: absolute; left: 12px; bottom: calc(100% + 6px); z-index: 5; width: min(360px, calc(100% - 24px)); max-height: 240px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; background: #fff; border: 1px solid var(--ch-borda); border-radius: 14px; box-shadow: var(--ch-sombra-forte); }
.cha-sug li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--ch-texto); font-size: 13px; cursor: pointer; }
.cha-sug li span { color: var(--ch-sutil); font-size: 12px; }
.cha-sug li[aria-selected=true], .cha-sug li:hover { background: var(--ch-nevoa); }
.cha-sug .cha-sug__vazio { color: var(--ch-sutil); cursor: default; }
.cha-compor__rodape { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ch-borda); flex-wrap: wrap; }
.cha-depois { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ch-corpo); font-size: 12px; font-weight: 700; }
.cha-sel { height: 36px; padding: 0 10px; border: 1.5px solid var(--ch-borda); border-radius: 10px; background: #fff; color: var(--ch-texto); font-size: 13px; font-weight: 700; }
.ch-central select.cha-sel { min-height: 0; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
.ch-central .cha-depois select.cha-sel { height: 32px; width: auto; }
.cha-para { margin-left: auto; color: var(--ch-sutil); font-size: 12px; white-space: nowrap; }
.cha-compor__rodape .cha-enviar { margin-left: auto; }
.cha-para + .cha-enviar { margin-left: 0; }
.cha-enviar { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ch-roxo); color: #fff; font-family: var(--ch-titulo) !important; font-weight: 700; font-size: 15px; cursor: pointer; }
.cha-enviar:hover { background: var(--ch-roxo-hover); }
.cha-compor--interna .cha-enviar { background: #a37c00; }
.cha-enviar[disabled] { opacity: .6; cursor: progress; }

/* propriedades */
.cha-props { width: 290px; flex: none; display: flex; flex-direction: column; gap: 18px; padding: 16px; box-sizing: border-box; background: #fff; border-left: 1px solid var(--ch-borda); overflow-y: auto; }
.cha-props:empty { display: none; }
.cha-ttl { margin: 0 0 8px; color: var(--ch-sutil); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ch-central p.cha-ttl { margin: 0 0 8px; }
.cha-cliente { display: flex; align-items: center; gap: 10px; }
.cha-cliente strong { display: block; color: var(--ch-texto); font-size: 14px; }
.cha-cliente span:not(.cha-av) { font-size: 12px; }
.cha-av { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--ch-nevoa); color: var(--ch-roxo); font-weight: 800; }
.cha-prazos { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cha-prazos__l { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cha-prazos__l strong { color: var(--ch-texto); }
.cha-t--erro { color: var(--ch-erro) !important; }
.cha-t--aviso { color: var(--ch-aviso) !important; }
.cha-t--ok { color: var(--ch-sucesso) !important; }
.cha-t--pausa { color: var(--ch-sutil) !important; }
.cha-campos { display: flex; flex-direction: column; gap: 10px; }
.ch-central .cha-campos .cha-ttl { margin: 0; }
.cha-campo { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--ch-sutil); font-size: 12px; font-weight: 800; }
.cha-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cha-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ch-neutro-bg); color: var(--ch-neutro); font-size: 12px; font-weight: 700; }
.cha-tag button { padding: 0; border: 0; background: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.cha-tag--add { border: 1px dashed var(--ch-lilas); background: #fff; color: var(--ch-roxo); cursor: pointer; }
.cha-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
.cha-links > button, .cha-inc button { padding: 0; border: 0; background: none; color: var(--ch-roxo); font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; }
.cha-links > button:hover, .cha-inc button:hover { color: var(--ch-uva); text-decoration: underline; }
.cha-inc { color: var(--ch-texto); font-weight: 700; }
.cha-inc button { margin-left: 4px; font-weight: 700; }
.cha-sutil { color: var(--ch-sutil); font-size: 12px; }
.cha-info-txt { font-size: 13px; color: var(--ch-corpo); }
.cha-arqs { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; font-size: 13px; }
.cha-arqs li { display: flex; flex-direction: column; }
.cha-arqs button { padding: 0; border: 0; background: none; color: var(--ch-roxo); font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.cha-arqs small { color: var(--ch-sutil); }
.cha-det summary { color: var(--ch-roxo); font-size: 13px; font-weight: 800; cursor: pointer; }
.cha-envios, .cha-hist { margin: 8px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.5; }
.cha-envios li { display: flex; flex-direction: column; margin-bottom: 6px; }
.cha-hist time { color: var(--ch-sutil); }

/* páginas de gestão (painel, incidentes, respostas, configurações) */
.cha-pagina { display: flex; flex-direction: column; gap: 16px; padding: 22px 26px; }
.cha-pagina > .ch-cartao, .cha-pagina > section.ch-cartao { margin: 0; }
.cha-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cha-cab h1 { margin: 2px 0 0; font-family: var(--ch-titulo); font-size: 30px; line-height: 1; color: var(--ch-texto); }
.cha-cab h1:focus { outline: none; }
.cha-cab p.cha-sutil { margin-top: 6px; font-size: 13px; }
.cha-periodo { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--ch-borda); border-radius: 999px; background: #fff; }
.cha-periodo button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ch-sutil); font-size: 13px; font-weight: 800; cursor: pointer; }
.cha-periodo button[aria-selected=true] { background: var(--ch-uva); color: #fff; }
.cha-alerta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ch-erro-bg); color: var(--ch-erro); font-size: 14px; font-weight: 700; }
.cha-alerta button { margin-left: auto; padding: 0; border: 0; background: none; color: var(--ch-erro); font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cha-card { padding: 18px; background: #fff; border: 1px solid var(--ch-borda); border-radius: 18px; }
.ch-central .cha-card h3 { margin: 2px 0 12px; font-size: 18px; line-height: 1.1; }
.cha-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cha-kpi { display: flex; flex-direction: column; gap: 4px; }
.cha-kpi span { color: var(--ch-sutil); font-size: 12px; font-weight: 700; }
.cha-kpi strong { display: block; font-family: var(--ch-titulo); font-size: 30px; line-height: 1; color: var(--ch-texto); }
.cha-kpi em, .cha-kpi__link { color: var(--ch-sutil); font-size: 12px; font-style: normal; font-weight: 800; }
.cha-kpi__link { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; }
.cha-grade2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.cha-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cha-grafico { display: flex; align-items: flex-end; gap: 6px; height: 150px; border-bottom: 1px solid var(--ch-borda); }
.cha-grafico__b { flex: 1; min-width: 2px; border-radius: 6px 6px 0 0; background: var(--ch-lilas); }
.cha-grafico__b--claro { background: var(--ch-borda); }
.cha-grafico__b--pico { background: var(--ch-roxo); }
.cha-legenda { margin: 8px 0 0; color: var(--ch-sutil); font-size: 12px; }
.ch-central p.cha-legenda { margin: 8px 0 0; }
.cha-row { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ch-texto); font-size: 13px; }
.cha-row strong { text-align: right; }
.cha-track { display: block; height: 10px; border-radius: 999px; background: var(--ch-borda); overflow: hidden; }
.cha-track span { display: block; height: 100%; background: var(--ch-roxo); }
.cha-li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ch-borda); color: var(--ch-texto); font-size: 13px; }
.cha-li--fim { border-bottom: 0; }
.cha-det--pagina { padding: 0 2px; }
.cha-det--pagina .cha-grade3 { margin-top: 12px; }
.cha-macros { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cha-macro { display: flex; flex-direction: column; gap: 8px; }
.cha-macro header { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ch-texto); }
.cha-macro__txt { max-height: 120px; overflow: hidden; color: var(--ch-corpo); font-size: 13px; line-height: 1.5; }
.cha-macro footer { color: var(--ch-sutil); font-size: 12px; font-weight: 700; }
.cha-macro--off { opacity: .6; }
.cha-so-estreito { display: none; }


/* ---------- diálogo próprio (página externa) ---------- */
.ch-dialogo { border: 0; border-radius: 22px; padding: 24px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 28px 64px rgba(59, 29, 92, .28); font-family: 'Nunito', Arial, sans-serif; color: #5C4A73; }
.ch-dialogo::backdrop { background: rgba(59, 29, 92, .45); }
.ch-dialogo h3 { margin: 0; color: #3B1D5C; font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 22px; }
.ch-dialogo .ch-btn { width: auto; }
.ch-dialogo .ch-btn--primario { background: #6C33A2; border-color: #6C33A2; color: #fff; }
.ch-dialogo input, .ch-dialogo textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #EAE0F5; border-radius: 14px; padding: 10px 12px; font: inherit; }
.ch-dialogo .ch-btn { border: 1.5px solid #EAE0F5; background: #fff; color: #6C33A2; border-radius: 999px; min-height: 44px; padding: 0 18px; font-weight: 700; cursor: pointer; }

/* ---------- responsivo ---------- */
@media (max-width: 1280px) {
  .cha-props { width: 260px; }
  .cha-fila { width: 290px; }
  .ch-info { width: 270px; }
  .ch-linha { grid-template-columns: 120px minmax(0, 1fr) 110px 140px 90px; }
}
@media (max-width: 1100px) {
  .ch-assistente__grade { grid-template-columns: 1fr; }
  .ch-kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cha-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cha-grade2, .cha-grade3 { grid-template-columns: 1fr; }
  .ch-lado { width: 210px; }
  .ch-info { width: 250px; }
  /* Mesa: com um chamado aberto, a fila sai de cena (botão Voltar) e conversa + propriedades ocupam a área. */
  .cha-area--aberto .cha-fila { display: none; }
  .cha-so-estreito { display: grid; }
}
@media (max-width: 900px) {
  /* Celular/tablet estreito: menus laterais viram faixas roláveis; uma coluna por vez. */
  .ch-app, .cha-app { flex-direction: column; height: auto; min-height: 0; }
  .ch-pagina .ch-app { height: auto; min-height: 100vh; }
  .ch-lado, .cha-lado { width: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--ch-borda); }
  .ch-lado__cabeca, .ch-sec, .ch-equipe, .cha-sec, .ch-central .cha-lado h2, .cha-vazio-mini { display: none; }
  .ch-lado__nav { flex-direction: row; gap: 6px; }
  .ch-abrir { flex: none; margin: 0; height: 40px; font-size: 15px; }
  .ch-nv, .cha-nv { flex: none; width: auto; white-space: nowrap; border: 1px solid var(--ch-borda); border-radius: 999px; min-height: 38px; }
  .cha-visao { flex: none; }
  .cha-visao .cha-x { display: none; }
  #chamadosAtendimentoPanel [data-ref=visoes] { display: flex; gap: 6px; }
  .ch-area, .cha-area { overflow: visible; }
  .ch-geral { padding: 18px 16px; }
  .ch-ola h1 { font-size: 28px; }
  .ch-procura, .ch-procura label { width: 100%; }
  .ch-linha--cabeca { display: none; }
  .ch-linha { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .ch-linha__protocolo { grid-column: 1; }
  .ch-linha > span:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; }
  .ch-linha__assunto { grid-column: 1 / -1; }
  .ch-linha__produto, .ch-linha__quando { font-size: 12px; color: var(--ch-sutil); }
  .ch-app[data-modo=chamado] .ch-area { overflow: visible; }
  .ch-conv__topo, .ch-conv__fio, .ch-compor { padding-left: 16px; padding-right: 16px; }
  .ch-conv__fio { max-height: none; overflow: visible; }
  .ch-conv__titulo h1 { font-size: 22px; }
  .ch-voltar { display: inline-grid; }
  .ch-progresso li { font-size: 11px; }
  .ch-info { width: auto; border-left: 0; border-top: 1px solid var(--ch-borda); }
  .ch-app[data-modo=novo] .ch-area { padding: 18px 16px; }
  .cha-area--mesa { flex-direction: column; }
  .cha-fila { width: auto; border-right: 0; }
  .cha-fila__lista { max-height: none; }
  .cha-area--aberto .cha-fila { display: none; }
  .cha-area--mesa:not(.cha-area--aberto) .cha-conv, .cha-area--mesa:not(.cha-area--aberto) .cha-props { display: none; }
  .cha-area--aberto .cha-props { display: flex; width: auto; border-left: 0; border-top: 1px solid var(--ch-borda); }
  .cha-so-estreito { display: grid; }
  .cha-conv__topo { flex-wrap: wrap; }
  .cha-conv__fio { overflow: visible; }
  .cha-compor__dica { display: none; }
  .cha-para { margin-left: 0; width: 100%; order: 3; }
  .cha-enviar { margin-left: auto; }
  .cha-pagina { padding: 18px 16px; }
  .cha-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-trilho { position: fixed; bottom: 0; top: auto; left: 0; right: 0; width: auto; height: 60px; flex-direction: row; justify-content: space-around; padding: 0 12px; border-right: 0; border-top: 1px solid var(--ch-borda); }
  .ch-trilho__marca { margin: 0; }
  .ch-trilho__usuario { margin: 0; }
  .ch-pagina { display: block; padding-bottom: 60px; }
}
@media (max-width: 640px) {
  .ch-opcoes--tres, .ch-duas, .ch-revisao { grid-template-columns: 1fr; }
  .ch-kpis4 { gap: 10px; }
  .ch-kpi { padding: 14px; gap: 10px; }
  .ch-kpi__ic { width: 36px; height: 36px; }
  .ch-assistente__form { padding: 18px; }
  .ch-salvo { display: none; }
  .ch-acoes .ch-btn { flex: 1 1 auto; }
  .ch-dl { grid-template-columns: 1fr; }
  .ch-dl dt { margin-top: 6px; }
  .ch-bolha, .cha-m { max-width: 100%; }
  .ch-compor__barra { flex-direction: column; align-items: stretch; }
  .ch-enviar { width: 100%; }
  .cha-depois { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-btn, .ch-opcao { transition: none; }
}

/* Anexos em destaque (31/10/2026): faixa acima da conversa + cartões no painel lateral (cliente e atendimento). */
.ch-anexos-faixa { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1.5px solid #e5d6f2; border-radius: 14px; background: #faf6fd; }
.ch-anexos-faixa__ttl { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ch-roxo, #6C33A2); font-size: 13px; }
.ch-anexos-faixa__ttl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-anexos-faixa__lista { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ch-anexos-faixa__lista .ch-anexo { flex: 0 0 auto; max-width: 280px; }
.ch-anexos-lista { display: grid; gap: 8px; }
.ch-anexo { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid #e5d6f2; border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; box-shadow: none; cursor: pointer; }
button.ch-anexo:hover { border-color: var(--ch-roxo, #6C33A2); background: #fff; box-shadow: 0 6px 16px rgba(108, 51, 162, .12); transform: none; }
.ch-anexo--off { cursor: default; opacity: .7; }
.ch-anexo__tipo { flex: 0 0 38px; display: grid; place-items: center; height: 38px; border-radius: 10px; background: #efe6f7; color: #6C33A2; font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.ch-anexo__tipo--pdf { background: #fdecec; color: #c62828; }
.ch-anexo__tipo--img { background: #e8f4fd; color: #1565c0; }
.ch-anexo__tipo--doc { background: #e8eefc; color: #2b4fb3; }
.ch-anexo__tipo--xls { background: #e7f6ee; color: #188b63; }
.ch-anexo__tipo--zip { background: #fff4de; color: #b26a00; }
.ch-anexo__nome { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ch-anexo__nome strong { overflow: hidden; color: var(--ch-texto, #33293a); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ch-anexo__nome small { color: var(--ch-sutil, #766d7c); font-size: 11px; }
.ch-anexo__baixar { flex: 0 0 30px; display: grid; place-items: center; height: 30px; border-radius: 50%; background: #6C33A2; color: #fff; }
.ch-anexo__baixar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cha-conv > .ch-anexos-faixa { margin: 0 18px 4px; }

/* Configurações do atendimento compactas (31/10/2026): blocos lado a lado, dias em uma linha, SLA em tabela. */
.cha-cfg { display: grid; gap: 14px; }
.cha-cfg__duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cha-cfg__bloco { margin: 0; padding: 16px 18px; border: 1px solid var(--ch-borda); border-radius: 14px; background: #fff; }
.cha-cfg__bloco h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ch-texto); font-size: 15px; }
.cha-cfg__bloco h4 small { color: var(--ch-sutil); font-size: 12px; font-weight: 600; }
details.cha-cfg__bloco > summary { list-style: none; cursor: pointer; }
details.cha-cfg__bloco > summary::-webkit-details-marker { display: none; }
details.cha-cfg__bloco > summary h4 { margin: 0; }
details.cha-cfg__bloco > summary h4::after { content: "▸"; margin-left: auto; color: var(--ch-sutil); font-size: 12px; }
details[open].cha-cfg__bloco > summary h4 { margin-bottom: 12px; }
details[open].cha-cfg__bloco > summary h4::after { content: "▾"; }
.cha-cfg label { display: grid; gap: 4px; margin: 0; color: var(--ch-texto); font-size: 13px; font-weight: 700; }
.cha-cfg label small { color: var(--ch-sutil); font-size: 11px; font-weight: 500; }
.cha-cfg input:not([type=checkbox]), .cha-cfg select { min-height: 36px; padding: 6px 10px; box-sizing: border-box; font-size: 13px; }
.cha-cfg__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.cha-cfg__largo { grid-column: 1 / -1; }
.cha-cfg__horario { display: grid; grid-template-columns: repeat(2, minmax(0, 140px)); gap: 12px; }
.cha-cfg__dias { display: flex; gap: 6px; margin: 0 0 12px; }
.cha-dia { display: inline-flex !important; cursor: pointer; }
.cha-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cha-dia span { display: grid; place-items: center; min-width: 46px; height: 34px; padding: 0 8px; border: 1.5px solid var(--ch-borda); border-radius: 999px; background: #fff; color: var(--ch-sutil); font-size: 12px; font-weight: 800; }
.cha-dia input:checked + span { border-color: #6C33A2; background: #6C33A2; color: #fff; }
.cha-dia input:focus-visible + span { outline: 3px solid var(--ch-amarelo, #FFB90A); outline-offset: 2px; }
.cha-cfg__sla { width: 100%; border-collapse: collapse; font-size: 13px; }
.cha-cfg__sla th, .cha-cfg__sla td { padding: 6px 8px; border-top: 1px solid var(--ch-borda); text-align: left; vertical-align: middle; }
.cha-cfg__sla thead th { border-top: 0; color: var(--ch-sutil); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cha-cfg__prazo { display: inline-flex; gap: 6px; }
.cha-cfg__prazo input { width: 72px; }
.cha-cfg__prazo select { width: 118px; }
.cha-cfg__sla td > select { width: 170px; }
.cha-cfg__rotinas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; }
.cha-cfg__check { display: inline-flex !important; align-items: center; gap: 8px; }
.cha-cfg__inline { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 600 !important; }
.cha-cfg__inline input { width: 64px; }
.cha-cfg__grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.cha-cfg__grupo { display: grid; gap: 6px; align-content: start; }
.cha-cfg__grupo > p { margin: 0 0 2px; color: var(--ch-roxo, #6C33A2); font-size: 12px; font-weight: 800; }
.cha-cfg__num { grid-template-columns: 1fr 80px; align-items: center; font-weight: 600 !important; }
.cha-cfg__num input { width: 80px; text-align: right; }
.cha-cfg__salvar { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; padding: 10px 0; background: linear-gradient(transparent, var(--ch-fundo, #F7F4FB) 35%); }
.cha-cfg .cha-sutil { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 1100px) { .cha-cfg__duas { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cha-cfg__campos { grid-template-columns: 1fr; }
  .cha-cfg__sla { display: block; overflow-x: auto; }
}
.cha-cfg__sla th, .cha-cfg__sla td { background: transparent !important; color: var(--ch-texto); box-shadow: none; }
.cha-cfg__sla thead th { color: var(--ch-sutil) !important; }
.cha-cfg__dias { flex-wrap: nowrap; }
.cha-cfg__rotulo { margin: 12px 0 6px; color: var(--ch-texto); font-size: 13px; font-weight: 700; }
.cha-dia { flex: 1 1 0; min-width: 0; }
.cha-dia span { width: 100%; min-width: 0; padding: 0 4px; }