@charset "UTF-8";
/* ============================================================
   TEMA FÁCIL — WS-Flows  (camada 2, carregada DEPOIS do tema-wsflows.css)

   IDEIA: a FACILIDADE de uso do WhatsApp, com as cores da WS-Flows.
   Não copia a cara do WhatsApp (nada de verde, fundo bege ou balão
   igual). Copia o que faz o WhatsApp ser fácil:
     · a lista de conversas se lê de relance (quem, o quê, quando,
       quantas não lidas)
     · a busca está sempre à mão, no alto da lista (ws-facil.js)
     · a conversa é limpa: dá pra saber na hora quem falou
     · a caixa de digitar é confortável e mostra o que dá pra fazer
   E deixa mais fácil de achar o que o Chatwoot faz MELHOR que o
   WhatsApp: nota interna, respostas prontas "/", etiquetas, quem
   está cuidando da conversa, robô x pessoa.

   Seletores tirados do código-fonte do Chatwoot 4.16.2 (tag oficial
   no GitHub), não de chute. Se uma atualização mudar o desenho deles,
   o pior que acontece é a regra parar de pegar — o Chatwoot continua
   funcionando normal, só volta a aparência original daquele ponto.

   DESFAZER: rodar /root/wflows/tema-v6.rb (tira este arquivo e o
   ws-facil.js do painel). Não apaga nada.
   ============================================================ */

:root {
  /* fundo da área da conversa: um cinza-azulado bem de leve, para o
     balão branco de quem escreveu "saltar" (é esse contraste que faz
     o WhatsApp ser fácil de ler) */
  --wsf-conversa: 244 246 251;
  --wsf-recebida: 255 255 255;
  --wsf-enviada: 230 232 255;        /* índigo da marca, bem clarinho */
  --wsf-robo: 221 246 251;           /* ciano da marca, bem clarinho */
  --wsf-sombra: 0 1px 1.5px rgb(11 18 32 / .10);
  /* textura do fundo da conversa: "none" = liso.
     Para pontilhado de leve, trocar por:
     radial-gradient(rgb(99 102 241 / .07) 1px, transparent 1.2px) */
  --wsf-textura: radial-gradient(rgb(99 102 241 / .09) 1px, transparent 1.3px); /* pontilhado (WS 23/09) */
}
:root.dark {
  --wsf-conversa: 14 17 26;
  --wsf-recebida: 31 36 51;
  --wsf-enviada: 43 46 102;
  --wsf-robo: 15 57 66;
  --wsf-sombra: 0 1px 1.5px rgb(0 0 0 / .35);
  --wsf-textura: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.3px);
}

/* ============================================================
   0. CONSERTO DE 4 CORES QUE O TEMA ANTIGO QUEBROU
   O tema-wsflows.css (seção 1) escreveu estas variáveis no formato
   "rgb(99 102 241)", mas o Chatwoot espera só os três números
   ("99 102 241"). Resultado medido no CSS dele: o fundo vira
   TRANSPARENTE. Isso apagava o balão das mensagens enviadas pela
   equipe, o balão do robô e o fundo branco de alguns botões (como a
   caixinha "Pesquisar" do menu). Aqui voltam no formato certo,
   mantendo o índigo/ciano da marca.
   ============================================================ */
:root {
  --solid-blue: var(--wsf-enviada);
  --solid-iris: var(--wsf-robo);
  --button-color: 255 255 255;
  --border-blue: 99, 102, 241, .5;
}
:root.dark {
  --solid-blue: var(--wsf-enviada);
  --solid-iris: var(--wsf-robo);
  --button-color: 42 43 51;
  --border-blue: 99, 102, 241, .5;
}

/* ============================================================
   1. LISTA DE CONVERSAS — ler de relance
   ============================================================ */

/* 1a. foto/inicial maior e redonda (32px -> 40px), centralizada
   na altura do cartão, como no WhatsApp */
