/* Chat da QuickIA (chat.quickquality.com.br), no visual do sistema (tema Inspinia de style.css) */
:root {
  --qa-menu: #2f4050;
  --qa-menu-ativo: #293846;
  --qa-menu-texto: #a7b1c2;
  --qa-destaque: #19aa8d;
  --qa-primaria: #3d9990;
  --qa-primaria-escura: #337f78;
  --qa-quickia: #f06a25;
  --qa-fundo: #f3f3f4;
  --qa-borda: #e7eaec;
  --qa-borda-campo: #e5e6e7;
  --qa-texto: #676a6c;
  --qa-titulo: #2f4050;
  --qa-suave: #999c9e;
  --qa-erro: #ed5565;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  color: var(--qa-texto);
  background: var(--qa-fundo);
}

button, input, textarea { font: inherit; color: inherit; }

a { color: var(--qa-primaria); text-decoration: none; }
a:hover { color: var(--qa-primaria-escura); text-decoration: underline; }

/* ---------- Componentes do tema ---------- */
.qa-ibox { background: #fff; border-top: 2px solid var(--qa-borda); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.qa-ibox-titulo { display: flex; align-items: center; gap: 8px; padding: 14px 15px 9px; border-bottom: 1px solid var(--qa-borda); }
.qa-ibox-titulo h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--qa-titulo); }
.qa-ibox-conteudo { padding: 20px; }

.qa-campo { margin-bottom: 15px; }
.qa-campo label { display: block; margin-bottom: 5px; font-weight: 600; }

.qa-input { display: flex; align-items: stretch; border: 1px solid var(--qa-borda-campo); border-radius: 1px; background: #fff; transition: border-color .15s; }
.qa-input:focus-within { border-color: var(--qa-primaria); }
.qa-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 7px 12px; height: 34px; }
.qa-input button { border: 0; border-left: 1px solid var(--qa-borda-campo); background: #fff; padding: 0 12px; color: var(--qa-suave); cursor: pointer; }
.qa-input button:hover { color: var(--qa-texto); }

.qa-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--qa-primaria);
  border-radius: 3px;
  padding: 7px 14px;
  font-weight: 600;
  color: #fff;
  background: var(--qa-primaria);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.qa-botao:hover { background: var(--qa-primaria-escura); border-color: var(--qa-primaria-escura); }
.qa-botao:disabled { opacity: .7; cursor: wait; }
.qa-botao.bloco { width: 100%; padding: 9px 14px; }

.qa-alerta { display: none; gap: 8px; align-items: flex-start; margin-bottom: 15px; padding: 10px 12px; border: 1px solid #ebccd1; border-radius: 2px; color: #a94442; background: #f2dede; line-height: 1.45; }
.qa-alerta.visivel { display: flex; }
.qa-alerta i { margin-top: 2px; }

.qa-quickia-icone { width: 22px; height: 22px; object-fit: contain; }

/* ---------- Acesso (login e escolha de empresa) ---------- */
.qa-acesso { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; }

.qa-cartao { width: 100%; max-width: 380px; }
.qa-cartao.largo { max-width: 460px; }

.qa-cabecalho { text-align: center; margin-bottom: 22px; }
.qa-logo-sistema { display: block; width: 150px; margin: 0 auto 14px; mix-blend-mode: darken; }
.qa-cabecalho h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--qa-titulo); }
.qa-cabecalho p { margin: 0; color: var(--qa-suave); }

.qa-link-linha { margin-top: 14px; text-align: center; }

.qa-aviso-acesso { display: flex; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--qa-borda); font-size: 12px; color: var(--qa-suave); line-height: 1.5; }
.qa-aviso-acesso i { color: var(--qa-primaria); margin-top: 2px; }

.qa-rodape { margin-top: 18px; font-size: 12px; color: var(--qa-suave); text-align: center; }

