/* Override de marca ProntuZAP — aproximação sobre a paleta padrão do Chatwoot,
   sem recompilar o frontend. Local/descartável.
   Fonte da paleta: especificação de identidade visual do Allan (24/09/2026):
   petrol-500 #225968 (primário) / copper-600 #A94817 (destaque) / gradiente
   petrol 135° de #225968 a #143741. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=Inter:wght@400;500&display=swap');

/* --- Paleta "next design system" (--iris-*/--blue-*), usada pelos componentes
   novos (components-next: sidebar, dropdowns, etc.) via variável CSS --- */
:root {
  --iris-9: 34 89 104;   /* #225968 petrol-500 */
  --iris-10: 20 55 65;   /* #143741 petrol escuro (hover) */
  --iris-11: 34 89 104;
  --iris-12: 15 30 35;
  --blue-9: 34 89 104;
  --blue-10: 20 55 65;
  --blue-11: 34 89 104;
  --blue-12: 15 30 35;
  --solid-blue: 168 210 218;   /* petrol-100, tint claro */
  --solid-blue-2: 240 247 249; /* petrol-25 */
  --text-blue: 15 30 35;
  --border-blue-strong: 34 89 104;
}

.dark {
  --iris-9: 79 157 174;   /* petrol-400, mais claro p/ contraste em fundo escuro */
  --iris-10: 127 196 212; /* petrol-300 */
  --iris-11: 168 210 218; /* petrol-100 */
  --iris-12: 240 247 249;
  --blue-9: 79 157 174;
  --blue-10: 127 196 212;
  --blue-11: 168 210 218;
  --blue-12: 240 247 249;
}

/* --- Paleta antiga "woot-*", usada por botões e elementos mais antigos.
   Essa é compilada como hex fixo no CSS (não usa variável), então precisa de
   override direto por classe, com !important. --- */