.conversations-list .conversation > div:first-child { align-self: center; }
.conversations-list .conversation > div:first-child > span {
  width: 40px !important;
  height: 40px !important;
  margin-top: 0 !important;
}
.conversations-list .conversation > div:first-child span[role='img'] {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
}
.conversations-list .conversation > div:first-child span[role='img'] > img {
  width: 100%; height: 100%; object-fit: cover;
}
.conversations-list .conversation > div:first-child span[role='img'] > span.select-none {
  font-size: 15px !important;
}
/* bolinha de "online" no canto de baixo, não no meio da foto */
.conversations-list .conversation > div:first-child > span > div.absolute.rounded-full {
  top: auto !important; left: auto !important;
  right: 0 !important; bottom: 0 !important;
}
/* caixinha de marcar (seleção em massa) cobre a foto inteira */
.conversations-list .conversation > div:first-child label.absolute {
  width: 40px !important; height: 40px !important;
}

/* 1b. nome maior; prévia da última mensagem legível */
.conversations-list .conversation h4.conversation--user {
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.conversations-list .conversation .leading-6.h-6 { font-size: 13.5px !important; }

/* 1c. hora maior (era 10px) */
.conversations-list .conversation .absolute.flex-col > span.text-xxs {
  font-size: 11.5px !important;
  color: rgb(var(--slate-11));
}

/* 1d. NÃO LIDAS saltam aos olhos:
   bolinha com o número maior e na cor da marca, hora na cor da marca
   e uma listra na lateral do cartão. */
.conversations-list .conversation .bg-n-teal-9.rounded-full {
  background: rgb(var(--ws-indigo)) !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: none !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.dark .conversations-list .conversation .bg-n-teal-9.rounded-full {
  background: rgb(var(--ws-ciano)) !important;
  color: rgb(var(--ws-tinta)) !important;
}
.conversations-list .conversation:has(.bg-n-teal-9) .absolute.flex-col > span.text-xxs {
  color: rgb(79 79 200) !important;
  font-weight: 700 !important;
}
.dark .conversations-list .conversation:has(.bg-n-teal-9) .absolute.flex-col > span.text-xxs {
  color: rgb(var(--ws-ciano)) !important;
}
.conversations-list .conversation:has(.bg-n-teal-9) {
  box-shadow: inset 3px 0 0 rgb(var(--ws-indigo));
}
.dark .conversations-list .conversation:has(.bg-n-teal-9) {
  box-shadow: inset 3px 0 0 rgb(var(--ws-ciano));
}

/* 1e. conversa ABERTA agora: fundo na cor da marca (antes era um
   cinza quase igual ao branco) */
.conversations-list .conversation.active {
  background: rgb(var(--ws-indigo) / .09) !important;
}
.dark .conversations-list .conversation.active {
  background: rgb(var(--ws-ciano) / .10) !important;
}

/* ============================================================
   2. ABAS "MINHAS / NÃO ATRIBUÍDAS / TODAS" viram botões
   (como os filtros "Tudo / Não lidas" do WhatsApp): alvo maior,
   e a aba escolhida fica pintada, não só sublinhada.
   ============================================================ */
.conversations-list-wrap ul > li:has(> a.text-button) { margin-inline: 0 6px !important; }
.conversations-list-wrap ul > li > a.text-button {
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  background: rgb(var(--slate-3));
  transition: background .14s ease, color .14s ease;
}
.conversations-list-wrap ul > li > a.text-button::after { display: none !important; }
.conversations-list-wrap ul > li > a.text-button:hover { background: rgb(var(--slate-4)); }
.conversations-list-wrap ul > li > a.text-button.text-n-blue-11 {
  background: rgb(var(--ws-indigo) / .14) !important;
  color: rgb(79 79 200) !important;
}
.dark .conversations-list-wrap ul > li > a.text-button.text-n-blue-11 {
  background: rgb(var(--ws-ciano) / .16) !important;
  color: rgb(var(--ws-ciano)) !important;
}

/* ============================================================
   3. BUSCA SEMPRE À MÃO (a caixa é criada pelo ws-facil.js)
   Antes: a busca ficava no menu lateral, que fica recolhido — só
   aparecia passando o mouse.
   ============================================================ */
#ws-busca { padding: 2px 12px 8px; }
#ws-busca form {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border-radius: 9999px !important;
  background: rgb(var(--slate-3));
  border: 1px solid transparent;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
#ws-busca form:focus-within {
  background: rgb(var(--solid-1));
  border-color: rgb(var(--ws-indigo) / .55);
  box-shadow: 0 0 0 3px rgb(var(--ws-indigo) / .12);
}
#ws-busca .wsb-lupa { width: 16px; height: 16px; flex: 0 0 16px; color: rgb(var(--slate-10)); }
#ws-busca input {
  flex: 1 1 auto; min-width: 0;
  height: 34px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important;
  font-size: 14px; color: rgb(var(--slate-12));
}
#ws-busca input::placeholder { color: rgb(var(--slate-10)); }
#ws-busca .wsb-dica {
  margin: 6px 4px 0; font-size: 11.5px; line-height: 1.35;
  color: rgb(var(--slate-10));
  display: flex; align-items: flex-start; gap: 6px;
}
#ws-busca .wsb-dica b { color: rgb(var(--slate-11)); font-weight: 600; }
#ws-busca .wsb-fechar {
  margin-inline-start: auto; flex: 0 0 auto;
  width: 18px !important; height: 18px !important; padding: 0 !important;
  border: 0; background: transparent; cursor: pointer;
  color: rgb(var(--slate-10)); font-size: 14px; line-height: 1;
  border-radius: 9999px !important;
}
#ws-busca .wsb-fechar:hover { color: rgb(var(--slate-12)); background: rgb(var(--slate-4)); }
/* a dica do botão direito só faz sentido com mouse */
@media (hover: none), (pointer: coarse) { #ws-busca .wsb-dica { display: none; } }

/* ============================================================
   4. CABEÇALHO DA CONVERSA — quem é, de relance
   ============================================================ */
.conversation-details-wrap > div:has(> .header-actions-wrap) span:has(> span[role='img']) {
  width: 40px !important; height: 40px !important;
}
.conversation-details-wrap > div:has(> .header-actions-wrap) span[role='img'] {
  width: 40px !important; height: 40px !important;
  border-radius: 9999px !important;
}
.conversation-details-wrap > div:has(> .header-actions-wrap) span[role='img'] > img {
  width: 100%; height: 100%; object-fit: cover;
}
.conversation-details-wrap > div:has(> .header-actions-wrap) span[role='img'] > span.select-none {
  font-size: 15px !important;
}
.conversation-details-wrap > div:has(> .header-actions-wrap) span.text-sm.font-medium.truncate {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ============================================================
   5. A CONVERSA — saber na hora quem falou
     paciente .......... balão BRANCO, à esquerda
     equipe ............ balão ÍNDIGO clarinho, à direita
     robô (Lumi etc.) .. balão CIANO clarinho, à direita
     nota interna ...... AMARELO com borda tracejada + aviso escrito
   ============================================================ */
ul.conversation-panel {
  background-color: rgb(var(--wsf-conversa)) !important;
  background-image: var(--wsf-textura);
  background-size: 18px 18px;
}

/* paciente */
.conversation-panel .left-bubble.bg-n-slate-4 {
  background: rgb(var(--wsf-recebida)) !important;
  box-shadow: var(--wsf-sombra);
}
/* equipe */
.conversation-panel .right-bubble.bg-n-solid-blue {
  background: rgb(var(--wsf-enviada)) !important;
  box-shadow: var(--wsf-sombra);
}
/* robô / modelo */
.conversation-panel .right-bubble.bg-n-solid-iris {
  background: rgb(var(--wsf-robo)) !important;
  box-shadow: var(--wsf-sombra);
}
/* nota interna: impossível confundir com mensagem ao paciente */
.conversation-panel .right-bubble.bg-n-solid-amber {
  outline: 1.5px dashed rgb(217 165 9 / .75);
  outline-offset: -1.5px;
  box-shadow: var(--wsf-sombra);
}
.conversation-panel .right-bubble.bg-n-solid-amber::before {
  content: 'Nota interna \2014  só a equipe vê';
  display: block;
  margin: 0 0 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--amber-11, 171 100 0));
  opacity: .9;
}

