/* InspeChat — tema "WhatsApp Web" (pedido do Lucas 26/10/2026). Só CSS: nada do Chatwoot é recompilado.
   Entra pelo layout vueapp.html.erb (aplicar_branding_chatwoot.sh) e o vigia branding_watch reaplica após atualização.
   Mecânica: o Tailwind do Chatwoot 4.18 resolve bg-n-* / text-n-* em rgb(var(--slate-N)), var(--surface-1) etc.
   Redefinindo essas variáveis raiz, a tela inteira recolore de uma vez. Depois, ajustes pontuais pelas classes
   estruturais (left-bubble, right-bubble, conversations-list-wrap, conversation-panel, reply-box). */

/* ===== 1. PALETA — modo claro (o do WhatsApp Web) ===== */
:root, html:not(.dark) {
  --background-color: 240 242 245;   /* fundo geral, cinza do zap */
  --surface-1: 255 255 255;          /* lista de conversas, cabeçalhos */
  --surface-2: 255 255 255;
  --solid-1: 255 255 255; --solid-2: 255 255 255; --solid-3: 255 255 255;
  --button-color: 255 255 255;
  --slate-1: 255 255 255; --slate-2: 247 248 250; --slate-3: 240 242 245;
  --slate-4: 255 255 255;            /* balão do cliente = branco */
  --slate-5: 229 231 235; --slate-6: 217 221 226;
  --slate-11: 84 101 111;            /* texto secundário (#54656f) */
  --slate-12: 17 27 33;              /* texto principal (#111b21) */
  --border-weak: 233 237 239;        /* divisórias (#e9edef) */
  --border-strong: 209 215 219;
  --solid-blue: 217 253 211;         /* balão meu = verde #d9fdd3 */
  --solid-iris: 217 253 211;         /* balão do bot = igual ao meu */
  --solid-amber: 255 248 196;        /* nota interna = amarelo claro */
  --alpha-1: 0, 0, 0, .04; --alpha-2: 0, 0, 0, .06;
}
/* ===== 1b. PALETA — modo escuro (o do WhatsApp Web escuro) ===== */
body.dark {
  --background-color: 17 27 33;      /* #111b21 */
  --surface-1: 17 27 33;
  --surface-2: 32 44 51;             /* #202c33 */
  --solid-1: 32 44 51; --solid-2: 32 44 51; --solid-3: 32 44 51;
  --button-color: 42 57 66;
  --slate-1: 17 27 33; --slate-2: 32 44 51; --slate-3: 42 57 66;
  --slate-4: 32 44 51;               /* balão do cliente */
  --slate-5: 51 68 78; --slate-6: 62 79 89;
  --slate-11: 134 150 160;           /* #8696a0 */
  --slate-12: 233 237 239;           /* #e9edef */
  --border-weak: 34 47 54;
  --border-strong: 51 68 78;
  --solid-blue: 0 92 76;             /* balão meu = #005c4b */
  --solid-iris: 0 92 76;
  --solid-amber: 64 58 30;
  --alpha-1: 255, 255, 255, .05; --alpha-2: 255, 255, 255, .08;
}

