/* =====================================================================
   Chat do site — a cara

   Paleta lida do CSS da marca, não inventada: ciano #00acc8 (550 usos),
   vermelho #f00843, e cantos de 3px como o resto do site.

   Tudo prefixado .rlxc- para não colidir com nada do tema. O widget entra
   em páginas que não conheço e não pode partir nenhuma.

   REGRA PARA O FUTURO: qualquer regra de ecrã pequeno vai para o fim
   deste ficheiro. Especificidade igual, ganha quem vem depois.
   ===================================================================== */

.rlxc-raiz {
  --rlxc-ciano: #00acc8;
  --rlxc-ciano-esc: #03a5c0;
  /* Ciano é ligação, vermelho é acção. Os dois vermelhos são os da casa:
     #d10303 (204 usos no site) e #f00843, o do .button--primary. */
  --rlxc-vermelho: #d10303;
  --rlxc-vermelho-vivo: #f00843;
  --rlxc-carvao: #1f2835;
  --rlxc-cinza: #6b737c;
  --rlxc-linha: #e2e6ea;
  --rlxc-fundo: #f5f7f9;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;   /* acima de tudo, abaixo do máximo */
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rlxc-carvao);
}
.rlxc-raiz *, .rlxc-raiz *::before, .rlxc-raiz *::after { box-sizing: border-box; }

/* ---------- o botão ---------- */
/* Vermelho, e não ciano: é o convite a agir, o mesmo papel que o CONTACTO
   tem no cabeçalho do site. É também a peça mais visível do widget, por
   isso é aqui que a cor da marca tem de estar. Sombra igual à do site. */
.rlxc-botao {
  display: flex; align-items: center; gap: 9px;
  background: var(--rlxc-vermelho-vivo); color: #fff;
  border: 0; border-radius: 40px;
  padding: 13px 20px 13px 17px;
  font: inherit; font-weight: 500; cursor: pointer;
  box-shadow: 0 2px 12px -6px #cc292f, 0 4px 16px rgba(0,0,0,.18);
}
.rlxc-botao:hover { background: var(--rlxc-vermelho); }
.rlxc-botao svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rlxc-raiz.rlxc-aberto .rlxc-botao { display: none; }

/* ---------- o painel ---------- */
.rlxc-painel {
  display: none;
  width: 370px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 110px);
  background: #fff; border: 1px solid var(--rlxc-linha); border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  flex-direction: column; overflow: hidden;
}
.rlxc-raiz.rlxc-aberto .rlxc-painel { display: flex; }