/* avisos do sistema ("conversa atribuída a...", "resolvida") viram
   uma plaquinha discreta no meio, como os avisos do WhatsApp */
.conversation-panel [data-bubble-name='activity'] {
  background: rgb(var(--wsf-recebida) / .85) !important;
  box-shadow: var(--wsf-sombra);
  font-size: 12px !important;
  color: rgb(var(--slate-11)) !important;
}

/* ============================================================
   6. CAIXA DE DIGITAR — confortável e sem susto
   ============================================================ */
/* letra um pouco maior no que se digita */
.reply-box [contenteditable='true'] { font-size: 15px !important; line-height: 1.5 !important; }

/* quando está digitando, a caixa acende na cor da marca */
.conversation-details-wrap .reply-box.is-focused {
  border-color: rgb(var(--ws-indigo) / .55) !important;
  box-shadow: 0 0 0 3px rgb(var(--ws-indigo) / .12);
}

/* modo NOTA INTERNA: borda amarela forte + aviso escrito no canto,
   para ninguém mandar ao paciente o que era só para a equipe
   (nem o contrário) */
.conversation-details-wrap .reply-box.is-private {
  border: 1.5px dashed rgb(217 165 9 / .85) !important;
  box-shadow: none;
}
.conversation-details-wrap .reply-box.is-private::after {
  content: 'O paciente NÃO vê';
  position: absolute;
  top: 16px; inset-inline-end: 84px; /* à esquerda dos ícones IA/expandir */
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  background: rgb(217 165 9 / .18);
  color: rgb(var(--amber-11, 171 100 0));
  pointer-events: none;
}