.qa-empresas { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.qa-empresas li + li { border-top: 1px solid var(--qa-borda); }
.qa-empresas a { display: flex; align-items: center; gap: 12px; padding: 12px 6px; color: var(--qa-texto); }
.qa-empresas a:hover { background: #f9f9f9; color: var(--qa-titulo); text-decoration: none; }
.qa-empresas .fa-building-o { color: var(--qa-primaria); width: 16px; text-align: center; }
.qa-empresas .qa-empresa-nome { flex: 1; font-weight: 600; }
.qa-empresas .fa-angle-right { color: var(--qa-suave); }

/* ---------- Chat ---------- */
.qa-app { display: flex; height: 100%; }

.qa-lateral { flex: none; width: 220px; display: flex; flex-direction: column; background: var(--qa-menu); }

.qa-nav-header { padding: 22px 16px 16px; background: #fff; text-align: center; }
.qa-nav-header .qa-logo-area { position: relative; display: inline-block; }
.qa-nav-header .qa-logo-empresa { display: block; max-width: 150px; max-height: 70px; object-fit: contain; }
.qa-nav-header .qa-logo-empresa.padrao { filter: brightness(1.04); } /* fundo #f7f7f7 do logo.jpg vira branco */
.qa-nav-header .qa-quickia-selo { position: absolute; right: -12px; bottom: -6px; width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.qa-nav-header strong { display: block; margin-top: 10px; font-size: 14px; color: #111; line-height: 1.2; }
.qa-nav-header span { display: block; margin-top: 2px; font-size: 12px; color: #898989; }

.qa-nova-area { padding: 15px; }

.qa-menu { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.qa-menu .qa-menu-titulo { padding: 10px 20px 6px 25px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #6f7d8f; }
.qa-menu .ativo { border-left: 4px solid var(--qa-destaque); background: var(--qa-menu-ativo); }
.qa-menu .ativo a { display: flex; gap: 10px; align-items: center; padding: 12px 20px 12px 21px; color: #fff; font-weight: 600; }
.qa-menu .ativo a:hover { text-decoration: none; }
.qa-menu .qa-menu-vazio { padding: 8px 20px 8px 25px; font-size: 12px; line-height: 1.5; color: var(--qa-menu-texto); }

.qa-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.qa-topo { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--qa-borda); }
.qa-topo-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.qa-topo-titulo h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--qa-titulo); white-space: nowrap; }
.qa-topo-titulo small { color: var(--qa-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-topo-links { display: flex; align-items: center; gap: 4px; }
.qa-topo-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--qa-suave); font-weight: 600; }
.qa-topo-links a:hover { color: var(--qa-texto); text-decoration: none; }
.qa-menu-botao { display: none; border: 1px solid var(--qa-primaria); border-radius: 3px; padding: 4px 10px; background: var(--qa-primaria); color: #fff; cursor: pointer; }

.qa-conversa { flex: 1; overflow-y: auto; padding: 25px 20px 10px; }
.qa-conversa-interna { max-width: 860px; margin: 0 auto; }

.qa-boas-vindas .qa-ibox-conteudo { text-align: center; padding: 30px 25px; }
.qa-boas-vindas .qa-logo-grande { width: 56px; height: 56px; margin-bottom: 12px; }
.qa-boas-vindas h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: var(--qa-titulo); }
.qa-boas-vindas p { margin: 0 auto; max-width: 560px; line-height: 1.6; }

.qa-sugestoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.qa-sugestao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px;
  border: 0;
  border-top: 2px solid var(--qa-borda);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s;
}
.qa-sugestao:hover { border-top-color: var(--qa-primaria); }
.qa-sugestao i { flex: none; width: 32px; height: 32px; border-radius: 3px; display: grid; place-items: center; background: rgba(61, 153, 144, .12); color: var(--qa-primaria); }
.qa-sugestao strong { display: block; margin-bottom: 2px; color: var(--qa-titulo); }
.qa-sugestao span { display: block; font-size: 12px; color: var(--qa-suave); line-height: 1.4; }

.qa-mensagem { display: flex; gap: 10px; margin: 0 0 18px; }
.qa-mensagem .qa-balao { max-width: 80%; padding: 10px 14px; border-radius: 3px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; }
.qa-mensagem.usuario { justify-content: flex-end; }
.qa-mensagem.usuario .qa-balao { background: var(--qa-primaria); color: #fff; }
.qa-mensagem.quickia .qa-quickia-icone { flex: none; width: 28px; height: 28px; margin-top: 2px; }
.qa-mensagem.quickia .qa-balao { background: #fff; border: 1px solid var(--qa-borda); white-space: normal; }
.qa-mensagem.quickia .qa-balao > :first-child { margin-top: 0; }
.qa-mensagem.quickia .qa-balao > :last-child { margin-bottom: 0; }
.qa-balao p { margin: 0 0 8px; }
.qa-balao h4 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; color: var(--qa-titulo); }
.qa-balao ul, .qa-balao ol { margin: 0 0 8px; padding-left: 20px; }
.qa-balao li { margin-bottom: 3px; }
.qa-balao code { padding: 1px 4px; border-radius: 2px; background: #f3f3f4; color: #c7254e; font-family: Consolas, monospace; font-size: 12px; }
.qa-mensagem.erro .qa-balao { color: #a94442; background: #f2dede; border-color: #ebccd1; }

.qa-mensagem.digitando .qa-balao { display: flex; gap: 5px; align-items: center; padding: 14px; }
.qa-mensagem.digitando span { width: 6px; height: 6px; border-radius: 50%; background: var(--qa-suave); animation: qa-pulo 1.2s infinite ease-in-out; }
.qa-mensagem.digitando span:nth-child(2) { animation-delay: .15s; }
.qa-mensagem.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes qa-pulo { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.qa-compositor-area { padding: 10px 20px 16px; border-top: 1px solid var(--qa-borda); background: #fff; }
.qa-compositor { max-width: 860px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; }
.qa-compositor textarea {
  flex: 1;
  min-width: 0;
  max-height: 200px;
  border: 1px solid var(--qa-borda-campo);
  border-radius: 1px;
  outline: 0;
  resize: none;
  padding: 8px 12px;
  line-height: 1.5;
  background: #fff;
  transition: border-color .15s;
}
.qa-compositor textarea:focus { border-color: var(--qa-primaria); }
.qa-compositor .qa-botao { height: 37px; }
.qa-compositor .qa-botao:disabled { background: #c2c2c2; border-color: #c2c2c2; cursor: default; opacity: 1; }
.qa-legenda { max-width: 860px; margin: 6px auto 0; font-size: 11px; color: var(--qa-suave); }

@media (max-width: 768px) {
  .qa-lateral { position: fixed; inset: 0 auto 0 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; }
  .qa-app.menu-aberto .qa-lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .qa-menu-botao { display: inline-block; }
  .qa-topo { padding: 0 12px; }
  .qa-topo-titulo small, .qa-topo-links .qa-texto-link { display: none; }
  .qa-conversa { padding: 15px 12px 8px; }
  .qa-sugestoes { grid-template-columns: 1fr; }
  .qa-compositor-area { padding: 8px 12px 12px; }
  .qa-mensagem .qa-balao { max-width: 88%; }
}