.rlxc-topo {
  background: var(--rlxc-carvao); color: #fff;
  padding: 13px 10px 13px 14px;
  display: flex; align-items: center; gap: 6px;
  /* A fita passa a vermelha: é a cor da marca, e o cabeçalho é onde ela
     tem de estar. O ciano fica para o que é informação. */
  border-top: 3px solid var(--rlxc-vermelho-vivo);
}
.rlxc-topo > div { min-width: 0; flex: 1 1 auto; }
.rlxc-topo b { font-weight: 500; font-size: 15px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A promessa tem de ser a certa: assistente, não técnico. Prometer um
   humano às 3 da manhã é criar o problema que o chat vinha resolver. */
.rlxc-topo small { display: block; color: #aeb6be; font-size: 11.5px; font-weight: 400; }
/* Os ícones do cabeçalho partilham a mesma forma. O de encerrar ganha
   vermelho ao passar o rato porque é o único que deita fora o que está
   escrito — a cor avisa antes de o dedo cair. */
.rlxc-voltar,
.rlxc-som,
.rlxc-descarregar,
.rlxc-resumo,
.rlxc-encerrar {
  flex: 0 0 auto; background: none; border: 0; color: #aeb6be;
  cursor: pointer; padding: 3px 4px; line-height: 0; border-radius: 3px;
}
.rlxc-voltar svg,
.rlxc-som svg,
.rlxc-descarregar svg,
.rlxc-resumo svg,
.rlxc-encerrar svg { width: 17px; height: 17px; display: block; }
.rlxc-voltar:hover,
.rlxc-som:hover,
.rlxc-descarregar:hover,
.rlxc-resumo:hover { color: #fff; }
/* Enquanto o e-mail vai a caminho o envelope fica apagado: dois cliques
   seguidos eram dois e-mails iguais na caixa de entrada de quem só
   queria um. */
.rlxc-resumo:disabled { color: #6f767e; cursor: default; }
.rlxc-encerrar:hover { color: #fff; background: var(--rlxc-vermelho-vivo); }
/* O mesmo que o input de ficheiro: o `hidden` do HTML não sobrevive ao
   CSS do site, e uma seta que aparece no primeiro ecrã não leva a lado
   nenhum. */
.rlxc-voltar[hidden] { display: none !important; }
.rlxc-som { margin-left: auto; }
.rlxc-som[hidden],
.rlxc-descarregar[hidden],
.rlxc-resumo[hidden],
.rlxc-encerrar[hidden] { display: none !important; }

.rlxc-fechar {
  background: none; border: 0; color: #aeb6be;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rlxc-fechar:hover { color: #fff; }

.rlxc-corpo {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 14px;
  background: var(--rlxc-fundo);
  display: flex; flex-direction: column; gap: 10px;
}

.rlxc-msg { max-width: 86%; padding: 10px 13px; border-radius: 3px; word-wrap: break-word; overflow-wrap: anywhere; }
/* As listas do modelo vêm em texto simples, com \n verdadeiros. pre-wrap
   respeita-os sem que o JavaScript tenha de fabricar marcação a partir da
   resposta — que é a linha que este widget não passa. */
.rlxc-texto { white-space: pre-wrap; }
.rlxc-msg.rlxc-deles { align-self: flex-start; background: #fff; border: 1px solid var(--rlxc-linha); }
.rlxc-msg.rlxc-nossa { align-self: flex-end; background: var(--rlxc-ciano); color: #fff; }
.rlxc-msg a { color: var(--rlxc-ciano-esc); }
.rlxc-msg.rlxc-nossa a { color: #fff; text-decoration: underline; }
/* A hora serve para situar, não para ler: pequena, alinhada ao fim do
   balão, e nunca mais escura do que o texto que acompanha. */
.rlxc-hora { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1; text-align: right; }
.rlxc-msg.rlxc-deles .rlxc-hora { color: var(--rlxc-cinza); }
.rlxc-msg.rlxc-nossa .rlxc-hora { color: #fff; opacity: .75; }

/* Assinatura de quem respondeu. É irmã do balão, não filha, para ficar
   mesmo por baixo dele. A margem negativa desfaz parte do gap de 10px da
   coluna: sem ela a assinatura solta-se e parece outra mensagem. */
.rlxc-assina {
  align-self: flex-start; margin-top: -6px; padding: 0 3px;
  font-size: 10.5px; color: var(--rlxc-cinza);
}
/* O nome de quem escreveu vai do lado dele. Simétrico com a assinatura do
   assistente: em qualquer balão sabe-se quem falou sem contar as cores. */
.rlxc-assina-dele { align-self: flex-end; }

/* ---------- alguém do outro lado ----------
   Uma linha que não é de ninguém: diz que o ESTADO da conversa mudou —
   que uma pessoa a assumiu, que a mensagem foi entregue. Ao centro e sem
   forma de balão, para não se confundir com o que foi dito por alguém, e
   em ciano, porque nesta casa o ciano é informação. */
.rlxc-nota {
  align-self: center; max-width: 92%; text-align: center;
  margin: 2px 0; padding: 5px 11px; border-radius: 9px;
  background: #f7fcfd; border: 1px solid var(--rlxc-linha);
  font-size: 11.5px; color: var(--rlxc-ciano-esc);
}

/* Artigos: chegam já com título e link resolvidos pelo servidor, por isso
   não há aqui nenhum endereço construído em JavaScript. */
.rlxc-artigos { display: flex; flex-direction: column; gap: 5px; align-self: flex-start; max-width: 86%; }
.rlxc-artigos a {
  display: block; background: #fff; border: 1px solid var(--rlxc-linha);
  border-left: 3px solid var(--rlxc-ciano); border-radius: 3px;
  padding: 8px 11px; font-size: 13px; color: var(--rlxc-carvao); text-decoration: none;
}
.rlxc-artigos a:hover { border-color: var(--rlxc-ciano); }
.rlxc-artigos a span { display: block; color: var(--rlxc-cinza); font-size: 11px; margin-top: 1px; }

/* O cartão que abre alguma coisa da conta da pessoa — uma factura dela, um
   serviço dela. Não é um artigo, e não pode parecer um: a barra passa a
   vermelha porque isto é acção sobre o que é dela, e o ciano nesta casa é
   informação. É a única diferença — mesma forma, mesmo tamanho, para a
   lista não se desfazer em desenhos diferentes. */
/* O cartão de contratar um plano segue a mesma regra e pela mesma razão:
   pôr uma coisa no carrinho é agir, não é ir ver. */
.rlxc-artigos a.rlxc-conta,
.rlxc-artigos a.rlxc-carrinho { border-left-color: var(--rlxc-vermelho-vivo); }
.rlxc-artigos a.rlxc-conta:hover,
.rlxc-artigos a.rlxc-carrinho:hover { border-color: var(--rlxc-vermelho-vivo); }
/* O valor e o estado são o que distingue uma factura da seguinte: lêem-se
   antes do rótulo da acção, e por isso não são cinzentos como ele. As três
   linhas servem os três cartões que as têm — o da conta, o do domínio e o
   do plano, onde esta linha é o preço. */
.rlxc-artigos a.rlxc-conta .rlxc-conta-sub,
.rlxc-artigos a.rlxc-dominio .rlxc-conta-sub,
.rlxc-artigos a.rlxc-carrinho .rlxc-conta-sub { color: var(--rlxc-carvao); font-size: 11.5px; margin-top: 2px; }
.rlxc-artigos a.rlxc-conta .rlxc-conta-abrir { color: var(--rlxc-vermelho); font-weight: 500; margin-top: 3px; }

/* O cartão de um domínio a procurar. Fica ciano — a barra da esquerda já
   o é por omissão e o rótulo acompanha — porque procurar um domínio ainda
   é ir ver, não é mexer em nada que já seja da pessoa. É essa a diferença
   para o cartão da conta, e é por isso que este não é vermelho. */
.rlxc-artigos a.rlxc-dominio .rlxc-conta-abrir { color: var(--rlxc-ciano-esc); font-weight: 500; margin-top: 3px; }

/* O cartão de domínio enquanto se verifica a si próprio.

   "a verificar…" fica cinzento e inclinado: ainda não é uma resposta, e
   não pode ter o peso de uma. Vem depois da regra de cima porque tem de
   ganhar ao carvão do `.rlxc-conta-sub`.

   Livre passa a vermelho — e é a única mudança de cor que este cartão
   faz. Deixou de ser "ir ver" e passou a ser "pôr no carrinho", que
   nesta casa é vermelho. Ocupado fica ciano como estava: "ver outras
   opções" ainda é ir ver, e não há nada aqui a comprar. */
.rlxc-artigos a.rlxc-dominio.rlxc-a-verificar .rlxc-conta-sub {
  color: var(--rlxc-cinza); font-style: italic;
}
/* O `rlxc-livre` fica no cartão como marca de estado, mas quem lhe muda
   a cara é o `rlxc-compra` mais abaixo: um domínio livre com carrinho
   ganha sempre os dois, e duas regras a pintar a mesma borda acabavam
   por divergir na primeira correcção. */

/* O convite a procurar outro, por baixo de um cartão de domínio livre.
   Parece uma ligação e não um botão porque não compete com o cartão que
   está por cima — esse é que é a acção. Ciano, que nesta casa é o que
   leva a algum lado, mesmo quando esse lado é a caixa de escrita. */
.rlxc-outro {
  align-self: flex-start; margin-top: -4px; padding: 2px 3px;
  background: none; border: 0; font: inherit; font-size: 12px;
  color: var(--rlxc-ciano-esc); text-decoration: underline; cursor: pointer;
}
.rlxc-outro:hover { color: var(--rlxc-carvao); }

/* ---------- o cartão que leva ao carrinho ----------

   E SÓ esse. É o momento em que alguém decide gastar dinheiro connosco, e
   até aqui a acção era uma linha de texto vermelho do mesmo tamanho do
   resto — uma nota de rodapé no sítio mais importante do painel.

   Um domínio ocupado, um cartão de artigo, uma página de planos ficam
   discretos como sempre foram. Se tudo grita, nada grita. */
.rlxc-artigos a.rlxc-compra {
  background: #fff7f9;
  border-left-width: 5px; border-left-color: var(--rlxc-vermelho-vivo);
  padding-bottom: 11px;
}
.rlxc-artigos a.rlxc-compra:hover {
  border-color: var(--rlxc-vermelho-vivo); border-left-color: var(--rlxc-vermelho-vivo);
}
/* O preço é o que decide. Lê-se antes do botão e é o maior do cartão —
   maior até do que o nome, que a pessoa já sabe qual é. */
.rlxc-artigos a.rlxc-compra .rlxc-preco {
  color: var(--rlxc-carvao); font-size: 15px; font-weight: 700; margin-top: 3px;
}
/* O botão. Largura toda e não encostado à direita: o dedo tem de acertar
   nele à primeira, e num telemóvel um rótulo de 60px no canto não é alvo
   nenhum. O nome vai lá dentro — quem carrega tem de saber o que leva sem
   voltar a ler o cartão. */
.rlxc-artigos a.rlxc-compra .rlxc-comprar {
  display: block; margin-top: 9px; padding: 10px 12px;
  background: var(--rlxc-vermelho-vivo); color: #fff;
  border-radius: 3px; font-size: 13.5px; font-weight: 700; line-height: 19px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 12px -6px #cc292f;
}
.rlxc-artigos a.rlxc-compra:hover .rlxc-comprar { background: var(--rlxc-vermelho); }
/* Um degrau abaixo: as alternativas de um domínio ocupado. Ainda botão,
   ainda vermelho, mais baixo — porque naquele cartão o principal é o
   domínio que a pessoa pediu, não o que lhe sugerimos. Dois botões do
   mesmo tamanho lado a lado não deixam escolher nenhum. */
.rlxc-artigos a.rlxc-compra .rlxc-comprar-mini {
  margin-top: 7px; padding: 6px 10px; font-size: 12.5px; line-height: 17px;
  box-shadow: none;
}

/* ---------- um domínio ocupado não é um beco ----------

   Por baixo do "já registado", os dois caminhos que a consulta já traz
   prontos: trazê-lo para cá, se já é dele, ou escolher outro nome. */
/* Duas coisas por baixo do cartão ocupado — a transferência e UMA
   alternativa — e ar entre elas. Encostadas liam-se como um bloco só, e
   são duas decisões diferentes: trazer o que já é meu, ou escolher outro.
   O `gap` é maior do que o dos artigos por isso mesmo. */
.rlxc-alt { display: flex; flex-direction: column; gap: 9px; margin-top: 3px; }
.rlxc-alt-nota { margin: 5px 0 -3px; font-size: 11.5px; color: var(--rlxc-cinza); }

/* ---------- o estado das mensagens dela ----------

   Colado à hora, dentro do balão ciano. Discreto: só o "não enviada" tem
   de saltar à vista, porque é o único que pede alguma coisa a alguém. */
.rlxc-estado { margin-left: 6px; line-height: 1.7; }
.rlxc-msg.rlxc-nossa .rlxc-estado { color: #fff; opacity: .8; }
.rlxc-msg.rlxc-nossa .rlxc-estado-falhou {
  opacity: 1; background: var(--rlxc-vermelho-vivo); color: #fff;
  padding: 1px 7px; border-radius: 9px; font-weight: 500;
}
.rlxc-reenviar {
  margin-left: 6px; padding: 1px 7px; border-radius: 9px; line-height: 1.7;
  background: #fff; color: var(--rlxc-vermelho); border: 0;
  font: inherit; font-size: 10.5px; font-weight: 500; cursor: pointer;
}
.rlxc-reenviar:hover { background: #ffe9ee; }

/* ---------- alguém a escrever ----------
   Os mesmos três pontos do "a pensar", porque é a mesma coisa a
   acontecer: alguém do outro lado a preparar uma resposta. A diferença é
   que aqui essa pessoa tem nome. */
.rlxc-pensa.rlxc-escreve { align-items: center; padding: 6px 14px; }
.rlxc-escreve-nome { margin-left: 6px; font-size: 11.5px; color: var(--rlxc-cinza); }

/* O convite a abrir um pedido. Já não é uma ligação para fora: é um
   botão que abre o pedido daqui, com a conversa dentro. Vermelho, porque
   é a acção — e é a única acção deste bloco. */
.rlxc-escalar {
  align-self: flex-start; max-width: 86%;
  background: #fff7f9; border: 1px solid #f3d7de; border-radius: 3px;
  padding: 11px 13px; font-size: 13px;
}
.rlxc-escalar p { margin: 0 0 8px; }
/* A linha do e-mail em falta é aviso, não convite: cinzenta e pequena,
   por baixo da pergunta e acima do botão. */
.rlxc-escalar-nota { font-size: 12px; color: var(--rlxc-cinza); }
.rlxc-escalar-bt {
  background: var(--rlxc-vermelho-vivo); color: #fff;
  border: 1px solid var(--rlxc-vermelho-vivo); border-radius: 3px;
  padding: 7px 14px; font: inherit; font-weight: 500; cursor: pointer;
}
.rlxc-escalar-bt:hover { background: var(--rlxc-vermelho); border-color: var(--rlxc-vermelho); }
/* Enquanto o pedido está a ser aberto: o mesmo cinzento do botão de
   enviar desligado, para "à espera" ser sempre a mesma cor. */
.rlxc-escalar-bt:disabled { background: #c3cad1; border-color: #c3cad1; cursor: default; }

.rlxc-pensa { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.rlxc-pensa i {
  width: 7px; height: 7px; border-radius: 50%; background: #b9c0c7;
  animation: rlxc-salta 1.1s infinite ease-in-out;
}
.rlxc-pensa i:nth-child(2) { animation-delay: .16s; }
.rlxc-pensa i:nth-child(3) { animation-delay: .32s; }
@keyframes rlxc-salta { 0%,80%,100% { opacity: .35; } 40% { opacity: 1; } }

.rlxc-rodape { border-top: 1px solid var(--rlxc-linha); background: #fff; padding: 10px; }
.rlxc-linha { display: flex; gap: 8px; align-items: flex-end; }

/* O atributo `hidden` do HTML não chega aqui: o CSS do site tem regras
   próprias para `input`, e uma regra de autor ganha sempre ao `[hidden]`
   da folha do navegador. Sem isto o selector de ficheiros aparece dentro
   do compositor e esmaga a caixa de texto. */
.rlxc-ficheiro { display: none !important; }
.rlxc-raiz textarea {
  flex: 1 1 auto; resize: none; min-height: 40px; max-height: 110px;
  padding: 10px 12px; font: inherit; color: var(--rlxc-carvao);
  border: 1px solid var(--rlxc-linha); border-radius: 3px; background: #fff;
}
.rlxc-raiz textarea:focus { outline: none; border-color: var(--rlxc-ciano); box-shadow: 0 0 0 3px rgba(0,172,200,.16); }
/* Vermelho: é a acção que sai. */
/* O clipe é discreto de propósito: anexar é o caminho secundário, e o
   botão vermelho ao lado é que é a acção principal. Ganha cor ao passar
   o rato, para se perceber que é botão. */
.rlxc-anexar {
  flex: 0 0 auto; width: 34px; height: 40px; border: 0; background: none;
  color: var(--rlxc-cinza); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.rlxc-anexar svg { width: 17px; height: 17px; }
.rlxc-anexar:hover { color: var(--rlxc-vermelho-vivo); }
.rlxc-anexar:disabled { color: #ccd2d8; cursor: default; }

.rlxc-enviar {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 3px;
  background: var(--rlxc-vermelho-vivo); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rlxc-enviar:hover { background: var(--rlxc-vermelho); }
.rlxc-enviar:disabled { background: #c3cad1; cursor: default; }
.rlxc-enviar svg { width: 18px; height: 18px; }
.rlxc-aviso { margin: 7px 2px 0; font-size: 10.5px; color: var(--rlxc-cinza); line-height: 1.4; }

/* ---------- os ecrãs de antes da conversa ---------- */
/* Consentimento, identificação, categoria e "retomar" partilham o mesmo
   espaço do painel. Só uma classe na raiz troca entre os ecrãs e a
   conversa — assim o painel nunca muda de tamanho e não salta. */
.rlxc-passos {
  display: none;
  flex: 1 1 auto; overflow-y: auto;
  padding: 18px 16px 20px;
  background: var(--rlxc-fundo);
}
.rlxc-raiz.rlxc-em-passos .rlxc-passos { display: block; }
.rlxc-raiz.rlxc-em-passos .rlxc-corpo,
.rlxc-raiz.rlxc-em-passos .rlxc-rodape { display: none; }

/* A caixa do ecrã recebe o foco quando se muda de ecrã, mas não é um
   controlo: não leva anel. Especificidade acima da regra geral de foco
   mais abaixo, para não depender da ordem. */
.rlxc-raiz .rlxc-passo:focus, .rlxc-raiz .rlxc-passo:focus-visible { outline: none; }

.rlxc-passo-titulo { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.rlxc-passo-texto { margin: 0 0 16px; font-size: 13.5px; color: var(--rlxc-cinza); }

.rlxc-accoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rlxc-bt, .rlxc-bt-sec {
  flex: 1 1 auto; min-width: 120px;
  padding: 11px 16px; border-radius: 3px;
  font: inherit; font-weight: 500; cursor: pointer; text-align: center;
}
/* O que faz avançar é vermelho: "Está tudo bem", "Continuar", "Continuar"
   do retomar. Um por ecrã, nunca dois. */
.rlxc-bt {
  background: var(--rlxc-vermelho-vivo); color: #fff; border: 1px solid var(--rlxc-vermelho-vivo);
  box-shadow: 0 2px 12px -6px #cc292f;
}
.rlxc-bt:hover { background: var(--rlxc-vermelho); border-color: var(--rlxc-vermelho); }
/* O caminho para a área de cliente é uma ligação, não um botão: vê-se
   para onde vai antes de carregar. Veste-se de botão principal na mesma. */
a.rlxc-bt { text-decoration: none; }
/* O "Agora não" tem de ser encontrável sem ser convidativo: mesma caixa,
   sem cor. Esconder a recusa seria fingir que ela não existe. */
.rlxc-bt-sec { background: #fff; color: var(--rlxc-cinza); border: 1px solid var(--rlxc-linha); }
.rlxc-bt-sec:hover { border-color: var(--rlxc-cinza); color: var(--rlxc-carvao); }

.rlxc-politica {
  display: inline-block; margin-top: 14px;
  font-size: 12px; color: var(--rlxc-ciano-esc);
}

/* A saída do ecrã de entrar. Tem de ser encontrável sem competir com o
   botão de cima: parece uma ligação porque é isso que faz — leva a outro
   sítio — e ciano porque nesta casa ciano é ligação. Nunca se prende
   ninguém num ecrã de login. */
.rlxc-saida {
  display: block; margin: 14px auto 0; padding: 4px 2px;
  background: none; border: 0; font: inherit; font-size: 12.5px;
  color: var(--rlxc-ciano-esc); text-decoration: underline; cursor: pointer;
}
.rlxc-saida:hover { color: var(--rlxc-carvao); }

.rlxc-campo { margin-bottom: 12px; }
.rlxc-campo label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; }
.rlxc-campo input {
  display: block; width: 100%;
  padding: 10px 12px; font: inherit; color: var(--rlxc-carvao);
  border: 1px solid var(--rlxc-linha); border-radius: 3px; background: #fff;
}
.rlxc-campo input:focus { outline: none; border-color: var(--rlxc-ciano); box-shadow: 0 0 0 3px rgba(0,172,200,.16); }
/* O erro é do campo e fica junto ao campo. Nada de alertas do navegador:
   um alert tira a página das mãos de quem está a escrever. */
/* O vermelho escuro e não o vivo: a 11,5px sobre fundo claro, o #f00843
   fica no limite do contraste legível e o #d10303 passa com folga. */
.rlxc-erro { margin: 4px 0 0; font-size: 11.5px; color: var(--rlxc-vermelho); line-height: 1.35; }
.rlxc-erro:empty { display: none; }
.rlxc-campo.rlxc-mau input { border-color: var(--rlxc-vermelho); }
.rlxc-campo.rlxc-mau input:focus { box-shadow: 0 0 0 3px rgba(209,3,3,.14); }

.rlxc-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rlxc-cat {
  background: #fff; color: var(--rlxc-carvao);
  border: 1px solid var(--rlxc-linha); border-left: 3px solid var(--rlxc-ciano);
  border-radius: 3px; padding: 13px 12px;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  min-height: 50px;
}
/* Em repouso ficam neutros com a barra ciano; ao apontar ou ao receber o
   foco passam a vermelho, porque nesse momento são a acção a tomar. Sete
   barras vermelhas em repouso seriam vermelho a mais num ecrã só. */
.rlxc-cat:hover, .rlxc-cat:focus { border-color: var(--rlxc-vermelho-vivo); border-left-color: var(--rlxc-vermelho-vivo); background: #fff6f8; }
/* Sete não dividem por dois: o último ocupa a linha toda em vez de deixar
   um buraco ao lado. */
.rlxc-cat:last-child { grid-column: 1 / -1; }
/* Enquanto se vai buscar o que a pessoa tem na conta, as categorias ficam
   desligadas: cada carregar destes levanta um WHMCS inteiro do outro lado,
   e dois cliques seguidos levantavam dois. */
.rlxc-cat:disabled { opacity: .5; cursor: default; }
.rlxc-cat:disabled:hover { border-color: var(--rlxc-linha); border-left-color: var(--rlxc-ciano); background: #fff; }

/* A espera pelos itens da conta. O indicador da conversa (.rlxc-pensa) vive
   no corpo, que está escondido enquanto se anda pelos ecrãs — repetem-se
   aqui os mesmos três pontos e o mesmo ritmo, para esperar ser sempre a
   mesma coisa aos olhos de quem espera. A frase ao lado existe porque esta
   espera é por algo que a pessoa não pediu explicitamente e pode demorar. */
.rlxc-espera {
  display: flex; align-items: center; gap: 5px;
  margin-top: 14px; font-size: 12.5px; color: var(--rlxc-cinza);
}
.rlxc-espera i {
  width: 6px; height: 6px; border-radius: 50%; background: #b9c0c7;
  flex: 0 0 auto; animation: rlxc-salta 1.1s infinite ease-in-out;
}
.rlxc-espera i:nth-child(2) { animation-delay: .16s; }
.rlxc-espera i:nth-child(3) { animation-delay: .32s; }
.rlxc-espera span { margin-left: 4px; }

/* Foco visível: isto tem de dar para usar só com teclado. */
.rlxc-raiz :focus-visible { outline: 2px solid var(--rlxc-ciano); outline-offset: 2px; }

/* ---------- ecrãs pequenos ---------- */
@media (max-width: 480px) {
  .rlxc-raiz { right: 12px; bottom: 12px; left: 12px; }
  .rlxc-botao { margin-left: auto; }
  .rlxc-painel {
    width: auto; height: auto;
    position: fixed; inset: 8px 8px 8px 8px; max-height: none; max-width: none;
  }
  .rlxc-msg, .rlxc-artigos, .rlxc-escalar { max-width: 92%; }
  /* Num telemóvel os botões lado a lado ficam estreitos de mais para o
     polegar; passam a um por linha, e o principal fica em cima. */
  .rlxc-accoes { flex-direction: column; }
  .rlxc-bt, .rlxc-bt-sec { flex: 0 0 auto; width: 100%; padding: 13px 16px; }
  .rlxc-cats { grid-template-columns: 1fr; }
  .rlxc-cat { min-height: 0; padding: 14px 12px; }
  /* Com uma coluna só, o último já ocupa a linha toda. */
  .rlxc-cat:last-child { grid-column: auto; }
  /* 16px evita o zoom automático do Safari ao tocar no campo. */
  .rlxc-campo input { font-size: 16px; }
}

/* Os dados que o SISTEMA já tinha, mostrados para a pessoa confirmar antes
   de os usarmos. Não é um formulário — é uma ficha de leitura — por isso
   não leva caixas nem bordas de campo.

   Rótulo POR CIMA do valor, e não ao lado: numa coluna de 340px, um
   rótulo de 68px deixava o e-mail com 250px e a partir a linha em dois ou
   três pedaços. Em cima, o valor tem a largura toda e a maior parte dos
   e-mails cabe numa linha só. O que não couber parte, mas parte pelo meio
   do endereço e não pelo meio do painel. */
.rlxc-dados {
  margin: 14px 0 4px; border: 1px solid var(--rlxc-linha); border-radius: 3px;
  /* A barra ciano à esquerda é a mesma dos cartões de artigo: nesta casa
     o ciano é informação, e isto é informação — não é para preencher. */
  border-left: 3px solid var(--rlxc-ciano);
  background: #fff; overflow: hidden;
}
/* De onde vieram os dados, dito de uma vez e em cima de todos, com um
   cadeado pequeno. Sem isto o bloco parece um formulário já preenchido e
   fica a dúvida de quem escreveu aquilo. */
.rlxc-dados-fonte {
  display: flex; align-items: center; gap: 5px; margin: 0;
  padding: 7px 12px; background: #f7fcfd;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rlxc-ciano-esc);
}
.rlxc-dados-fonte svg { width: 12px; height: 12px; flex: 0 0 auto; }
.rlxc-dado { padding: 8px 12px; border-top: 1px solid var(--rlxc-linha); }
/* Rótulo pequeno e em maiúsculas: lê-se como etiqueta, não compete com o
   valor. É o valor que a pessoa veio confirmar. */
.rlxc-dado-rotulo {
  display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rlxc-cinza); line-height: 1.5;
}
.rlxc-dado-valor {
  display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35;
  color: var(--rlxc-carvao);
  /* Um e-mail comprido ou um nome comprido partem a linha; o que não pode
     é empurrar o painel para o lado. */
  overflow-wrap: break-word; word-break: break-word;
}

/* ---------- lista de conversas ----------
   Cada conversa é um botão largo: o assunto em cima, e por baixo quando
   foi e quantas mensagens tem. É por aí que a pessoa a reconhece — pela
   sua própria pergunta e pela hora, não por um identificador. */
.rlxc-convs { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; }
.rlxc-conv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; font: inherit; border-radius: 3px;
  border: 1px solid var(--rlxc-linha); background: #fff;
}
.rlxc-conv:hover { border-color: var(--rlxc-ciano); background: #f7fcfd; }
.rlxc-conv-assunto {
  display: block; font-size: 13px; color: var(--rlxc-carvao); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rlxc-conv-pe {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 3px; font-size: 11px; color: var(--rlxc-cinza);
}
.rlxc-conv-eti {
  padding: 1px 6px; border-radius: 9px; font-size: 10px;
  background: #eef1f3; color: var(--rlxc-cinza);
}
/* Contratar, no fim da lista dos itens, e os ecrãs dos grupos e dos
   planos. Não é uma coisa da pessoa — é uma que ela pode passar a ter —
   e por isso leva a barra vermelha, que nesta casa é acção. A forma é a
   mesma dos outros botões da lista de propósito: o gesto é o mesmo,
   escolher um de vários, e dois desenhos para o mesmo gesto só confundem.

   Depois do :hover de cima, e não antes: a especificidade é igual nos
   dois e aqui ganha quem vem em último. */
.rlxc-conv-novo { border-left: 3px solid var(--rlxc-vermelho-vivo); }
.rlxc-conv-novo:hover { border-color: var(--rlxc-vermelho-vivo); background: #fff6f8; }
/* Enquanto se vai buscar o catálogo, os botões da lista ficam desligados
   pela mesma razão das categorias: cada carregar destes levanta um WHMCS
   do outro lado, e dois cliques seguidos levantavam dois. */
.rlxc-conv:disabled { opacity: .5; cursor: default; }
.rlxc-conv:disabled:hover { border-color: var(--rlxc-linha); background: #fff; }

/* ---------- ler o histórico ----------
   Uma conversa antiga abre-se para ler. A tira no topo diz de quando é,
   e o compositor desaparece: escrever ali não iria a lado nenhum. */
.rlxc-so-leitura {
  margin: 0 0 10px; padding: 7px 10px; border-radius: 3px;
  background: #fff6e5; border: 1px solid #f0dcb4;
  font-size: 11.5px; color: #7a5c1e;
}
.rlxc-raiz.rlxc-so-ler .rlxc-rodape { display: none; }

/* ---------- som ----------
   Um só ícone: com onda quando está ligado, com risco quando está
   desligado. Trocar o desenho inteiro obrigava a dois SVG. */
.rlxc-som .rlxc-corte { display: none; }
.rlxc-som.rlxc-som-off .rlxc-onda { display: none; }
.rlxc-som.rlxc-som-off .rlxc-corte { display: block; }