/* botão Enviar maior e mais fácil de acertar */
.reply-box .right-wrap > button {
  height: 36px !important;
  padding-inline: 18px !important;
  font-size: 14px !important;
  border-radius: 9999px !important;
}

/* botão "Respostas prontas" (criado pelo ws-facil.js) */
.reply-box .ws-prontas {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 9999px !important;
  border: 1px solid rgb(var(--ws-indigo) / .25);
  background: rgb(var(--ws-indigo) / .07);
  color: rgb(79 79 200);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease;
}
.reply-box .ws-prontas:hover { background: rgb(var(--ws-indigo) / .15); }
.reply-box .ws-prontas kbd {
  font: inherit; font-weight: 700;
  padding: 0 5px; border-radius: 5px;
  background: rgb(var(--ws-indigo) / .14);
}
.dark .reply-box .ws-prontas {
  color: rgb(var(--ws-ciano));
  border-color: rgb(var(--ws-ciano) / .30);
  background: rgb(var(--ws-ciano) / .08);
}
/* na nota interna as respostas prontas não funcionam (regra do
   Chatwoot), então o botão some */
.reply-box.is-private .ws-prontas { display: none !important; }

/* ============================================================
   7. CELULAR / TELA DE TOQUE — alvos maiores para o dedo
   (nunca separar só por largura: o Galaxy da WS é largo)
   ============================================================ */
@media (max-width: 767px), (pointer: coarse) {
  #ws-busca input { font-size: 16px; }   /* 16px: o celular não dá zoom sozinho */
  #ws-busca form { height: 40px; }
  .reply-box .right-wrap > button { height: 40px !important; }
  .reply-box .ws-prontas { height: 36px; }
  /* no celular o texto "Respostas prontas" não cabe ao lado dos
     ícones: fica só o "/" */
  .reply-box .ws-prontas .wsp-txt { display: none; }
}