.bg-woot-25 { background-color: #f0f7f9 !important; }
.bg-woot-100 { background-color: #a8d2da !important; }
.bg-woot-400 { background-color: #2f7a8c !important; }
.bg-woot-500 { background-color: #225968 !important; }
.border-woot-500 { border-color: #225968 !important; }
.text-woot-500 { color: #225968 !important; }
.text-woot-600 { color: #143741 !important; }

/* --- Token "n-brand" (#2781f6), o accent REAL usado no dashboard novo
   (botões, aba ativa, links, foco, checkbox) — é hex fixo, não variável,
   compilado direto no CSS a partir de theme/colors.js linha ~229. Sem isso,
   nada muda visualmente por mais que --iris-*/--blue-* sejam sobrepostas. --- */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.group-hover\:bg-n-brand,
.after\:bg-n-brand:after,
.before\:bg-n-brand:before {
  background-color: #225968 !important;
}
.text-n-brand,
.hover\:text-n-brand:hover,
.group-hover\:text-n-brand,
.group-focus-within\:text-n-brand {
  color: #225968 !important;
}
.border-n-brand,
.border-t-n-brand,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.hover\:border-n-brand:hover,
.focus\:border-n-brand:focus,
.focus-visible\:border-n-brand:focus-visible {
  border-color: #225968 !important;
}
.outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-visible\:outline-n-brand:focus-visible,
.focus-within\:outline-n-brand:focus-within {
  outline-color: #225968 !important;
}
.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-visible\:ring-n-brand:focus-visible,
.focus-within\:ring-n-brand:focus-within {
  --tw-ring-color: #225968 !important;
}

/* Nome da conta ("ProntuZAP") na sidebar expandida: tipografia da marca +
   efeito bicolor via gradiente de texto (aproxima "Prontu"/"ZAP" sem editar o
   Vue). O corte é em 61.3% — medido de verdade via canvas/DOM (largura
   renderizada de "Prontu" vs "ZAP" em Outfit 800, 1.25rem, letter-spacing
   -0.055em: 57.04px / 93.00px = 61.33%). NÃO usar 66.7% (proporção por
   contagem de caracteres, 6 de 9) — maiúsculas são mais largas que
   minúsculas, aquele valor cortava no meio da letra e "vazava" azul sobre o
   laranja. */
/* Nome da conta na sidebar expandida (26/09/2026) — REESCRITO. Antes era
   texto real (`{{ currentAccount.name }}`) com gradiente CSS simulando o
   bicolor "Prontu"/"ZAP". Dois problemas resolvidos trocando pra logo de
   verdade (imagem, mesmo arquivo aprovado pelo Allan):
   1) o corte do gradiente por % nunca é pixel-perfect pra qualquer largura
      de fonte renderizada — "vazava" cor entre letras (relatado 26/09);
   2) MAIS IMPORTANTE: era literalmente o campo "Nome da conta", editável
      em Configurações pelo cliente — qualquer cliente que renomeasse a
      própria conta mudava o que aparece na sidebar. Nenhum cliente deve
      conseguir tirar "ProntuZAP" da marca do produto. Trocando pra imagem
      fixa, o nome da conta fica livre pra cada cliente editar sem afetar a
      marca — dado que só existe no campo, nunca mais renderizado aqui.
   Ícone quadrado nativo + divisor são escondidos (a logo horizontal já traz
   o ícone embutido); o seletor usa `:has()` ancorado no id
   `#sidebar-account-switcher` de propósito, pra não depender de nenhuma
   classe Tailwind solta que possa colidir com outro elemento da tela. */
.flex.gap-2.items-center.min-w-0.px-2:has(#sidebar-account-switcher)
  > .grid.flex-shrink-0.place-content-center.size-6,
.flex.gap-2.items-center.min-w-0.px-2:has(#sidebar-account-switcher)
  > .flex-shrink-0.w-px.h-3.bg-n-strong {
  display: none !important;
}
#sidebar-account-switcher {
  padding-inline: 0 !important;
  justify-content: center !important;
}
#sidebar-account-switcher span:first-child {
  display: block;
  width: 100%;
  min-width: 140px;
  /* 26/09: aumentado (26px -> 38px, ultrapassando um pouco a altura da
     linha de propósito) e centralizado (era "left center") — tamanho
     pequeno e alinhamento à esquerda relatados pelo Allan como "logo
     pequena demais". */
  height: 38px;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: none !important;
  position: relative;
}
#sidebar-account-switcher span:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/prontuzap-logo-horizontal.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.dark #sidebar-account-switcher span:first-child::before {
  background-image: url('/prontuzap-logo-horizontal-dark.svg');
}

/* ==========================================================================
   TRILHA 1 — refinamento visual "produto SaaS" (25/09/2026), aprovado em
   cima do mock "[ProntuZAP] Protótipo Codex". Só CSS, nenhum .vue tocado,
   nenhuma feature/Kanban afetada. Seletores confirmados inspecionando o DOM
   ao vivo (não são suposição) — ver DECISOES.md para a lista completa e o
   que ficou pendente pra Trilha 2 (build de frontend).
   ========================================================================== */

/* --- 1. Sidebar esquerda: espaçamento, hover e item ativo --- */
nav a {
  transition: background-color 0.15s ease, color 0.15s ease;
  margin-bottom: 1px;
}
nav a.router-link-active {
  background-color: rgba(34, 89, 104, 0.1) !important;
  color: #143741 !important;
  font-weight: 600 !important;
  position: relative;
}
.dark nav a.router-link-active {
  background-color: rgba(79, 157, 174, 0.16) !important;
  color: #e8f2f4 !important;
}
nav a.router-link-active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: #225968;
}
.dark nav a.router-link-active::before {
  background: #4f9dae;
}

/* --- 2. Lista de conversas: cards, item selecionado, badge, etiquetas --- */
.conversations-list-wrap {
  background-color: #fafbfb;
}
.dark .conversations-list-wrap {
  background-color: inherit;
}
.conversation {
  transition: background-color 0.15s ease;
}
.conversation.active,
.conversation.selected {
  background-color: rgba(34, 89, 104, 0.08) !important;
  box-shadow: inset 3px 0 0 #225968;
}
.dark .conversation.active,
.dark .conversation.selected {
  background-color: rgba(79, 157, 174, 0.12) !important;
  box-shadow: inset 3px 0 0 #4f9dae;
}
.conversation--user {
  font-weight: 600 !important;
}
/* avatar circular (mock usa círculo; base usa rounded-lg/quadrado) */
.conversation span.relative.inline-flex.items-center.justify-center.object-cover {
  border-radius: 9999px !important;
}
/* badge de não lidas — cor de marca em vez do teal padrão */
.conversation .bg-n-teal-9 {
  background-color: #a94817 !important;
}
/* etiquetas (tags) do card — leve refinamento de forma, sem trocar cor
   (cor de cada etiqueta é escolhida por conta/etiqueta, não é da marca) */
.conversation .label {
  border-radius: 4px !important;
  font-weight: 500;
}

/* --- 3. Área central da conversa: bolhas (cor por remetente, estilo WhatsApp)
   e fundo com o padrão de doodles fornecido pelo Allan (25/09) --- */
.message-bubble-container {
  margin-bottom: 10px !important;
}
/* Recebida (cliente) — branco. Selectors `.left-bubble`/`.right-bubble` são
   classes estáveis do componente Message.vue (não são utilitário Tailwind
   solto), confirmadas inspecionando o DOM ao vivo. */
.left-bubble {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.dark .left-bubble {
  background-color: #202c33 !important;
}
/* Enviada ao cliente (mensagem pública do agente) — verde WhatsApp, não a
   cor da marca: o objetivo aqui é diferenciar remetente rapidamente, igual
   ao hábito visual do WhatsApp, não reforçar a marca dentro do balão.
   CORRIGIDO em 26/09: o seletor era só `.right-bubble` (classe de
   ORIENTAÇÃO — lado direito — compartilhada tanto pela mensagem pública
   quanto pela nota privada/anotação interna, que também fica à direita).
   Isso fazia nota privada ficar verde igual mensagem pública, escondendo a
   cor âmbar nativa do Chatwoot pra nota privada (`bg-n-solid-amber`, ver
   `bubbles/Base.vue`). Agora o seletor exige também a classe de VARIANTE
   `bg-n-solid-blue` (usada só pra mensagem pública/agente), preservando
   `.right-bubble.bg-n-solid-amber` (nota privada) intocado — cor nativa
   volta a valer sozinha, sem precisar reimplementar nada. */
.right-bubble.bg-n-solid-blue {
  background-color: #d9fdd3 !important;
  color: #111b21 !important;
}
.dark .right-bubble.bg-n-solid-blue {
  background-color: #005c4b !important;
  color: #e9edef !important;
}
.right-bubble.bg-n-solid-blue a {
  color: #075e54;
}

/* Fundo da conversa: padrão de doodles (arquivo do Allan, 25/09), mosaicado,
   mesmo efeito do papel de parede padrão do WhatsApp. */
.conversation-panel {
  background-color: #efeae2;
  background-image: url('/chat-bg.png');
  background-repeat: repeat;
  background-size: 380px auto;
}
.dark .conversation-panel {
  background-color: #0b141a;
  background-image: url('/chat-bg-dark.png');
  background-repeat: repeat;
  background-size: 380px auto;
}

/* --- 4. Composer: mais limpo, tabs Responder/Anotação --- */
.reply-box {
  border-radius: 10px;
  border-color: #e3e8ea;
}
.dark .reply-box {
  border-color: rgba(255, 255, 255, 0.08);
}
.reply-box:focus-within {
  border-color: #225968 !important;
  box-shadow: 0 0 0 1px rgba(34, 89, 104, 0.25);
}
.reply-box__top {
  padding-top: 4px;
}

/* --- 5. Painel direito: manter estrutura nativa, só espaçamento/consistência
   dos blocos accordion (Kanban, Ações, Macros, Atributos, etc.) --- */
[class*="outline-n-weak"] {
  border-radius: 8px !important;
}

/* --- 6. Geral --- */
* {
  scrollbar-width: thin;
}

/* --- 7. Ocultar itens da sidebar (26/09/2026) — só os 3 com seletor por
   `href` comprovadamente exclusivo (achado documentado em DECISOES.md).
   "Todas as conversas", "Pastas" e "Canais" ficaram de fora de propósito:
   não têm seletor exclusivo sem recorrer a texto/posição, então não são
   escondidos por CSS — pedido explícito do Allan (26/09). --- */
nav a[href$="/mentions/conversations"],
nav a[href$="/participating/conversations"],
nav a[href$="/unattended/conversations"] {
  display: none !important;
}
/* ========================================================================== */

/* ==========================================================================
   TRILHA 1 — 2ª passada (26/09/2026), refinando em cima do mock aprovado.
   Só CSS, mesmas restrições de sempre: nenhum seletor por texto/nth-child,
   nenhum item adicional escondido, Kanban/fazer_ai intocados. Todo seletor
   abaixo é `class*=`/`href$=` confirmado no DOM ao vivo, não suposição.
   ========================================================================== */

/* --- 1. Sidebar: hierarquia, espaçamento, cabeçalhos de grupo mais leves --- */
nav {
  padding-top: 2px;
}
nav a {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
/* Cabeçalhos de grupo ("Pastas", "Canais" — achado: só esses dois usam essa
   combinação de classes no nav; aplicado igualmente aos dois, não é escolha
   de um item específico) — deixa menos carregado visualmente. */
nav button[class*="pe-14"] {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.75;
}
nav button[class*="pe-14"]:hover {
  opacity: 1;
}

/* --- 2. Lista de conversas: respiro vertical, destaque do item selecionado,
   badge/horário/preview --- */
.conversation {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.conversation.active,
.conversation.selected {
  background-color: rgba(34, 89, 104, 0.1) !important;
  box-shadow: inset 4px 0 0 #225968;
}
.dark .conversation.active,
.dark .conversation.selected {
  background-color: rgba(79, 157, 174, 0.14) !important;
  box-shadow: inset 4px 0 0 #4f9dae;
}
/* preview da última mensagem — leve redução de peso pra separar do nome.
   Seletor: irmã adjacente do H4.conversation--user (relação estrutural
   estável do componente, não é nth-child nem texto). */
.conversation--user + div {
  font-weight: 400 !important;
  opacity: 0.8;
}
/* horário do card */
.conversation .text-xxs {
  font-variant-numeric: tabular-nums;
}

/* --- 3. Cabeçalho da conversa: mais presença pro contato --- */
.conversation-details-wrap > div[class*="h-24"] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.conversation-details-wrap > div[class*="h-24"] span.relative.inline-flex {
  transform: scale(1.08);
}
.conversation-details-wrap .header-actions-wrap {
  gap: 6px !important;
}

/* --- 4. Composer: transformar o toggle Responder/Mensagem Privada num tab
   mais claro, com o "thumb" na cor da marca; caixa mais limpa --- */
.reply-box button[class*="bg-n-alpha-2"][class*="rounded-full"] {
  background-color: #eef1f2;
  padding: 3px;
}
.dark .reply-box button[class*="bg-n-alpha-2"][class*="rounded-full"] {
  background-color: rgba(255, 255, 255, 0.06);
}
/* Thumb em tom claro de petrol (não petrol sólido escuro) — de propósito:
   como as duas divs de texto (Responder/Mensagem Privada) não têm classe
   `.active` exclusiva pra diferenciar via CSS, um tom claro mantém o texto
   escuro padrão do Chatwoot legível nos dois estados, sem precisar de hack
   de blend-mode pra trocar cor de texto sobre o thumb. */
.reply-box button[class*="bg-n-alpha-2"][class*="rounded-full"] [class*="bg-n-solid-1"] {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(34, 89, 104, 0.25), inset 0 0 0 1.5px #225968;
}
.dark .reply-box button[class*="bg-n-alpha-2"][class*="rounded-full"] [class*="bg-n-solid-1"] {
  background-color: #2f4a52 !important;
  box-shadow: inset 0 0 0 1.5px #4f9dae;
}
.reply-box button[class*="bg-n-alpha-2"][class*="rounded-full"] > div[class*="z-20"] {
  font-weight: 500;
  font-size: 0.8125rem;
}
.reply-box {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.reply-box > div:last-child button[class*="bg-n-slate-9"] {
  border-radius: 8px;
}
.reply-box button.bg-n-brand {
  box-shadow: 0 1px 2px rgba(34, 89, 104, 0.3);
}

/* --- 5. Painel direito: accordions, espaçamento, tipografia --- */
[class*="outline-n-weak"] {
  transition: background-color 0.15s ease;
}
[class*="outline-n-weak"]:hover {
  background-color: rgba(34, 89, 104, 0.04);
}
.dark [class*="outline-n-weak"]:hover {
  background-color: rgba(79, 157, 174, 0.06);
}

/* --- 6. Responsividade: nada acima usa unidade fixa que quebre telas
   menores (tudo em rem/% ou sobre classes que já são responsivas nativamente
   — ex.: o cabeçalho já tem xl:h-12 vs h-24 do próprio Chatwoot). Reforço
   only pra telas bem estreitas, pra não perder legibilidade do toggle do
   composer. */
@media (max-width: 480px) {
  .reply-box button[class*="bg-n-alpha-2"][class*="rounded-full"] > div[class*="z-20"] {
    font-size: 0.75rem;
  }
}
/* ========================================================================== */