/* ===== 2. TIPOGRAFIA e verde da marca ===== */
body { font-family: "Segoe UI", Helvetica Neue, Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; }
.bg-n-brand, .bg-n-brand\/90 { background-color: #00a884 !important; }   /* verde do botão/badges do zap */
.text-n-brand { color: #00a884 !important; }
.border-n-brand { border-color: #00a884 !important; }

/* ===== 3. LISTA DE CONVERSAS (coluna da esquerda) ===== */
.conversations-list-wrap { border-right: 1px solid rgb(var(--border-weak)); }
.conversations-list-wrap > .h-\[3\.25rem\], .conversations-list-wrap > div:first-child { background: rgb(var(--surface-1)); border-bottom: 1px solid rgb(var(--border-weak)); }
/* cartão da conversa: avatar redondo, linha fina embaixo, selecionado em cinza bem leve */
.conversations-list [class*="ConversationCard"], .conversations-list .conversation {
  border-bottom: 1px solid rgb(var(--border-weak)) !important; border-radius: 0 !important; margin: 0 !important;
}
.conversations-list .conversation.active, .conversations-list [class*="ConversationCard"].active,
.conversations-list .bg-n-alpha-2 { background: rgb(var(--slate-3)) !important; }
body.dark .conversations-list .conversation.active, body.dark .conversations-list .bg-n-alpha-2 { background: rgb(42 57 66) !important; }
.conversations-list img[class*="rounded"], .conversations-list .avatar-container, .conversations-list [class*="Avatar"] { border-radius: 9999px !important; }
/* contador de não lidas = bolinha verde do zap */
.conversations-list .unread-count, .conversations-list [class*="unread"] span,
.conversations-list .rounded-full.bg-n-alpha-2.size-5 { background: #25d366 !important; color: #fff !important; border-radius: 9999px !important; font-weight: 600; font-size: 11px; }

/* ===== 4. ABAS Minhas / Não atribuídas / Todas → só "Todas" (Leandro, 19/10) ===== */
/* a aba ativa já nasce em "Todas" (patch de 1 linha no JS); aqui só escondemos as outras duas */
.conversations-list-wrap [role="tablist"] > :nth-child(1),
.conversations-list-wrap [role="tablist"] > :nth-child(2),
.conversations-list-wrap .tabs .tabs-title:nth-child(1),
.conversations-list-wrap .tabs .tabs-title:nth-child(2),
.conversations-list-wrap [class*="tabbar"] > button:nth-child(1),
.conversations-list-wrap [class*="tabbar"] > button:nth-child(2),
.conversations-list-wrap [class*="TabBar"] > button:nth-child(1),
.conversations-list-wrap [class*="TabBar"] > button:nth-child(2) { display: none !important; }

/* ===== 5. ÁREA DA CONVERSA: papel de parede + balões ===== */
.conversation-panel {
  background-color: #efeae2 !important;
  background-image: url("https://inspectech.inspesolda.site/inspechat-papel-de-parede.svg") !important;
  background-size: 412px !important; background-repeat: repeat !important;
}
body.dark .conversation-panel { background-color: #0b141a !important; background-image: url("https://inspectech.inspesolda.site/inspechat-papel-de-parede-escuro.svg") !important; }
/* a lista de mensagens é transparente pra deixar o papel de parede aparecer */
.conversation-panel .bg-n-surface-1, .conversation-panel ul.bg-n-surface-1 { background: transparent !important; }
.message-bubble-container { margin-bottom: 4px !important; }
/* balão: cantos 7.5px, sombra leve, largura máxima do zap */
.left-bubble, .right-bubble {
  border-radius: 7.5px !important; box-shadow: 0 1px .5px rgba(11,20,26,.13) !important;
  max-width: min(65%, 560px) !important; padding: 6px 7px 8px 9px !important; font-size: 14.2px; line-height: 19px;
  position: relative; overflow: visible !important;
}
/* "rabinho" do balão */
.left-bubble  { border-top-left-radius: 0 !important; }
.right-bubble { border-top-right-radius: 0 !important; }
.left-bubble::before, .right-bubble::before {
  content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; z-index: 0;
}
/* triangulo do rabinho: mesma cor do balao (cliente = slate-4, meu = solid-blue) */
.left-bubble::before  { left: -8px;  border-width: 0 8px 10px 0; border-color: transparent rgb(var(--slate-4)) transparent transparent; }
.right-bubble::before { right: -8px; border-width: 0 0 10px 8px; border-color: transparent transparent transparent rgb(var(--solid-blue)); }
.right-bubble.bg-n-solid-amber::before { border-left-color: rgb(var(--solid-amber)); }
.left-bubble  { color: rgb(var(--slate-12)) !important; }
.right-bubble { color: rgb(var(--slate-12)) !important; }
/* hora + status no canto inferior direito, pequeno e cinza, como no zap */
.left-bubble [class*="MessageMeta"], .right-bubble [class*="MessageMeta"],
.left-bubble time, .right-bubble time { font-size: 11px !important; color: rgb(var(--slate-11)) !important; opacity: .85; }
/* mensagens de atividade ("X atribuiu…") = pílula cinza no centro, como o "Hoje" do zap */
.message-bubble-container [class*="Activity"], .message-bubble-container .bg-n-alpha-1 {
  background: rgba(255,255,255,.92) !important; color: rgb(var(--slate-11)) !important; border-radius: 7.5px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 12.5px !important; padding: 5px 12px !important;
}
body.dark .message-bubble-container [class*="Activity"], body.dark .message-bubble-container .bg-n-alpha-1 { background: rgba(24,34,40,.95) !important; }

/* ===== 6. CABEÇALHO DA CONVERSA e CAIXA DE RESPOSTA ===== */
.conversation-page > header, [class*="ConversationHeader"], .conv-header { background: rgb(var(--surface-2)) !important; border-bottom: 1px solid rgb(var(--border-weak)) !important; }
.reply-box { background: rgb(var(--surface-2)) !important; border-top: 1px solid rgb(var(--border-weak)) !important; }
.reply-box .reply-box__top, .reply-box textarea, .reply-box .ProseMirror {
  background: rgb(var(--surface-1)) !important; border-radius: 8px !important; font-size: 15px;
}
body.dark .reply-box .reply-box__top, body.dark .reply-box textarea, body.dark .reply-box .ProseMirror { background: rgb(42 57 66) !important; }
/* botão Enviar verde do zap */
.reply-box button[type="submit"], .reply-box .send-button, .reply-box [class*="send"] button { background: #00a884 !important; color: #fff !important; border-radius: 9999px !important; }

/* ===== 7. SIMPLIFICAÇÃO (reunião 19/10: "parecer o WhatsApp Web") ===== */
/* painel de dados do contato à direita, escondido (abre pelo nome do contato se precisar) */
.conversation-sidebar-wrap, [class*="ConversationSidebar"], .contact--panel,
/* 03/11: o painel do contato (botão 👤) volta a abrir — a regra que o escondia saiu daqui */
/* menu lateral da esquerda só com o essencial: fica, mas sem o fundo chamativo */
[class*="sidebar"] .bg-n-background { background: rgb(var(--surface-1)) !important; }
/* itens que a equipe não usa no dia a dia */
a[href*="/reports"], a[href*="/campaigns"], a[href*="/portals"], a[href*="/captain"], a[href*="/sla"] { display: none !important; }

/* ===== 8. BARRA DE ROLAGEM fina, como o zap ===== */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(11,20,26,.2); border-radius: 3px; }
body.dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }

/* ===== 9. AJUSTES VISTOS NA TELA REAL (4.19.1, 26/10) — seletores lidos do DOM logado ===== */
/* 9a. Abas Minhas / Nao atribuidas / Todos: no 4.19 e <ul.flex.min-w-[6.25rem]> com 3 <li.flex-shrink-0><a>. Escondo os 2 primeiros li. */
.conversations-list-wrap ul.list-none > li.flex-shrink-0:nth-child(1),
.conversations-list-wrap ul.list-none > li.flex-shrink-0:nth-child(2) { display: none !important; }
.conversations-list-wrap ul.list-none > li.flex-shrink-0:nth-child(3) { margin-left: 0 !important; }

/* 9b. Linha da conversa no modo LISTA LARGA (o bloco esquerdo tem o h4 do nome; 27/10: sem esse :has as regras
   pegavam o modo CARTAO da Stefanny e escondiam a foto). Bloco esquerdo tem 12 filhos: 1 checkbox, 2 sep, 3-5 icones, 6 sep, 7 caixa, 8 sep, 9 numero,
   10 AVATAR, 11 NOME (h4), 12 ASSUNTO (div.grid). Bloco direito = tempos. Viro cartao do zap. */
.conversations-list .conversation:has(> div:first-child > h4) {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  height: auto !important; min-height: 72px !important; padding: 12px 14px !important;
  border-bottom: 1px solid rgb(var(--border-weak)) !important;
}
.conversations-list .conversation > div:first-child:has(> h4) {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
  column-gap: 12px !important; row-gap: 2px !important; align-items: center !important;
}
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(-n+9) { display: none !important; }
/* avatar: 1a coluna, ocupa as 2 linhas */
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(10) { grid-column: 1 !important; grid-row: 1 / span 2 !important; display: flex !important; align-items: center; justify-content: center; }
/* cadeia real: div.relative.flex > span.group/avatar > span.inline-flex (circulo) > span.select-none (letra) */
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(10) > span,
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(10) > span > span { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 9999px !important; font-size: 18px !important; line-height: 48px !important; }
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(10) img { width: 48px !important; height: 48px !important; border-radius: 9999px !important; object-fit: cover; }
/* nome */
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(11) { grid-column: 2 !important; grid-row: 1 !important; font-size: 16px !important; font-weight: 500 !important; color: rgb(var(--slate-12)) !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* assunto / ultima mensagem: 1 linha, cinza */
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(12) { grid-column: 2 !important; grid-row: 2 !important; display: block !important; font-size: 14px !important; color: rgb(var(--slate-11)) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversations-list .conversation > div:first-child:has(> h4) > :nth-child(12) * { display: inline !important; white-space: nowrap; }
/* tempo a direita, em cima, pequeno */
.conversations-list .conversation > div:last-child { flex: 0 0 auto !important; font-size: 12px !important; color: rgb(var(--slate-11)) !important; padding-top: 2px; }
.conversations-list .conversation.active, .conversations-list .conversation.selected { background: rgb(var(--slate-3)) !important; }
.conversations-list .conversation:hover { background: rgb(var(--slate-2)) !important; }
body.dark .conversations-list .conversation.active, body.dark .conversations-list .conversation:hover { background: rgb(42 57 66) !important; }

/* 9c. Menu lateral: so o essencial (ja conferido na tela: Caixa de Entrada, Conversas, Contatos, Configuracoes). */
nav a[href*="/settings/teams"], nav a[href*="/settings/inboxes"], nav a[href*="/settings/labels"],
nav a[href*="/reports"], nav a[href*="/campaigns"], nav a[href*="/portals"], nav a[href*="/calls"], nav a[href*="/captain"] { display: none !important; }
nav li:has(a[href*="/team/"]), nav li:has(a[href*="/inbox/"]), nav li:has(a[href*="/label/"]) { display: none !important; }

/* ===== 10. CONVERSA: sem abas Mensagens/InspeIA e sem o botao Resolver (pedido do Lucas 26/10) ===== */
/* faixa das abas da conversa = div.flex.border-b.h-10 que contem o ul.list-none com 2 li (Mensagens, InspeIA) */
/* 03/11: barra de abas da conversa (Mensagens | InspeIA) volta a aparecer — é por ela que se abre a IA na conversa */
div.h-10.border-b:has(> ul.list-none > li.flex-shrink-0:nth-child(2):last-child) { display: flex !important; padding: 0 16px; }
/* botao Resolver: REMOVIDO de vez (Lucas 26/10). Fechar conversa so pelo atalho Ctrl+E (Cmd+E no Mac). */
.resolve-actions { display: none !important; }

/* 26/10 (Lucas: "não tá do jeito que vc mandou"): no 4.19 a lista ocupa a tela toda (basis-full) e SOME ao abrir
   a conversa. No computador fica igual WhatsApp Web: lista fixa à esquerda (~30%) + conversa à direita. */
@media (min-width: 900px) {
  .conversations-list-wrap { flex: 0 0 clamp(320px, 30%, 440px) !important; max-width: 440px !important; border-right: 1px solid var(--zap-borda, rgba(134,150,160,.15)); }
  .conversations-list-wrap.hidden { display: flex !important; }
  .conversations-list-wrap + * , .conversations-list-wrap ~ .conversation-details-wrap { flex: 1 1 auto !important; min-width: 0; }
}
/* nome do contato: o 4.19 trava em w-32 (128px) e corta "Grupo: InspeSo..."; usa a linha toda como no zap */
.conversations-list .conversation h4.w-32 { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
/* caixa de digitar baixa (1 linha, cresce conforme digita), como a barra do WhatsApp Web */
.reply-box .ProseMirror.resizable-editor-body { height: auto !important; min-height: 24px !important; max-height: 200px !important; overflow-y: auto !important; }
.reply-box .reply-box__top, .reply-box .resizable-editor-split, .reply-box .ProseMirror-menubar-wrapper { height: auto !important; }
.reply-box .editor-mount { min-height: 24px !important; }
.reply-box .reply-box__top { border-radius: 8px !important; }
/* bolha curta não pode quebrar letra por letra ("Vi / ct / or") */
.left-bubble, .right-bubble { width: fit-content !important; min-width: 64px !important; max-width: 560px !important; word-break: normal !important; overflow-wrap: break-word !important; }
/* 27/10: 'anywhere' deixava quebrar DENTRO da palavra quando a bolha encolhia ("Urgent/e", "mome/nto"); break-word so quebra palavra que nao cabe (link, caminho de pasta) */
.left-bubble *, .right-bubble * { word-break: normal !important; }
@media (max-width: 899px) { .left-bubble, .right-bubble { min-width: 0 !important; max-width: 85% !important; } }

/* 9c. Modo CARTAO (o da Stefanny e de quem nao usa a lista larga): [foto] [caixa+responsavel / nome / previa].
   Deixo no jeito do zap: foto redonda 48px centralizada, nome maior, linha de cima discreta. */
.conversations-list .conversation:has(> div:first-child > span) { align-items: center !important; padding: 8px 12px !important; }
.conversations-list .conversation > div:first-child:has(> span) { display: flex !important; align-items: center; }
.conversations-list .conversation > div:first-child > span { margin-top: 0 !important; }
.conversations-list .conversation > div:first-child > span,
.conversations-list .conversation > div:first-child > span > span { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 9999px !important; }
.conversations-list .conversation > div:first-child > span img { width: 48px !important; height: 48px !important; border-radius: 9999px !important; object-fit: cover; }
.conversations-list .conversation h4.conversation--user { font-size: 16px !important; font-weight: 500 !important; margin-left: 12px !important; color: rgb(var(--slate-12)) !important; }
.conversations-list .conversation h4.conversation--user + div { margin-left: 12px !important; font-size: 14px !important; color: rgb(var(--slate-11)) !important; }
/* linha de cima do cartao (caixa "{} adm-tamires" + responsavel): o zap nao tem; a caixa aparece no topo da conversa (03/11) */
.conversations-list .conversation:has(> div:first-child > span) > div:nth-child(2) > div:first-child { display: none !important; }
.conversations-list .conversation:has(> div:first-child > span) > div:nth-child(2) { padding: 10px 0 !important; position: relative; }
.conversations-list .conversation h4.conversation--user { margin-top: 0 !important; padding-top: 0 !important; padding-right: 64px !important; line-height: 1.3 !important; }
/* hora e bolinha de nao lidas no canto direito, alinhadas com o nome (no cartao ficavam presas a linha escondida) */
.conversations-list .conversation:has(> div:first-child > span) > div:nth-child(2) > div.absolute { top: 12px !important; right: 12px !important; }
/* cartao: nome/previa cortam com "..." e a coluna da hora (+ bolinha verde embaixo) fica fixa a direita, como no zap */
.conversations-list .conversation:has(> div:first-child > span) { overflow: hidden !important; }
.conversations-list .conversation:has(> div:first-child > span) > div:nth-child(2) { min-width: 0 !important; flex: 1 1 auto !important; max-width: 100% !important; }
.conversations-list .conversation:has(> div:first-child > span) h4.conversation--user,
.conversations-list .conversation:has(> div:first-child > span) h4.conversation--user + div { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding-right: 70px !important; max-width: 100% !important; box-sizing: border-box !important; }
.conversations-list .conversation:has(> div:first-child > span) > div:nth-child(2) > div.absolute { top: 50% !important; transform: translateY(-50%); right: 14px !important; align-items: flex-end !important; gap: 6px !important; }