/* conserto 23/09: o número da bolinha de não lidas herdava a cor da hora
   (índigo sobre índigo = invisível). Seletor mais forte que o da hora. */
.conversations-list .conversation:has(.bg-n-teal-9) .absolute.flex-col span.bg-n-teal-9.rounded-full,
.conversations-list .conversation .bg-n-teal-9.rounded-full { color: #fff !important; }
.dark .conversations-list .conversation:has(.bg-n-teal-9) .absolute.flex-col span.bg-n-teal-9.rounded-full,
.dark .conversations-list .conversation .bg-n-teal-9.rounded-full { color: rgb(var(--ws-tinta)) !important; }

/* ============================================================
   MENU LATERAL COM BOTÃO (WS 23/09): "quero a opção de expandir ou
   não, sem ficar cobrindo as conversas".
   · Não abre mais sozinho ao passar o mouse (era isso que cobria).
   · Nasce ABERTO; botão « / » NO ALTO, com cor de destaque.
   · Expandido EMPURRA a tela para o lado.
   · A escolha fica guardada no navegador de cada pessoa.
   · Recolhido: passar o mouse num ícone mostra o nome dele.
   Quem põe as classes é o ws-menu-abre.js (v2).
   ============================================================ */
@media (min-width: 768px) {
  div:has(> aside.bg-n-background) { transition: padding-inline-start .18s ease; }
  html.ws-menu-fixo div:has(> aside.bg-n-background) {
    padding-inline-start: 16rem !important;
  }
  html.ws-menu-fixo aside.bg-n-background.ws-aberto {
    box-shadow: none !important;
    border-inline-end: 1px solid rgb(var(--slate-4));
  }
  #ws-menu-pino {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 8px 10px; padding: 7px 8px; flex-shrink: 0;
    border-radius: 10px; border: 1px solid rgb(var(--ws-indigo) / .35);
    background: rgb(var(--ws-indigo) / .12); color: rgb(79 79 200);
    font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background .14s ease;
  }
  #ws-menu-pino:hover { background: rgb(var(--ws-indigo) / .22); }
  #ws-menu-pino:focus-visible { outline: 2px solid rgb(var(--ws-indigo)); outline-offset: 2px; }
  .dark #ws-menu-pino {
    background: rgb(var(--ws-ciano) / .14); color: rgb(var(--ws-ciano));
    border-color: rgb(var(--ws-ciano) / .35);
  }
  .dark #ws-menu-pino:hover { background: rgb(var(--ws-ciano) / .24); }
  #ws-menu-pino svg { width: 16px; height: 16px; flex-shrink: 0; }
  aside.bg-n-background:not(.ws-aberto) #ws-menu-pino .wsmp-txt { display: none; }
  aside.bg-n-background.ws-aberto #ws-menu-pino { justify-content: flex-start; }
}
@media (max-width: 767px) { #ws-menu-pino { display: none !important; } }

/* ============================================================
   HORA DA ÚLTIMA MENSAGEM ao lado do nome (WS 23/09)
   Antes: "1mo • 1mo" (em inglês; o 2º era a data de criação).
   Agora: HÁ QUANTO TEMPO foi a última mensagem — agora · 12m ·
   27h3m · 3d4h (WS 23/09). Passar o mouse mostra a
   data e hora completas. A hora original do Chatwoot fica escondida
   só quando a nossa conseguiu ser montada.
   ============================================================ */
.conversations-list .conversation .absolute.flex-col:has(> .ws-hora) > span:has(.v-popper--has-tooltip) {
  display: none !important;
}
.conversations-list .conversation .ws-hora {
  margin-inline-start: auto; font-size: 11.5px; line-height: 16px;
  color: rgb(var(--slate-11)); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.conversations-list .conversation:has(.bg-n-teal-9) .ws-hora { color: rgb(79 79 200); font-weight: 700; }
.dark .conversations-list .conversation:has(.bg-n-teal-9) .ws-hora { color: rgb(var(--ws-ciano)); }