/* Identidade da Predialnet nas telas de acesso (login, redefinir senha).
   Vai inline no <head> pelo proxy, antes de o aplicativo pintar — por isso não
   há piscada: o botão já nasce vermelho. As variáveis são declaradas no próprio
   contêiner da tela de acesso e descem por herança para o cartão e o botão, o
   que dispensa qualquer classe posta por JavaScript.
   Ver MANUTENCAO.md, seções 5 e 9. */
.min-h-screen.flex.flex-col.bg-secondary {
  --primary: 358 100% 31%;          /* #9c0004, o vermelho da marca */
  --ring: 358 72% 45%;
  --primary-foreground: 0 0% 100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6f6 55%, #f4ecec 100%);
}
.min-h-screen.flex.flex-col.bg-secondary .w-full.max-w-sm::before {
  content: ""; display: block; height: 65px; margin: 0 auto 22px;
  /* o logo tem a palavra "chat" embaixo, por isso 65px e não 42px: a parte
     "predialnet" ocupa 65% da imagem e fica do mesmo tamanho de antes. */
  background: url("/painel-extras/logo-predialnet-chat.png") center/contain no-repeat;
}
.min-h-screen.flex.flex-col.bg-secondary #login-container,
.min-h-screen.flex.flex-col.bg-secondary .w-full.max-w-sm > div {
  border-color: #efe2e3; border-radius: 14px; box-shadow: 0 10px 36px rgba(156, 0, 4, .08);
}
/* o logo já diz o nome; a linha seguinte vira o título */
.min-h-screen.flex.flex-col.bg-secondary #login-container .text-2xl { display: none; }
.min-h-screen.flex.flex-col.bg-secondary #login-container .text-2xl + p {
  font-size: 15px; color: hsl(var(--foreground));
}

/* ------------------------------------------------------------------------
   Selos da lista de conversas (parte 9 do csat-na-lista.js).
   O JavaScript só põe a classe; cor, forma e espaçamento moram aqui, para a
   aparência não depender de script e não piscar. Ver MANUTENCAO.md, seção 4. */
.pn-selos {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.pn-selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  padding: 1px 8px; border-radius: 9999px; white-space: nowrap;
  border: 1px solid transparent;
}
.pn-selo.pn-calmo    { background: #f1f3f5; color: #4b5563; border-color: #e5e7eb; }
.pn-selo.pn-atencao  { background: #fdf5e4; color: #8a5d08; border-color: #eddcb4; }
.pn-selo.pn-critico  { background: #fdecec; color: #991b1b; border-color: #f3c9c9; }
/* quem espera por nós pulsa devagar: é o que custa venda */
.pn-selo.pn-atendente.pn-critico { animation: pn-pulsa 1.8s ease-in-out infinite; }
@keyframes pn-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, .22); }
  50%      { box-shadow: 0 0 0 4px rgba(153, 27, 27, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-selo.pn-atendente.pn-critico { animation: none; }
}

/* ------------------------------------------------------------------------
   Balões de mensagem no esquema do WhatsApp, nas DUAS pontas: o que eu
   mandei fica verde e fica à direita; o que eu recebi fica branco e fica à
   esquerda. Vale para o atendente no painel e para o cliente no widget — a
   mesma memória visual dos dois lados.

   Verde #d9fdd3 e branco são os tons do WhatsApp Web no tema claro; o texto
   #111b21 é o deles também.

   Esta folha já é injetada no <head> tanto do painel quanto do /widget pela
   mesma regra do proxy (LocationMatch que exclui apenas os assets), então não
   foi preciso emenda nova. Não existe ajuste nativo para isto: a configuração
   da caixa de chat só expõe `colors.primary`, e mexer nela pintaria também o
   lançador, o cabeçalho e os botões. Conferido em 05/10/2026, não há nenhuma
   configuração de CSS próprio no Libredesk. */

/* --- painel do atendente ---------------------------------------------- */
/* o Libredesk põe `bg-secondary` só no balão de saída (direction=outgoing);
   o de entrada não recebe classe de fundo nenhuma, e a nota privada usa
   `bg-private`, que fica como está porque é registro interno */
.message-bubble.bg-secondary {
  background: #d9fdd3; border-color: #c3e6b8; color: #111b21;
}
.message-bubble:not(.bg-secondary):not(.bg-private) {
  background: #ffffff; border-color: #e5e9eb; color: #111b21;
}

/* --- widget do cliente -------------------------------------------------- */
/* lá o balão do próprio cliente é `bg-primary` (ficava vermelho da marca) e o
   do atendente é `bg-muted`; `bg-primary/60` é o estado "enviando" */
.items-end > .rounded-2xl.bg-primary,
.items-end > .rounded-2xl[class*="bg-primary/"] {
  background: #d9fdd3; color: #111b21;
}
.items-end > .rounded-2xl.bg-primary *,
.items-end > .rounded-2xl[class*="bg-primary/"] * {
  color: #111b21;
}
.items-start > .rounded-2xl.bg-muted {
  background: #ffffff; color: #111b21; border: 1px solid #e5e9eb;
}

/* ------------------------------------------------------------------------
   Pergunta de fechamento do atendimento (parte 10 do csat-na-lista.js).
   O script só monta e põe a classe; cor, forma e posição moram aqui. */
#pn-fechamento {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: rgba(16, 18, 20, .42);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#pn-fechamento .pn-caixa {
  background: #fff; border-radius: 14px; padding: 22px 24px; width: min(420px, 92vw);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28); color: #1b1d20;
}
#pn-fechamento h2 { font-size: 17px; font-weight: 650; margin: 0 0 4px; }
#pn-fechamento p { margin: 0 0 16px; color: #4b5563; font-size: 14px; }
#pn-fechamento label { display: block; font-size: 14px; color: #4b5563; margin-bottom: 7px; }
#pn-fechamento input {
  width: 100%; padding: 9px 11px; border: 1px solid #d7dbe0; border-radius: 9px;
  font: inherit; font-size: 15px; letter-spacing: .02em;
}
#pn-fechamento input:focus { outline: 2px solid #9c0004; outline-offset: 1px; border-color: #9c0004; }
#pn-fechamento .pn-botoes { display: flex; gap: 9px; margin-top: 16px; }
#pn-fechamento button {
  flex: 1; padding: 9px 14px; border-radius: 9px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; border: 1px solid #d7dbe0; background: #fff; color: #1b1d20;
}
#pn-fechamento button:hover { background: #f4f6f8; }
#pn-fechamento .pn-sim, #pn-fechamento .pn-gravar {
  background: #9c0004; border-color: #9c0004; color: #fff;
}
#pn-fechamento .pn-sim:hover, #pn-fechamento .pn-gravar:hover { filter: brightness(1.12); }
#pn-fechamento .pn-erro { color: #991b1b; font-size: 13px; margin: 9px 0 0; }
#pn-fechamento .pn-ok { color: #166534; font-weight: 600; }
#pn-fechamento .pn-aviso { color: #8a5d08; }
#pn-fechamento .pn-rodando { display: flex; align-items: center; gap: 10px; }
#pn-fechamento .pn-rodando::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid #e3e6ea; border-top-color: #9c0004; animation: pn-gira .8s linear infinite;
}
@keyframes pn-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #pn-fechamento .pn-rodando::before { animation: none; } }
#pn-fechamento [hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   Botão do supervisor na tela de login (parte 11 do csat-na-lista.js).
   O JavaScript só monta o botão e põe a classe; forma e cor moram aqui, para
   a aparência não depender de script e não piscar. O botão de entrar continua
   sendo o principal — este é o secundário, de contorno. */
.pn-botao-supervisor {
  display: block; width: 100%; margin-top: 10px;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid #d6dae0; background: #fff; color: #3f444c;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pn-botao-supervisor:hover {
  background: #fdf8f8; border-color: #9c0004; color: #9c0004;
}
.pn-botao-supervisor:focus-visible { outline: 2px solid #9c0004; outline-offset: 2px; }

/* Quem apertou o botão do supervisor sem ter o papel entra assim mesmo, no
   painel de atendimento, e é avisado aqui. Fora do #app, flutuando: inserir nó
   dentro da árvore do Vue é o que já quebrou a tela antes. */
#pn-aviso-supervisao {
  position: fixed; z-index: 2147483000;
  left: 50%; transform: translateX(-50%); bottom: 22px;
  max-width: 460px; padding: 11px 15px;
  background: #fff; color: #1b1d20;
  border: 1px solid #efe2e3; border-left: 4px solid #9c0004; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Aviso de falta de permissão, em linha no cartão do login (parte 11).
   Mesma linguagem do erro que o próprio aplicativo mostra ali: caixa clara,
   borda e texto na cor de alerta, triângulo à esquerda. */
#pn-aviso-login {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; padding: 11px 13px;
  border: 1px solid #f0c9ca; border-radius: 9px; background: #fdf2f2;
  color: #9c0004; font-size: 13.5px; line-height: 1.45;
}
#pn-aviso-login svg { flex: 0 0 auto; margin-top: 1px; }
#pn-aviso-login strong { display: block; font-weight: 650; margin-bottom: 2px; }
#pn-aviso-login span { display: block; color: #8a3a3c; }
#pn-aviso-login b { font-weight: 650; color: #9c0004; }

/* Link para o guia, abaixo do cartão de login (parte 11 do csat-na-lista.js).
   Discreto de propósito: é apoio, não ação — não pode competir com o botão de
   entrar nem ser confundido com ele. */
#pn-link-manual {
  display: block; width: 100%; margin-top: 16px;
  text-align: center; font-size: 13.5px; line-height: 1.45;
  color: #6b7280; text-decoration: none;
}
#pn-link-manual:hover { color: #9c0004; text-decoration: underline; }
#pn-link-manual:focus-visible { outline: 2px solid #9c0004; outline-offset: 3px; border-radius: 5px; }

/* Cabeçalho do widget sem botão (parte 6 do csat-na-lista.js põe a classe).
   "Voltar" não leva a lugar nenhum no nosso fluxo — o atendimento nasce do
   Assine Já — e "Expandir" só dá ao cliente um jeito de mexer no que não
   precisa. O cabeçalho fica informativo. O botão de fechar que aparece com o
   atendimento encerrado NÃO é afetado: ele tem rótulo próprio. */
.pn-widget button[aria-label="Voltar"],
.pn-widget button[aria-label="Expandir"],
.pn-widget button[aria-label="Recolher"] {
  display: none !important;
}