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

:root {
  --bg-main: #061733;
  --bg-secondary: #03102A;
  --bg-outer: #02091A;
  --body-gradient-start: #0b2555;
  --yellow: #FFD000;
  --accent-text: #FFCC00; /* amarelo usado como texto/borda - precisa ficar mais escuro no tema claro */
  --on-accent: #04101f; /* texto sobre fundo amarelo solido - sempre escuro, nos dois temas */
  --accent-blue: #0C88FA; /* azul ClimaDek (paleta oficial) - usado em foco/links, junto do dourado */
  --focus-color: var(--yellow);
  --focus-shadow: rgba(255,204,0,0.15);
  --orange: #F5A623;
  --green: #34D399;
  --text: #F2F6FC;
  --text-muted: rgba(242, 246, 252, 0.6);
  --border: rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-bg-hover: rgba(255, 255, 255, 0.09);
  --input-bg: rgba(255, 255, 255, 0.07);
  --wash-weak: rgba(255, 255, 255, 0.03);
  --wash-mid: rgba(255, 255, 255, 0.06);
  --wash-strong: rgba(255, 255, 255, 0.09);
  --danger: #e0473e;
  --radius: 15px;
  --sidebar-w: 230px;

  --sidebar-bg: #03102A;
  --sidebar-text: #F2F6FC;
  --sidebar-text-muted: rgba(242, 246, 252, 0.6);
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-wash: rgba(255, 255, 255, 0.05);

  /* aliases legados (mantidos para nao quebrar referencias antigas) */
  --navy: var(--bg-secondary);
  --navy-dark: var(--bg-outer);
  --blue: var(--yellow);
  --blue-medium: var(--orange);
  --blue-light: var(--yellow);
  --yellow-dark: #e0b700;
  --gray: var(--text-muted);
  --gray-light: var(--bg-main);
  --success: var(--green);
  --white: var(--text);

  /* Bolha "enviada" do chat de WhatsApp (/whatsapp.html) - verde escuro, mesma família de
     cor do WhatsApp Web no tema escuro, pra ficar reconhecível de cara. */
  --wa-out-bg: #0b4a37;
  --wa-out-text: #eafff3;
  --wa-accent: #00a884;
  --wa-header-bg: #202c33;
  --wa-panel-bg: #111b21;
  --wa-chat-bg: #0b141a;
  --wa-input-bg: #2a3942;
  --wa-icon: #aebac1;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-main: #eef2f8;
  --bg-secondary: #ffffff;
  --bg-outer: #e4e9f2;
  --body-gradient-start: #ffffff;
  --accent-text: #9c6b0a;
  --text: #0b1220;
  --text-muted: #5b6b87;
  --border: #dde5f0;
  --border-soft: #e6ebf3;
  --card-bg: #ffffff;
  --card-bg-hover: #f7f9fc;
  --input-bg: #ffffff;
  --wash-weak: rgba(6, 23, 51, 0.035);
  --wash-mid: rgba(6, 23, 51, 0.055);
  --wash-strong: rgba(6, 23, 51, 0.08);
  --focus-color: var(--accent-blue);
  --focus-shadow: rgba(12, 136, 250, 0.18);

  /* sidebar clara com um leve tom azulado; usa a logo com texto preto (logo-light.png) */
  --sidebar-bg: #f2f6fd;
  --sidebar-text: #0b1220;
  --sidebar-text-muted: #5b6b87;
  --sidebar-border: #dde5f0;
  --sidebar-wash: rgba(12, 136, 250, 0.07);

  /* Verde clarinho clássico do WhatsApp Web (tema claro). */
  --wa-out-bg: #d9fdd3;
  --wa-out-text: #0b3d24;
  --wa-accent: #00a884;
  --wa-header-bg: #f0f2f5;
  --wa-panel-bg: #ffffff;
  --wa-chat-bg: #efeae2;
  --wa-input-bg: #ffffff;
  --wa-icon: #54656f;

  color-scheme: light;
}

/* Terceiro tema ("colorido") - paleta SB-2026 mandada pelo usuario (navy/teal/dourado/
   coral). Fundo escuro como o tema padrao (mesma estrutura de overlays translucidos em
   cima de uma base solida), so a base e os acentos trocam de tom - dá pra ciclar entre os
   3 pelo mesmo botao (claro -> escuro -> colorido -> claro...). */
:root[data-theme="vivid"] {
  /* Pedido explicito do usuario: cores SOLIDAS, sem degrade - cinza/cinza escuro de base,
     azul 006ECF/amarelo/vermelho/roxo de acento. Por isso os 3 stops do gradiente do body
     (body-gradient-start/bg-main/bg-outer) usam o MESMO tom solido: a formula do gradiente
     continua rodando (e compartilhada com os outros 2 temas), mas como os 3 pontos sao
     identicos, o resultado visual e uma cor chapada, sem transicao nenhuma. Cards/bordas
     tambem trocam de rgba() translucido pra hex solido, pelo mesmo motivo.
     --green mantido do resto da paleta original (P266424/SB-2026) so pro badge de
     "aprovada/positivo" nao ficar sem cor de sucesso - se preferir tirar tambem, e so pedir. */
  --bg-main: #24262B;
  --bg-secondary: #202226;
  --bg-outer: #24262B;
  --body-gradient-start: #24262B;
  --yellow: #FFD000;
  --accent-text: #FFD000;
  --on-accent: #1B1D21;
  --accent-blue: #006ECF;
  --focus-color: var(--yellow);
  --focus-shadow: rgba(255, 208, 0, 0.2);
  --orange: #9151B8;
  --green: #1DBD8E;
  --text: #F2F4F7;
  --text-muted: #9AA0AC;
  --border: #3A3D44;
  --border-soft: #313339;
  --card-bg: #2B2E33;
  --card-bg-hover: #33363C;
  --input-bg: #2B2E33;
  --wash-weak: #26282D;
  --wash-mid: #2C2E34;
  --wash-strong: #34373D;
  --danger: #F24F4F;

  --sidebar-bg: #1B1D21;
  --sidebar-text: #F2F4F7;
  --sidebar-text-muted: #9AA0AC;
  --sidebar-border: #313339;
  --sidebar-wash: #24262B;

  /* Verde escuro sólido (pedido do usuário: cores sólidas, sem degradê, nesse tema). */
  --wa-out-bg: #1f4d40;
  --wa-out-text: #eafff3;
  --wa-accent: #00a884;
  --wa-header-bg: #24262B;
  --wa-panel-bg: #1a1c20;
  --wa-chat-bg: #14161a;
  --wa-input-bg: #24262B;
  --wa-icon: #9AA0AC;

  color-scheme: dark;
}

/* Tema "Apple" - pedido explicito do usuario: paleta de fundo baseada no papel de
   parede navy do macOS (tons #0D1428/#182842/#3E5372) + as cores de sistema do iOS/
   macOS (azul/verde/laranja/vermelho/roxo/teal) como acento, no lugar do dourado
   ClimaDek. O azul de sistema (--accent-text/--yellow) passa a ser a cor principal de
   botao/estado ativo; --on-accent vira branco (texto escuro nao teria contraste
   suficiente em cima de azul). A paleta dos GRAFICOS tambem muda pra esse tema -
   ver chartPalette() em layout.js. */
:root[data-theme="apple"] {
  /* Pedido explicito do usuario: SEM degrade, cor solida - por isso os 3 stops do
     gradiente do body (body-gradient-start/bg-main/bg-outer) usam o MESMO tom (mesmo
     truque ja usado no tema "vivid" acima: a formula do gradiente continua rodando, so
     que como os 3 pontos sao identicos, o resultado visual e uma cor chapada). */
  --bg-main: #0D1428;
  --bg-secondary: #0D1428;
  --bg-outer: #0D1428;
  --body-gradient-start: #0D1428;
  --yellow: #0A84FF;
  --accent-text: #0A84FF;
  --on-accent: #FFFFFF;
  --accent-blue: #64D2FF;
  --focus-color: #0A84FF;
  --focus-shadow: rgba(10, 132, 255, 0.25);
  --orange: #FF9F0A;
  --green: #30D158;
  --text: #F5F6F8;
  --text-muted: rgba(245, 246, 248, 0.62);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.07);
  --card-bg: rgba(255, 255, 255, 0.055);
  --card-bg-hover: rgba(255, 255, 255, 0.09);
  --input-bg: rgba(255, 255, 255, 0.06);
  --wash-weak: rgba(255, 255, 255, 0.03);
  --wash-mid: rgba(255, 255, 255, 0.06);
  --wash-strong: rgba(255, 255, 255, 0.1);
  --danger: #FF453A;

  --sidebar-bg: #0D1428;
  --sidebar-text: #F5F6F8;
  --sidebar-text-muted: rgba(245, 246, 248, 0.55);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-wash: rgba(255, 255, 255, 0.06);

  /* Tema Apple usa o azul de sistema no lugar do verde do WhatsApp - a bolha "enviada" do
     chat fica no estilo iMessage, combinando com o resto da paleta desse tema. */
  --wa-out-bg: #0A84FF;
  --wa-out-text: #FFFFFF;
  --wa-accent: #0A84FF;
  --wa-header-bg: #182842;
  --wa-panel-bg: #0D1428;
  --wa-chat-bg: #0A1020;
  --wa-input-bg: rgba(255, 255, 255, 0.08);
  --wa-icon: rgba(245, 246, 248, 0.7);

  color-scheme: dark;
}

/* Tema "Violeta" - pedido do usuário, mostrando print de outro app (casi.app.br): fundo
   roxo bem escuro quase preto, roxo vibrante como acento principal (progress bar, botões,
   foco) e dourado/âmbar como acento secundário (mesmo papel de destaque que o "INDIVIDUAL"
   daquele app usava). Mesma estrutura do tema Apple acima (cor sólida, sem degradê) - só
   troca a paleta. */
:root[data-theme="violet"] {
  --bg-main: #150E26;
  --bg-secondary: #150E26;
  --bg-outer: #150E26;
  --body-gradient-start: #150E26;
  --yellow: #9B6EF3;
  --accent-text: #9B6EF3;
  --on-accent: #FFFFFF;
  --accent-blue: #B794F6;
  --focus-color: #9B6EF3;
  --focus-shadow: rgba(155, 110, 243, 0.25);
  --orange: #F0B429;
  --green: #34D399;
  --text: #F3EEFB;
  --text-muted: rgba(243, 238, 251, 0.62);
  --border: rgba(155, 110, 243, 0.22);
  --border-soft: rgba(155, 110, 243, 0.12);
  --card-bg: rgba(155, 110, 243, 0.07);
  --card-bg-hover: rgba(155, 110, 243, 0.11);
  --input-bg: rgba(155, 110, 243, 0.08);
  --wash-weak: rgba(155, 110, 243, 0.04);
  --wash-mid: rgba(155, 110, 243, 0.08);
  --wash-strong: rgba(155, 110, 243, 0.13);
  --danger: #FF5C6C;

  --sidebar-bg: #120A20;
  --sidebar-text: #F3EEFB;
  --sidebar-text-muted: rgba(243, 238, 251, 0.55);
  --sidebar-border: rgba(155, 110, 243, 0.16);
  --sidebar-wash: rgba(155, 110, 243, 0.09);

  /* Bolha "enviada" do WhatsApp acompanha o roxo do tema, mesmo critério já usado no tema
     Apple (troca o verde padrão pra combinar com o resto da paleta). */
  --wa-out-bg: #9B6EF3;
  --wa-out-text: #FFFFFF;
  --wa-accent: #9B6EF3;
  --wa-header-bg: #1E1338;
  --wa-panel-bg: #150E26;
  --wa-chat-bg: #100A1E;
  --wa-input-bg: rgba(155, 110, 243, 0.1);
  --wa-icon: rgba(243, 238, 251, 0.7);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Utilitario usado em varios lugares (notificacoes, calendario, modais...) pra
   esconder/mostrar via classList.add/remove("hide") - faltava essa definicao, entao
   "esconder" nao escondia nada de verdade (ex: painel de notificacoes nao fechava). */
.hide { display: none !important; }

body {
  font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: radial-gradient(circle at 15% 0%, var(--body-gradient-start) 0%, var(--bg-main) 45%, var(--bg-outer) 100%);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.2s, color 0.2s;
}

h1, h2, h3, .brand-font { font-family: "Sora", "Manrope", sans-serif; }

a { color: inherit; text-decoration: none; }

.app-shell {
  display: flex;
  min-height: 100vh;
}
/* Só existe/aparece no celular (ver @media abaixo) - no desktop fica sempre invisível e
   fora do fluxo, pra não contar como filho do flex .app-shell. */
.sidebar-backdrop { display: none; }

/* Sidebar "flutuante" - destacada da borda da tela como um cartao (margem + cantos
   arredondados + sombra), no espirito dock/paineis do macOS/iOS.
   .sidebar-inner e so o cartao visual (fundo/borda/sombra) - NAO fica mais posicionado
   flutuando por cima do conteudo: quem muda de largura de verdade e a propria .sidebar
   (que ocupa espaco real no layout flex), entao quando ela expande ao passar o mouse, o
   conteudo principal (.main) desliza/empurra junto, sem sobrepor nada por cima. Foi
   testado o formato "flutua por cima sem empurrar" antes, mas o usuario reportou que
   ficava confuso (o painel expandido cobria o conteudo da pagina) - esse formato aqui e
   mais simples E resolve isso, ao custo de um leve reflow do conteudo ao lado durante a
   transicao (aceitavel, e o pedido explicito). */
.app-shell { gap: 20px; align-items: flex-start; padding: 0 0 0 20px; }
.sidebar {
  width: var(--sidebar-w);
  height: calc(100vh - 28px);
  position: sticky;
  top: 14px;
  margin: 14px 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-inner {
  width: 100%;
  height: 100%;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 22px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.12);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  overflow: hidden;
}
/* Logo/botao de minimizar unificados num so elemento - pedido explicito do usuario depois
   de reportar que o botao redondo ficava desalinhado/dificil de acertar o clique. Agora e
   um cartao unico, largura cheia, com a logo a esquerda e uma seta a direita; clicar em
   qualquer parte dele minimiza/expande a barra (em touch ele so mostra a logo, sem
   comportamento de botao - ver media query hover:hover mais abaixo). */
.sidebar-logo-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-wash);
  flex-shrink: 0;
  font: inherit;
  cursor: default;
  transition: background 0.15s, border-color 0.15s;
}
.sidebar-logo-toggle .sidebar-logo-img { width: 100%; max-width: 150px; display: block; border-radius: 8px; }
.sidebar-logo-toggle .sidebar-logo-chevron {
  display: none;
  font-size: 20px;
  color: var(--sidebar-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* Minimizar/dock-hover/zoom nos icones: TUDO isso so existe em dispositivo com mouse de
   verdade (hover:hover e pointer:fine). Bug real reportado em producao - num tablet/
   celular com tela larga o toque "gruda" o :hover (o navegador nao tem um "mouse saiu
   daqui" de verdade em touch), a .sidebar-inner ficava expandida por cima do conteudo
   pra sempre, e ainda dava estrago visual junto com o zoom que o usuario dava pra
   tentar ler a tela quebrada. Em qualquer touch/tablet a barra fica sempre no jeito
   normal (cheia, sem colapsar, sem zoom de icone) - so quem tem mouse de verdade ve
   esses efeitos. */
@media (hover: hover) and (pointer: fine) {
  /* Logo/botao de minimizar: em desktop (mouse de verdade) o cartao inteiro vira
     clicavel, com cursor de ponteiro, hover e a seta aparecendo do lado direito. Quando
     a barra esta minimizada e sem hover, encolhe pra um icone quadrado (so a seta,
     centralizada) - passar o mouse por cima expande a PROPRIA .sidebar de volta pro
     tamanho cheio (ela ocupa espaco real no layout, entao o conteudo principal desliza/
     empurra junto, sem sobrepor nada). */
  .sidebar-logo-toggle { cursor: pointer; }
  .sidebar-logo-toggle:hover { background: var(--sidebar-bg); border-color: var(--accent-text); }
  .sidebar-logo-toggle .sidebar-logo-chevron { display: inline-block; }
  :root[data-sidebar="collapsed"] .sidebar-logo-toggle .sidebar-logo-chevron { transform: rotate(180deg); }

  /* Barra minimizada: so os icones ficam (a "onda" de zoom ao passar o mouse e o
     initDockMagnify() do layout.js) - .nav-label/relogio somem, cada link vira um
     quadradinho centralizado (o title="" do <a> continua dando o nome no hover nativo).
     O cartao da logo encolhe pra um quadrado 44px com so a seta dentro. */
  :root[data-sidebar="collapsed"] .sidebar { width: 72px; }
  :root[data-sidebar="collapsed"] .sidebar:hover { width: var(--sidebar-w); }
  :root[data-sidebar="collapsed"] .sidebar #sidebar-clock,
  :root[data-sidebar="collapsed"] .nav-label { display: none; }
  :root[data-sidebar="collapsed"] .sidebar:hover #sidebar-clock,
  :root[data-sidebar="collapsed"] .sidebar:hover .nav-label { display: revert; }
  :root[data-sidebar="collapsed"] .sidebar-logo-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 auto 14px;
    justify-content: center;
  }
  :root[data-sidebar="collapsed"] .sidebar-logo-toggle .sidebar-logo-img { display: none; }
  :root[data-sidebar="collapsed"] .sidebar:hover .sidebar-logo-toggle {
    width: calc(100% - 28px);
    height: auto;
    padding: 12px 16px;
    margin: 0 14px 14px;
    justify-content: space-between;
  }
  :root[data-sidebar="collapsed"] .sidebar:hover .sidebar-logo-toggle .sidebar-logo-img { display: block; }
  :root[data-sidebar="collapsed"] .sidebar:hover .sidebar-logo-toggle .sidebar-logo-chevron { transform: rotate(180deg); }
  :root[data-sidebar="collapsed"] .collapsed-only { display: inline !important; }
  :root[data-sidebar="collapsed"] .sidebar:hover .collapsed-only { display: none !important; }
  :root[data-sidebar="collapsed"] .sidebar nav a { justify-content: center; padding: 10px; }
  :root[data-sidebar="collapsed"] .sidebar:hover nav a { justify-content: flex-start; padding: 10px 14px; }
  :root[data-sidebar="collapsed"] .theme-toggle { justify-content: center; width: 40px; margin-left: auto; margin-right: auto; padding: 8px; }
  :root[data-sidebar="collapsed"] .sidebar:hover .theme-toggle { justify-content: flex-start; width: calc(100% - 40px); padding: 8px 12px; }
  :root[data-sidebar="collapsed"] .sidebar-inner > div[style*="margin-top:auto"] { display: flex; flex-direction: column; align-items: center; padding: 12px 0 !important; }
  :root[data-sidebar="collapsed"] .sidebar:hover .sidebar-inner > div[style*="margin-top:auto"] { display: block; padding: 12px 20px !important; }
  :root[data-sidebar="collapsed"] #logout-link { font-size: 16px; }
  :root[data-sidebar="collapsed"] .sidebar:hover #logout-link { font-size: 13px; }

  /* Zoom fluido nos icones ao passar o mouse (initDockMagnify() em layout.js calcula a
     escala de cada icone conforme a distancia do cursor, tipo a "onda" de ampliacao do
     Dock do macOS) - cubic-bezier com overshoot da aquela mola/bounce sutil, sem ficar
     robotico. transform-origin no centro pra crescer de forma simetrica. */
  .nav-icon {
    display: inline-block;
    transform-origin: center;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
/* Sem mouse (touch): sem botao de minimizar, sem estado colapsado - a barra fica sempre
   normal/cheia, e o icone nao tem transform nenhum aplicado por CSS (o JS tambem nao
   liga o listener de zoom nesse caso, ver initDockMagnify() em layout.js). */
@media not all and (hover: hover) and (pointer: fine) {
  .sidebar-logo-toggle { cursor: default; }
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding: 0 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
/* Cabeçalho de categoria (pedido do usuário: "menu mais prático, separar por categoria") -
   discreto, maiúsculas pequenas, mesma lógica de esconder que .nav-label na barra
   minimizada (some quando colapsado, volta no hover) - ver initDockMagnify()/[data-sidebar]
   em layout.js/mais acima nesse arquivo. */
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
  opacity: 0.65;
  padding: 6px 14px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 0.15s, background 0.15s;
}
.nav-group-label:hover { opacity: 1; background: var(--sidebar-hover, rgba(255,255,255,0.06)); }
.nav-group-chevron { font-size: 9px; transition: transform 0.15s; opacity: 0.8; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.nav-group.collapsed .nav-group-items { display: none; }
:root[data-sidebar="collapsed"] .nav-group-label { display: none; }
:root[data-sidebar="collapsed"] .sidebar:hover .nav-group-label { display: flex; }
/* Minimizada: sempre mostra os itens (o hover já reduz o menu a ícones, recolher categoria
   também deixaria a barra minimizada praticamente vazia). */
:root[data-sidebar="collapsed"] .nav-group.collapsed .nav-group-items { display: flex; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: "Sora", sans-serif;
  color: var(--sidebar-text-muted);
  border-radius: 12px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.sidebar nav a .nav-icon { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
.sidebar nav a .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collapsed-only { display: none; }
.sidebar nav a:hover { background: var(--sidebar-wash); color: var(--sidebar-text); transform: translateX(2px); }
.sidebar nav a.active {
  background: var(--accent-text);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent-text) 60%, transparent);
}

/* Botao de tema (canto da sidebar) */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 20px 4px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-wash);
  color: var(--sidebar-text-muted);
  font-family: "Sora", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  width: calc(100% - 40px);
  transition: filter 0.15s;
}
.theme-toggle:hover { filter: brightness(1.15); color: var(--sidebar-text); border-color: var(--accent-blue); }
.theme-toggle .icon { font-size: 14px; line-height: 1; }

/* Main */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  background: var(--wash-weak);
  border-bottom: 1px solid var(--border);
  padding: 18px 76px 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}
.topbar h1 { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input[type="date"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  background-color: var(--input-bg);
  color: var(--text);
}
.filters select { padding-right: 28px; }
/* padding-bottom maior que o resto de propósito - reserva espaço pro balãozinho flutuante
   do assistente (#assistant-widget, 56px + 22px do canto) não ficar em cima do fim de
   conteúdo real (ex: último botão de uma lista, fim de formulário). Mobile pede ainda mais
   folga (ver @media abaixo) por causa do botão maior relativo à tela. */
.content { padding: 26px 28px 90px; overflow-x: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 13px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: "Sora", sans-serif;
  cursor: pointer;
  background: var(--wash-strong);
  color: var(--text);
  border: 1px solid var(--border);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--yellow);
  color: var(--on-accent);
  font-weight: 800;
  border: none;
  box-shadow: 0 0 0 rgba(255,204,0,0.4);
}
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(255,204,0,0.35); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn.ghost.active { border-color: var(--accent-text); color: var(--accent-text); background: var(--wash-mid); }
.btn.danger { background: var(--danger); color: #fff; border: none; }
.btn.small { padding: 6px 12px; font-size: 12px; }

/* Cards / stats */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(6px);
  min-width: 0;
}
.stat-card .label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card .value {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(17px, 1.6vw + 10px, 28px);
  line-height: 1.15;
  word-break: break-word;
}
.stat-card .value.yellow { color: var(--accent-text); }

.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}
.panel h2 { font-size: 15px; margin: 0 0 14px; font-weight: 700; }

/* Fileira de gráficos que rola de lado em vez de cortar o último fora da tela (pedido do
   usuário - ver wireDragScroll em layout.js). Cada painel tem uma largura mínima confortável
   pra ler o gráfico; quando não cabem todos, aparece a barra de rolagem em vez de espremer/
   cortar. */
.charts-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
  cursor: grab;
  scrollbar-width: thin;
}
.charts-scroll.dragging { cursor: grabbing; user-select: none; }
.charts-scroll > .panel,
.charts-scroll > div {
  flex: 1 1 280px;
  min-width: 260px;
  margin-bottom: 0;
}

/* Cards do cadastro de usuário (Configurações > Usuários) - substitui a tabela crua antiga.
   Emoji como "avatar" (pedido do usuário: brincadeira em vez de exigir foto de verdade). */
.user-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.1s;
}
.user-card:hover { border-color: var(--accent-text); transform: translateY(-2px); }
.user-card.inactive { opacity: 0.55; }
.user-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wash-mid);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 10px;
}
.user-card-name { font-weight: 700; font-size: 14.5px; font-family: "Sora", sans-serif; }
.user-card-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.user-card-title { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.user-card-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.user-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.emoji-pick-btn {
  font-size: 20px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.emoji-pick-btn:hover { border-color: var(--accent-text); transform: scale(1.1); }

/* Mural - pegada de rede social (pedido do usuário: "esteticamente bonito... como fosse um
   post no instagram... pegada mais tecnologica conectada"). Cards grandes, avatar+nome do
   autor em destaque, imagem grande, ações tipo curtir/comentar bem visíveis. */
.mural-composer {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px;
  padding: 14px; border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--wash-mid), var(--wash-weak));
  box-shadow: 0 0 0 1px rgba(255,204,0,0.06), 0 10px 30px rgba(0,0,0,0.18);
}
#mural-publish {
  background: linear-gradient(90deg,#ffcc00,#ff9d00); color: #1a1400; border: none;
  font-weight: 800; box-shadow: 0 4px 14px rgba(255,157,0,0.35); transition: transform 0.12s, box-shadow 0.12s;
}
#mural-publish:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,157,0,0.45); }
.mural-composer-body { flex: 1; min-width: 0; }
.mural-composer textarea {
  width: 100%; resize: vertical; border-radius: 14px; padding: 10px 14px;
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 13.5px;
}
.mural-composer-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; }
.mural-attach-btn {
  border: 1px dashed var(--border); background: transparent; color: var(--text-muted);
  border-radius: 10px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.mural-attach-btn:hover { border-color: var(--accent-text); color: var(--text); }
.mural-image-preview-wrap { position: relative; display: inline-block; margin-top: 10px; }
.mural-image-preview { max-width: 100%; max-height: 260px; border-radius: 14px; display: block; }
.mural-image-remove {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff; border: none; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

.mural-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  margin-bottom: 18px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.mural-card::before {
  /* Faixa colorida no topo, cor por tipo de post (--mural-accent, definido inline por
     card) - pedido do usuário: "seja ousado", dá o "escaneio visual rápido" de feed social
     de verdade em vez de um mural monocromático. */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--mural-accent, linear-gradient(90deg,#666,#999));
}
.mural-card:hover { border-color: rgba(255,204,0,0.4); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.3); }
.mural-card-header { display: flex; align-items: center; gap: 12px; padding: 20px 18px 10px; }
.mural-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: linear-gradient(135deg, rgba(255,204,0,0.18), rgba(12,136,250,0.18));
  border: 1px solid var(--border-soft);
}
.mural-avatar-ring {
  box-shadow: 0 0 0 3px var(--bg-secondary), 0 0 0 5px var(--mural-accent, var(--accent-text));
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 70%), var(--wash-mid);
}
.mural-card-headtext { flex: 1; min-width: 0; }
.mural-poster-name { font-family: "Sora", sans-serif; font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.mural-card-time { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.mural-card-message { padding: 4px 18px 12px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.mural-card-image-wrap { width: 100%; max-height: 520px; overflow: hidden; background: var(--wash-mid); cursor: zoom-in; }
.mural-card-image { width: 100%; max-height: 520px; object-fit: cover; display: block; transition: transform 0.3s; }
.mural-card-image-wrap:hover .mural-card-image { transform: scale(1.03); }
.mural-card-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 18px; }
.mural-like-btn, .mural-comment-toggle {
  border: 1px solid var(--border); background: var(--wash-weak); color: var(--text-muted);
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.mural-like-btn:hover, .mural-comment-toggle:hover { color: var(--text); border-color: var(--accent-text); }
.mural-like-btn:active { transform: scale(0.9); }
.mural-like-btn.liked { color: #ff4d6d; border-color: rgba(255,77,109,0.45); background: rgba(255,77,109,0.14); animation: mural-like-pop 0.35s ease; }
@keyframes mural-like-pop { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
.mural-liked-by {
  border: none; background: transparent; color: var(--text-muted); font-size: 12px;
  cursor: pointer; padding: 0; text-decoration: underline dotted; text-underline-offset: 2px;
}
.mural-liked-by:hover { color: var(--text); }
.mural-liked-by strong { color: var(--text); font-weight: 700; }
.mural-del-header { margin-left: auto; }
.mural-comments { padding: 0 18px 16px; }
.mural-comment-input {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text); font-size: 12.5px;
}
.mural-emoji-btn {
  border: 1px solid var(--border); background: var(--wash-weak); border-radius: 50%;
  width: 34px; height: 34px; flex-shrink: 0; font-size: 15px; cursor: pointer;
}
.mural-emoji-btn:hover { border-color: var(--accent-text); }
.mural-emoji-popover {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 4px; width: 220px; padding: 10px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--bg-secondary);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.mural-emoji-pick {
  border: none; background: transparent; font-size: 18px; width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer;
}
.mural-emoji-pick:hover { background: var(--wash-mid); }
.mural-lightbox {
  position: fixed; inset: 0; background: rgba(2,9,26,0.92); z-index: 999;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 30px;
}
.mural-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.mural-likers-modal {
  cursor: default; width: 320px; max-height: 70vh; overflow-y: auto; padding: 20px;
  border-radius: 18px; border: 1px solid var(--border); background: var(--bg-secondary);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.mural-likers-modal h3 { margin: 0 0 14px; font-family: "Sora", sans-serif; }
.mural-liker-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 13.5px; font-weight: 600; }
.mural-liker-row:first-child { border-top: none; }

/* Grupos/bolhas expansiveis (Configurações) - cada grupo e uma "bolha" que abre/fecha
   clicando no cabecalho, com subgrupos por dentro pra organizar itens relacionados sem
   precisar de outra pagina. Sugestoes de grupo/item futuro usam estilo tracejado, pra
   ficar visualmente claro que ainda nao existe de verdade. */
.settings-group {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.settings-group.open { border-color: var(--accent-text); }

/* Passo a passo do financiamento bancário (pedido do usuário) - marcador redondo + linha
   conectando ao próximo passo, verde quando concluído, meio apagado quando é um passo
   automático (segue a etapa do Funil Fechados, não é editável aqui). */
.fin-steps { display: flex; flex-direction: column; }
.fin-step { display: flex; gap: 14px; }
.fin-step-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.fin-step-marker { width: 32px; height: 32px; border-radius: 50%; background: var(--wash-mid); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.fin-step.done .fin-step-marker { background: rgba(52,211,153,0.15); border-color: var(--green,#34d399); }
.fin-step.auto .fin-step-marker { opacity: 0.55; }
.fin-step-connector { width: 2px; flex: 1; min-height: 18px; background: var(--border); margin: 2px 0; }
.fin-step.done .fin-step-connector { background: var(--green,#34d399); opacity: 0.4; }
.fin-step-body { flex: 1; padding-bottom: 18px; min-width: 0; }
.fin-step-label { font-weight: 700; font-size: 13.5px; }
.fin-step.auto .fin-step-label { opacity: 0.7; }
.settings-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Sora", sans-serif;
  color: var(--text);
  transition: background 0.15s;
}
.settings-group-header:hover { background: var(--wash-mid); }
.settings-group-icon { font-size: 20px; flex-shrink: 0; }
.settings-group-title { font-size: 15.5px; font-weight: 700; flex: 1; }
.settings-group-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.settings-group-chevron { font-size: 13px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.settings-group.open .settings-group-chevron { transform: rotate(180deg); }
.settings-group-body { padding: 0 22px 20px; }
.settings-group-body.hide { display: none; }
.settings-subgroup { margin-bottom: 18px; }
.settings-subgroup:last-child { margin-bottom: 0; }
.settings-subgroup-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
  margin: 0 0 10px;
}
.settings-subgroup .panel { margin-bottom: 12px; }
.settings-subgroup .panel:last-child { margin-bottom: 0; }
.settings-suggestion {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 4px;
}
.settings-suggestion strong { color: var(--orange, #f5a623); }

/* Kanban */
/* .kanban agora é só um bloco simples que empilha a esteira (kanban-track) em cima das
   colunas (kanban-cols) - o flex das colunas (com o scroll horizontal que #content já
   provia) ficou isolado em .kanban-cols de propósito, pra não mexer nesse comportamento. */
.kanban-cols {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
/* "Esteira" acima das colunas (pedido do usuário) - trilha de setas conectadas mostrando o
   fluxo das etapas de uma vez só, antes de entrar nas colunas com os cards. */
.kanban-track {
  display: flex;
  overflow-x: auto;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.kanban-step {
  position: relative;
  flex-shrink: 0;
  padding: 9px 20px 9px 30px;
  background: var(--wash-strong);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  margin-right: -14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kanban-step:first-child {
  padding-left: 18px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.kanban-step:last-child { padding-right: 16px; }
.kanban-step .step-count {
  background: var(--bg-outer);
  color: var(--text);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
}
.kanban-col {
  background: var(--wash-weak);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 270px;
  max-width: 270px;
  flex-shrink: 0;
  padding: 12px;
  min-height: 200px;
}
.kanban-col.dragover { background: var(--focus-shadow); outline: 2px dashed var(--focus-color); }
.kanban-col h3 {
  font-size: 13px;
  margin: 4px 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--text);
  font-weight: 700;
  gap: 8px;
}
.kanban-col h3 .stage-title { flex: 1; }
.kanban-col h3 .stage-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.kanban-col h3 .count {
  background: var(--wash-strong);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}
.kanban-col h3 .col-value {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  cursor: grab;
  border-left: 3px solid var(--accent-text);
  touch-action: none;
  user-select: none;
}
.card:hover { background: var(--card-bg-hover); }
.card:active { cursor: grabbing; }
.card.dragging { box-shadow: 0 10px 28px rgba(0,0,0,0.35); opacity: 0.9; cursor: grabbing; }
.card.stale-warn { border-left-color: var(--orange); }
.card.stale-danger { border-left-color: var(--danger); }
.card .name { font-weight: 700; font-size: 13px; margin-bottom: 4px; font-family: "Sora", sans-serif; user-select: text; }
.card .name.lead-name { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.card .name.lead-name:hover { color: var(--accent-text); }
/* touch-action:none no .card (acima) tira o gesto de toque padrão do card inteiro pro drag
   por ponteiro (kanban.js) funcionar - mas isso também deixa o toque em botão/link/select/
   checkbox DENTRO do card menos confiável em celular (o navegador não sabe distinguir
   "início de um drag" de "só quero tocar o botão"), mesmo com o pointerdown já ignorando
   esses elementos no JS. touch-action é herdável por gesto, mas cada filho pode pedir seu
   próprio comportamento de volta - "manipulation" restaura o toque normal (tap rápido, sem
   o delay de 300ms) só nesses elementos interativos, sem afetar o drag do resto do card. */
.card button, .card a, .card select, .card input[type="checkbox"] { touch-action: manipulation; }
.card-edit-icon {
  background: transparent; border: none; cursor: pointer; font-size: 11px; opacity: 0.5;
  margin-left: 4px; padding: 0 2px; text-decoration: none;
}
.card-edit-icon:hover { opacity: 1; }
.card-note-icon {
  background: transparent; border: none; cursor: pointer; font-size: 11px; opacity: 0.35;
  margin-left: 4px; padding: 0 2px; text-decoration: none; filter: grayscale(1);
}
.card-note-icon:hover { opacity: 1; filter: grayscale(0); }
.card-note-icon.has-note { opacity: 1; filter: grayscale(0); }
.card .meta { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.wa-link {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
  background: #25D366; color: #fff; font-weight: 700; font-size: 11px;
  padding: 2px 8px; border-radius: 20px; text-decoration: none; vertical-align: middle;
}
.wa-link:hover { filter: brightness(1.08); }
.card .stale-badge { font-size: 11px; font-weight: 700; margin-top: 6px; padding: 3px 8px; border-radius: 20px; display: inline-block; }
.card .stale-badge.stale-warn { background: rgba(245,166,35,0.15); color: var(--orange); }
.card .stale-badge.stale-danger { background: rgba(224,71,62,0.15); color: var(--danger); }
.card .badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  background: var(--yellow);
  color: var(--on-accent);
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 6px;
}
.card select { width: 100%; font-size: 11px; margin-top: 6px; padding: 5px; padding-right: 22px; border-radius: 8px; border: 1px solid var(--border); background-color: var(--input-bg); color: var(--text); background-position: right 6px center; }
.card .actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.card .actions > * { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; }

/* Table */
table { border-collapse: collapse; width: 100%; background: transparent; }
th, td { border-bottom: 1px solid var(--border); padding: 11px 13px; text-align: left; font-size: 13px; }
th { color: var(--accent-text); font-weight: 700; font-family: "Sora", sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: var(--wash-weak); }
tr.row-flagged td { background: rgba(245,166,35,0.08); }
tr.row-flagged:hover td { background: rgba(245,166,35,0.14); }
.btn-flag {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 8px; cursor: pointer; opacity: 0.4; filter: grayscale(1); font-size: 14px;
}
.btn-flag.active { opacity: 1; filter: none; border-color: var(--orange); background: rgba(245,166,35,0.15); }

/* Botao de acao so-icone (emoji), compacto e redondo - usado em linhas de tabela com
   varias acoes lado a lado (ex: historico de Propostas Comerciais) pra nao precisar de
   um botao com texto pra cada acao, deixando a linha mais enxuta e rapida de escanear. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 3px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; font-size: 14px; line-height: 1; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn-icon:hover { background: var(--card-bg-hover); border-color: var(--accent-text); }

@keyframes row-flash-anim {
  0%, 100% { background: transparent; }
  30% { background: rgba(255,204,0,0.22); }
}
tr.row-flash td { animation: row-flash-anim 1.5s ease; }

/* Diagrama de Gantt (Lista de Instalação) */
.gantt { overflow-x: auto; padding-bottom: 6px; }

/* Calendario facilitado de fechamentos (Funil Fechados) - grade simples do mes, so
   visualizacao (sem drag/click-through, ver renderClosingCalendar em posvenda.js). */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  min-height: 64px; border-radius: 8px; padding: 6px 8px; background: var(--wash-weak);
  border: 1px solid var(--border); font-size: 11px;
}
.cal-cell.cal-weekday {
  min-height: auto; background: transparent; border: none; text-align: center;
  color: var(--text-muted); font-weight: 700; padding: 0 0 2px;
}
.cal-cell.cal-empty { background: transparent; border: none; }
.cal-cell.cal-today { border-color: var(--yellow); }
.cal-cell.cal-has-deals { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.35); }
.cal-cell.cal-has-deals:hover { background: rgba(52,211,153,0.18); }
.cal-cell.cal-selected { outline: 2px solid var(--yellow); outline-offset: -2px; }
.cal-daynum { font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.cal-count { font-weight: 700; color: var(--green,#34d399); }
.cal-value { color: var(--text-muted); }
.gantt-header, .gantt-lane { display: flex; width: max-content; }
.gantt-header { border-bottom: 1px solid var(--border); }
.gantt-row-label {
  width: 130px; flex-shrink: 0; padding: 8px 10px; font-size: 12px; font-weight: 700;
  font-family: "Sora", sans-serif; color: var(--text); display: flex; align-items: center;
  border-right: 1px solid var(--border); position: sticky; left: 0; background: var(--bg-secondary); z-index: 1;
}
.gantt-days { display: flex; }
.gantt-day {
  width: 46px; flex-shrink: 0; text-align: center; font-size: 10px; line-height: 1.4;
  color: var(--text-muted); padding: 6px 0; border-right: 1px solid var(--border-soft);
}
.gantt-day.weekend { background: var(--wash-weak); }
.gantt-day.today { color: var(--accent-text); font-weight: 700; }
.gantt-lane { border-top: 1px solid var(--border-soft); min-height: 44px; }
.gantt-lane-body { position: relative; }
.gantt-bar {
  position: absolute; top: 7px; height: 30px; border-radius: 8px; font-size: 11px; font-weight: 700;
  color: #04101f; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); background: var(--yellow);
}
.gantt-bar:hover { filter: brightness(1.1); }
.gantt-bar.gantt-scheduled { background: var(--yellow); }
.gantt-bar.gantt-done { background: var(--green); }

.table-scroll { overflow-x: auto; }

.job-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 14px 0; }
.job-photo-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.job-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-photo-del {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}
.job-photo-del:hover { background: var(--danger); }
.job-photo-btn { position: relative; }
.job-photo-badge {
  background: var(--yellow); color: var(--bg-outer); border-radius: 10px; font-size: 10.5px; font-weight: 800;
  padding: 1px 6px; margin-left: 4px;
}

/* Calendario (Tarefas / Lembretes) */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-hd { font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: center; padding: 4px 0 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-day {
  position: relative;
  min-height: 76px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px;
  cursor: pointer; background: var(--wash-weak);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cal-day:hover { background: var(--wash-mid); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.cal-day.other { opacity: 0.4; }
.cal-day.today {
  border-color: var(--accent-text);
  background: linear-gradient(135deg, rgba(255,208,0,0.14), rgba(255,208,0,0.03));
  animation: cal-today-pulse 2.4s ease-in-out infinite;
}
.cal-day.today .cal-daynum { color: var(--accent-text); font-weight: 800; }
.cal-day.selected { border-color: var(--focus-color); box-shadow: 0 0 0 2px var(--focus-shadow); }
/* Feriado (pedido do usuário: "marque os feriados com emojis proprios") - selo âmbar
   discreto no fundo do dia inteiro, sem brigar visualmente com os pontinhos/avatares de
   compromissos daquele dia. */
.cal-day.holiday { background: linear-gradient(135deg, rgba(245,166,35,0.14), rgba(245,166,35,0.03)); border-color: rgba(245,166,35,0.4); }
.cal-day.holiday:hover { background: linear-gradient(135deg, rgba(245,166,35,0.22), rgba(245,166,35,0.05)); }
.cal-holiday-emoji { font-size: 12px; }
.cal-holiday-label { font-size: 9.5px; color: var(--orange,#f5a623); font-weight: 700; line-height: 1.2; margin-top: 1px; }
.cal-holiday-banner {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px;
  color: var(--orange,#f5a623); background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.35);
  border-radius: 999px; padding: 5px 12px; margin: -6px 0 12px;
}
.cal-daynum { font-family: "Sora", sans-serif; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* Emoji de quem é responsável (pedido do usuário) - substitui o pontinho colorido quando a
   pessoa tem um emoji cadastrado (Configurações > Usuários), pra identificar "de quem é
   aquele compromisso" só de bater o olho no mês inteiro, sem abrir cada dia. */
.cal-avatar { font-size: 13px; line-height: 1; display: inline-block; transition: transform 0.15s; }
.cal-avatar:hover { transform: scale(1.35); }
.cal-more { font-size: 9.5px; color: var(--text-muted); font-weight: 700; }

/* Previsão do tempo (pedido do usuário: "deixe visualmente bonito, com emoji e simbolos,
   destacados") - iconezinho discreto no canto de cada dia da grade... */
.cal-weather-icon { position: absolute; top: 4px; right: 6px; font-size: 12px; line-height: 1; opacity: 0.85; }
/* ...e um card grande e destacado (gradiente azul-céu, borda, sombra) no painel do dia
   selecionado - é ali que o pedido "puxar a previsão do tempo do dia" fica mais visível. */
.weather-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(69,160,255,0.16), rgba(69,160,255,0.03));
  border: 1px solid rgba(69,160,255,0.35); border-radius: 14px; padding: 14px 16px; margin: -4px 0 14px;
}
.weather-card-main { display: flex; align-items: center; gap: 12px; }
.weather-card-emoji { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(69,160,255,0.35)); }
.weather-card-label { font-size: 13px; font-weight: 700; color: var(--blue,#45a0ff); text-transform: capitalize; }
.weather-card-temps { font-size: 19px; font-weight: 800; font-family: "Sora", sans-serif; margin-top: 2px; font-variant-numeric: tabular-nums; }
.weather-card-tmin { color: var(--text-muted); font-weight: 700; }
.weather-card-now { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.weather-card-rain {
  font-size: 13px; font-weight: 700; color: var(--blue,#45a0ff); background: rgba(69,160,255,0.12);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}

/* "O que aconteceu nesse dia" (pedido do usuário) - box com o registro do dia: venda
   fechada, instalação/OS/garantia concluída. Badge pequeno "📌N" no dia da grade sinaliza
   de longe quais dias tiveram movimento, sem abrir um por um. */
.cal-activity-badge {
  position: absolute; bottom: 4px; right: 6px; font-size: 9.5px; font-weight: 700;
  color: var(--green,#34d399); background: rgba(52,211,153,0.14); border-radius: 999px; padding: 1px 5px;
}
.day-activity-box { margin: 0 0 14px; }
.day-activity-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.day-activity-list { display: flex; flex-direction: column; gap: 8px; }
.day-activity-item { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 10px 12px; }
.day-activity-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.day-activity-text { font-size: 13px; line-height: 1.4; }
@keyframes cal-today-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,208,0,0.25); }
  50% { box-shadow: 0 0 0 5px rgba(255,208,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .cal-day, .cal-avatar { transition: none; }
  .cal-day.today { animation: none; }
}

/* Busca global de cliente (topbar) */
.global-search-wrap { position: relative; min-width: 220px; flex: 0 1 260px; }
.global-search-input {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--input-bg, var(--wash-strong)); color: var(--text-main); font-size: 13px;
}
.global-search-results {
  position: absolute; top: 42px; left: 0; width: 100%; min-width: 280px; max-height: 360px; overflow-y: auto;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 60;
}
.global-search-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.global-search-item:last-child { border-bottom: none; }
.global-search-item:hover { background: var(--wash-weak); }
.global-search-item .sim-muted { font-size: 11.5px; }
.global-search-empty { padding: 14px; font-size: 12.5px; color: var(--text-muted); }

/* Organograma (RH) - tecnica classica de arvore com CSS puro (ul/li + linhas via
   before/after), sem nenhuma lib de diagrama. Compacto de proposito (caixas pequenas, gap
   curto) pra caber mais niveis/irmaos na tela sem precisar rolar tanto - pedido do usuario:
   "nao ta cabendo na tela inteira". Fica dentro de um .table-scroll (ver rh.js) pro que
   ainda nao couber rolar horizontal de forma previsivel, mesmo padrao ja usado nas tabelas
   do resto do sistema. */
.orgchart, .orgchart ul, .orgchart li { list-style: none; margin: 0; padding: 0; position: relative; }
.orgchart { text-align: center; padding: 8px 6px 16px; }
.orgchart > ul { display: inline-flex; padding-top: 0; }
.orgchart ul { padding-top: 18px; position: relative; display: flex; justify-content: center; }
.orgchart li { display: inline-block; vertical-align: top; padding: 18px 7px 0 7px; position: relative; }
.orgchart li::before, .orgchart li::after {
  content: ""; position: absolute; top: 0; right: 50%;
  border-top: 2px solid var(--border); width: 50%; height: 18px;
}
.orgchart li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.orgchart li:only-child::after, .orgchart li:only-child::before { display: none; }
.orgchart li:only-child { padding-top: 0; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border: 0 none; }
.orgchart li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.orgchart li:first-child::after { border-radius: 6px 0 0 0; }
.orgchart ul ul::before {
  content: ""; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--border); width: 0; height: 18px;
}
.org-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 104px; max-width: 150px; padding: 7px 10px; border-radius: 10px;
  background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: inherit; color: var(--text); cursor: pointer; text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.org-box:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); border-color: var(--accent-text); }
.org-box-group { background: var(--wash-strong); border-style: dashed; }
/* Cargo sem ninguem (pedido do usuario, visualmente marcar o que falta preencher) -
   contorno pontilhado e opacidade mais baixa chama a atencao pra "vaga" sem precisar ler
   o texto. Classe aplicada direto no botao (rh.js), nao via :has() - suporte de browser
   mais garantido. */
.org-box-empty { border-style: dashed; opacity: 0.72; }
.org-box-title { font-weight: 700; font-size: 11px; font-family: "Sora", sans-serif; line-height: 1.25; white-space: normal; }
.org-box-person { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.org-box-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--wash-mid); font-size: 10px; flex-shrink: 0;
}
.org-box-vacant { font-style: italic; }

/* Sininho de notificacoes */
.notif-wrap { position: absolute; top: 14px; right: 24px; }
.notif-bell {
  position: relative; background: var(--wash-strong); border: 1px solid var(--border); border-radius: 10px;
  width: 38px; height: 38px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.notif-bell:hover { filter: brightness(1.15); }
.notif-badge {
  position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; font-family: "Sora", sans-serif; min-width: 17px; height: 17px;
  border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--bg-main);
}
.notif-panel {
  position: absolute; top: 46px; right: 0; width: 340px; max-width: 90vw; max-height: 420px; overflow-y: auto;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 60;
}
.notif-panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-secondary);
}
.notif-tabs {
  display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--border);
  position: sticky; top: 45px; background: var(--bg-secondary); z-index: 1;
}
.notif-tab {
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.notif-tab:hover { background: var(--wash-weak); }
.notif-tab.active { background: var(--yellow); color: var(--bg-outer); border-color: var(--yellow); }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: flex-start; }
.notif-item:hover { background: var(--wash-weak); }
.notif-item.unread { background: rgba(12,136,250,0.07); }
.notif-item.unread .notif-msg { font-weight: 700; }
.notif-body { flex: 1; min-width: 0; }
.notif-read-toggle {
  flex-shrink: 0; cursor: pointer; margin-top: 1px;
  border: 1px solid var(--accent-blue); background: transparent; color: var(--accent-blue);
  font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 20px;
  white-space: nowrap;
}
.notif-read-toggle:hover { background: var(--accent-blue); color: #fff; }
.notif-read-toggle.is-read {
  border-color: var(--border); color: var(--text-muted); background: transparent;
}
.notif-read-toggle.is-read:hover { background: var(--wash-weak); color: var(--text-muted); }
.notif-msg { font-size: 13px; line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 700px) {
  .cal-hd:nth-child(n) { font-size: 9px; }
  .cal-day { min-height: 64px; padding: 4px 4px 6px; }
  .cal-weather-icon { position: static; float: right; margin-left: 2px; font-size: 11px; }
  .cal-daynum { font-size: 11px; gap: 2px; }
  .cal-dots { gap: 3px; margin-top: 4px; }
  .cal-dot { width: 6px; height: 6px; }

  /* Cards de estatísticas (stat-grid) muitas telas forçam colunas fixas via inline
     style (repeat(3/4/5,1fr)); isso encolhe demais no celular, quebrando números
     char-a-char e forçando .content a rolar de lado (pedido do usuário: bugs visuais
     no mobile, screenshots de Relatórios/Gestão/Calendário/Dashboard). !important pra
     vencer o inline style. */
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .stat-card { padding: 12px; }
  .stat-card .label { font-size: 10.5px; }
  .stat-card .value { font-size: clamp(13px, 4.2vw, 17px); }
}

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr !important; }
}

/* Mesmo problema do .stat-grid acima, em outros grids de 3 colunas fixas que forcei via
   style inline (Hub do Cliente: Pagamento e Contas de energia) - encolhe demais em celular. */
@media (max-width: 700px) {
  .grid-3-cols { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .company-compare-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 860px) {
  .demand-board { grid-template-columns: 1fr !important; }
}

select, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], textarea {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23F2F6FC'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%230b1220'/></svg>");
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: 0 0 0 3px var(--focus-shadow);
}
::placeholder { color: var(--text-muted); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2,9,26,0.72);
  display: none; align-items: center; justify-content: center; z-index: 700;
  backdrop-filter: blur(6px);
}
/* ACHADO revisando (não era o z-index:50 antigo) - o botão flutuante do assistente
   (#assistant-widget, z-index:500) ficava ACIMA de qualquer modal (que era só 50). Como
   .form-actions é sempre alinhado à direita (mesmo canto onde o balãozinho flutua), o botão
   "Salvar"/"Confirmar" de vários modais ficava fisicamente embaixo do balão - o toque ali
   "vazava" pro assistente em vez de acionar o botão. É provável causa real de "botão não
   toca" nas telas com modal (mais sentido no celular, onde o modal ocupa quase a tela toda
   e o botão de salvar cai bem naquele canto). Sidebar/gaveta mobile (65) e painel de
   notificação (60) também ficavam acima do modal - modal agora sempre no topo. */
.modal-backdrop.open { display: flex; }
/* Pedido do usuário: os modais (box que abrem) estavam com letra pequena e visual apertado -
   "falta um toque de Steve Jobs". Raio maior, mais respiro, sombra suave de profundidade em
   vez de só uma borda fina, título maior e mais forte - um ajuste aqui levanta TODOS os
   modais do sistema de uma vez (é a mesma classe .modal em todo lugar). */
.modal {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 22px; padding: 32px;
  width: 440px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.18);
}
.modal h2 {
  margin: 0 0 20px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  font-family: "Sora", sans-serif;
}
.form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-row label { font-size: 13px; font-weight: 700; color: var(--text-muted); font-family: "Sora", sans-serif; letter-spacing: 0.01em; }
.form-row select, .form-row input, .form-row textarea { width: 100%; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }

/* Busca com autocompletar (ex: seletor de produto em Gerar Proposta) */
.product-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  margin-top: 4px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.product-search-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.product-search-item:last-child { border-bottom: none; }
.product-search-item[data-id]:hover { background: var(--card-bg-hover); }

.badge-stage {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  background: var(--wash-strong); color: var(--text);
}

/* Caixa de "nota de informação" (ℹ️) explicando o que uma ação dispara em outras partes do
   sistema (ex: marcar negócio como vendido cria conta a receber, entra na Lista de
   Instalação etc) - pedido do usuário: destacar isso de forma visível, não só um texto cinza
   discreto. Reaproveitada em vários modais de ação com efeito automático em cascata. */
.info-callout {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5;
  background: rgba(69,160,255,0.10); border: 1px solid rgba(69,160,255,0.35); color: var(--text);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0 14px;
}
.info-callout .info-callout-icon { flex-shrink: 0; font-size: 14px; line-height: 1.5; }

/* Selo da empresa faturadora (Lucro Real/Simples Nacional) no card do funil - cores vem
   inline do banco (companies.color), esse bloco so cuida do formato/espacamento. */
.company-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  margin-top: 4px;
}

/* Mural de Sugestões - cartão simples por nota */
.suggestion-card { background: var(--wash-mid); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.suggestion-card.suggestion-done { opacity: 0.6; }
.suggestion-card.suggestion-done .suggestion-text { text-decoration: line-through; }
.suggestion-text { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.suggestion-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }

/* Assistente de chat (balãozinho) - fixo no canto inferior direito, por cima de tudo */
#assistant-widget { position: fixed; right: 22px; bottom: 22px; z-index: 500; }
.assistant-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--yellow); color: var(--on-accent); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.assistant-toggle:hover { filter: brightness(1.05); }
.assistant-panel {
  position: absolute; right: 0; bottom: 68px; width: 350px; max-width: calc(100vw - 40px);
  height: 480px; max-height: calc(100vh - 120px);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.assistant-panel.hide { display: none; }
.assistant-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--sidebar-bg); color: var(--sidebar-text);
  font-size: 14px; font-weight: 700;
}
.assistant-close { background: none; border: none; color: var(--sidebar-text-muted); cursor: pointer; font-size: 15px; }
.assistant-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.assistant-bubble { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.assistant-bubble.assistant { align-self: flex-start; background: var(--wash-mid); color: var(--text); border-bottom-left-radius: 3px; }
.assistant-bubble.user { align-self: flex-end; background: var(--accent-blue); color: #fff; border-bottom-right-radius: 3px; }
.assistant-bubble.typing { opacity: 0.6; font-style: italic; }
.assistant-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.assistant-form input {
  flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; color: var(--text); font-size: 13px;
}
.assistant-form button { flex-shrink: 0; }

@media (max-width: 860px) {
  #assistant-widget { right: 14px; bottom: 14px; }
  .assistant-panel { width: calc(100vw - 28px); }
  /* O balãozinho do assistente (56px, fixo no canto) fica em cima de qualquer botão que
     termine exatamente naquele canto da tela em celular (ex: último card de uma coluna, fim
     de um formulário) - o toque nele "rouba" o toque do botão de baixo. Um pouco mais de
     folga que o desktop (base .content acima), a tela é bem menor. */
  .content { padding-bottom: 110px; }
}

/* Botões só de celular (hambúrguer do menu, toggle dos filtros, voltar ao topo) - escondidos
   no desktop, onde a sidebar já fica sempre visível do lado, os filtros cabem na topbar, e
   a página é curta o bastante pra não precisar de atalho de volta ao topo. */
.mobile-nav-toggle, .mobile-filters-toggle, .mobile-scroll-top-btn { display: none; }

/* Pedido do usuário: "no celular tem muito de ficar arrastando pra cima... um botão só pra
   celular pra voltar pro topo" - canto inferior ESQUERDO de propósito (o assistente/balão de
   chat já ocupa o direito, ver #assistant-widget). Só aparece depois de rolar (.visible,
   alternado por scroll em layout.js) - abaixo, sem rolar nada, não faria sentido nenhum. */
.mobile-scroll-top-btn {
  position: fixed; left: 16px; bottom: 16px; z-index: 45;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--accent, var(--yellow)); color: var(--bg-outer, #111);
  font-size: 20px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
}
.mobile-scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 860px) {
  /* Pedido do usuário: "a barra fica travada, não é fácil de mexer" no celular - o menu
     (agora com 6 categorias, ~27 links) virava uma faixa horizontal rolável no topo,
     dificil de usar e de achar algo em touch. Vira uma GAVETA (drawer) que desliza da
     esquerda por cima do conteúdo, fechada por padrão - abre no ☰, fecha tocando fora
     dela ou num link (ver layout.js). Mantém a MESMA lista vertical do desktop (categoria
     por categoria), só que como painel deslizante em vez de fixo do lado. */
  .app-shell { padding: 0; gap: 0; }
  .mobile-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; margin-right: 4px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--wash-mid);
    color: var(--text); font-size: 18px; cursor: pointer;
  }
  .mobile-scroll-top-btn { display: flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 65;
    width: min(84vw, 300px); height: 100vh; margin: 0;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* !important de propósito - achei um caso reproduzível (via teste automatizado) onde
     .sidebar.mobile-open não vencia .sidebar mesmo tendo especificidade maior (2 classes vs
     1). Não consegui confirmar 100% a causa raiz (pode ser peculiaridade do motor de
     renderização do ambiente de teste com position:fixed+transform+media query, mas não
     custa nada garantir que o estado "aberto" sempre vence, que é exatamente pra isso que
     serve esse !important - mesmo padrão já usado logo abaixo pra outros estados da gaveta
     mobile. */
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .sidebar-inner { border-radius: 0; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 64;
    background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.25s;
  }
  .sidebar-backdrop.visible { display: block; opacity: 1; }
  /* Sempre mostra tudo por extenso na gaveta (nunca o modo "minimizado" do desktop, que
     não faz sentido num painel que já fecha sozinho) - !important vence a regra
     :root[data-sidebar=collapsed], mais específica por causa do atributo. */
  .sidebar-logo-toggle .sidebar-logo-chevron, #sidebar-clock, .nav-label { display: revert !important; }
  .collapsed-only { display: none !important; }
  .nav-icon { transform: none !important; }
  .sidebar nav a:hover { transform: none; }

  .topbar { padding: 14px 60px 14px 14px; }
  .topbar h1 { font-size: 18px; }
  /* Filtros de cada página (busca/etapa/vendedor/datas...) - com 5+ campos numa faixa só,
     tomavam a tela inteira antes do conteúdo aparecer. Ficam escondidos atrás do botão
     "🔍 Filtros", abrindo como um painel dropdown por cima do conteúdo abaixo da topbar. */
  .mobile-filters-toggle {
    display: block; width: 100%; order: 3;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--wash-mid); color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
  }
  .mobile-filters-toggle.hide { display: none; }
  .filters {
    display: none; order: 4; width: 100%;
    background: var(--wash-mid); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin-top: 8px;
  }
  .filters.mobile-open { display: flex; }
  .filters select, .filters input { width: 100%; }

  /* Alvos de toque maiores (pedido do usuário) - botões de ação em tabela (editar/excluir/
     imprimir/foto) e "small" ficavam pequenos demais pra tocar com precisão no dedo
     (30x30px e ~28px de altura respectivamente, abaixo dos ~44px recomendados pra touch).
     Só no celular - no desktop a densidade apertada é proposital (mouse é preciso). */
  .btn-icon { width: 38px; height: 38px; margin: 2px 4px 2px 0; font-size: 16px; }
  .btn.small { padding: 9px 14px; font-size: 13px; }
  .btn { min-height: 40px; }
  table td, table th { padding: 10px 8px !important; }
  /* Checkbox/inputs soltos em linha de tabela (ex: marcar concluído) - mesmo raciocínio. */
  table input[type="checkbox"] { width: 20px; height: 20px; }
  /* Excluir foto (canto da miniatura, usado em campo - Ordem de Serviço/Instalações) */
  .job-photo-del { width: 28px; height: 28px; font-size: 14px; }
  /* Busca global (topbar) - min-width:220px do input em telas estreitas deixava o resultado
     (min-width:280px, position:absolute) vazar pra fora da tela, empurrando a página inteira
     pro lado (rolagem horizontal indevida) e deixando resultado sem tocar direito. */
  .global-search-wrap { min-width: 0; flex: 1 1 100%; order: 2; }
  .global-search-results { min-width: 0; max-width: calc(100vw - 28px); }
}

/* Retorno do investimento do Eletroposto (pedido do usuário: "quero tudo muito visual,
   bonito, design") - card hero com gradiente esmeralda/dourado (tema "dinheiro"), grid de
   números grandes, barra de progresso do quanto já voltou e chips de rendimento ao lado. */
.roi-panel {
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(12,136,250,0.05));
  border: 1px solid rgba(52,211,153,0.3);
}
.roi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 16px 0; }
.roi-stat { background: var(--wash-weak); border-radius: 12px; padding: 12px 14px; }
.roi-stat-label { font-size: 11.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.roi-stat-value { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(16px, 1.3vw + 9px, 22px); margin-top: 5px; font-variant-numeric: tabular-nums; }
.roi-progress-wrap { margin: 6px 0 18px; }
.roi-progress-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.roi-progress-pct { font-family: "Sora", sans-serif; font-weight: 800; font-size: 17px; }
.roi-progress-track { height: 10px; border-radius: 999px; background: var(--wash-mid); overflow: hidden; margin-top: 6px; }
.roi-progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.roi-rates { display: flex; gap: 12px; flex-wrap: wrap; }
.roi-rate-chip {
  display: flex; align-items: center; gap: 10px; background: rgba(12,136,250,0.1);
  border: 1px solid rgba(12,136,250,0.25); border-radius: 12px; padding: 10px 16px; flex: 1 1 200px;
}
.roi-rate-icon { font-size: 22px; }
.roi-rate-label { font-size: 11.5px; color: var(--text-muted); font-weight: 700; }
.roi-rate-value { font-family: "Sora", sans-serif; font-weight: 800; font-size: 19px; color: var(--blue,#45a0ff); }

/* Inbox do WhatsApp (pedido do usuário) - layout de chat: lista de conversas à esquerda,
   thread + resposta à direita. Pedido do usuário: "deixar o mais parecido e familiar que o
   WhatsApp Web, com anexos, foto do perfil, nome em negrito" - avatar com iniciais, bolhas
   verdes (--wa-out-bg/--wa-out-text, definidas por tema lá em cima), separador de data, e
   anexos (foto/PDF) com preview de verdade em vez de só um link. */
/* Pedido do usuário: "está ficando muito longo... quero que fique no estilo rolagem, igual
   do WhatsApp" - a tela inteira crescia junto com a conversa (sem altura fixa, .wa-thread-body
   tinha overflow-y:auto mas nada limitava a altura do pai, então nunca precisava rolar).
   Agora o shell ocupa a altura disponível da viewport e quem rola por dentro é a lista de
   conversas e o corpo da conversa - a página em si fica fixa, igual o WhatsApp Web de verdade. */
.wa-shell { display: flex; gap: 0; padding: 0; overflow: hidden; height: calc(100vh - 168px); min-height: 420px; border-radius: var(--radius); border: 1px solid var(--border); position: relative; }

/* Modo tela cheia do WhatsApp (pedido do usuário: "tela do notebook fica meio espremido...
   tem alguma opção que a gente possa maximizar a tela do WhatsApp") - some a barra lateral e
   o topo, o painel de conversa ocupa a viewport inteira. Só em sessão (não salva em
   localStorage) - reseta ao navegar/recarregar, é um "modo foco" temporário, não uma
   preferência permanente que poderia confundir alguém entrando em outra tela sem menu. */
:root[data-wa-fullscreen="1"] .sidebar { display: none; }
:root[data-wa-fullscreen="1"] .topbar { display: none; }
:root[data-wa-fullscreen="1"] .content { padding: 10px; }
:root[data-wa-fullscreen="1"] .wa-shell { height: calc(100vh - 20px); }
.wa-fullscreen-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--wa-header-bg); color: var(--wa-icon); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.wa-fullscreen-toggle:hover { background: var(--wash-mid); }
.wa-list-col { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--wa-panel-bg); min-height: 0; }
.wa-list-filters { padding: 10px 12px; background: var(--wa-header-bg); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.wa-search { width: 100%; background: var(--wa-input-bg); border-radius: 999px !important; border: none !important; padding: 8px 14px !important; font-size: 13px; }
.wa-status-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-status-pill { border: 1px solid var(--border); background: var(--wa-panel-bg); color: var(--text-muted); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.wa-status-pill:hover { background: var(--wash-mid); }
.wa-status-pill.active { background: var(--wa-accent); color: #fff; border-color: var(--wa-accent); }
.wa-list { overflow-y: auto; flex: 1; min-height: 0; background: var(--wa-panel-bg); }
.wa-conv-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; }
.wa-conv-item:hover { background: var(--wash-weak); }
.wa-conv-item.active { background: var(--wash-mid); border-left: 3px solid var(--wa-accent); padding-left: 11px; }
.wa-conv-body { flex: 1; min-width: 0; }
.wa-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wa-conv-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-conv-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.wa-conv-preview { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.wa-conv-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.wa-unread-badge { margin-left: auto; background: var(--wa-accent); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 999px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

/* Avatar circular com iniciais - mesma cor determinística (por nome) usada na lista, no
   cabeçalho da conversa e nas bolhas do humano que está respondendo. */
.wa-avatar { flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-family: "Sora", sans-serif; letter-spacing: 0.2px; }

.wa-thread-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wa-thread-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; background: var(--wa-header-bg); }
.wa-thread-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wa-thread-name { font-weight: 700; font-size: 15px; }
.wa-thread-actions-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wa-thread-extra:empty { display: none; }
.wa-thread-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 3px;
  background-color: var(--wa-chat-bg);
  background-image: radial-gradient(var(--border-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.wa-date-sep { display: flex; justify-content: center; margin: 10px 0 6px; }
.wa-date-sep span { background: var(--wa-header-bg); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px; }
.wa-bubble-row { display: flex; gap: 6px; align-items: flex-end; margin-top: 2px; }
.wa-bubble-row.out { justify-content: flex-end; }
.wa-bubble { max-width: 68%; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,0.12); position: relative; }
.wa-bubble.in { background: var(--wa-panel-bg); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
.wa-bubble.out { background: var(--wa-out-bg, rgba(69,160,255,0.18)); color: var(--wa-out-text, inherit); border-bottom-right-radius: 2px; }
.wa-bubble.out .wa-bubble-meta { color: color-mix(in srgb, var(--wa-out-text, var(--text-muted)) 65%, transparent); }
.wa-bubble-sender { font-size: 10.5px; font-weight: 800; margin-bottom: 2px; opacity: 0.85; }
.wa-bubble-meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-align: right; white-space: nowrap; }
.wa-bubble-meta .wa-tick { color: var(--wa-accent); font-weight: 700; }
.wa-attach-doc { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.08); border-radius: 8px; padding: 8px 10px; margin: 2px 0 4px; text-decoration: none; color: inherit; }
.wa-bubble.out .wa-attach-doc { background: rgba(0,0,0,0.12); }
.wa-attach-doc-icon { font-size: 20px; flex-shrink: 0; }
.wa-attach-doc-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-attach-img { display: block; max-width: 220px; max-height: 260px; border-radius: 8px; margin: 2px 0 4px; cursor: pointer; object-fit: cover; }
.wa-attach-audio { display: block; width: 240px; max-width: 100%; margin: 2px 0 4px; height: 32px; }
.wa-transcript-label { font-size: 10px; font-weight: 700; opacity: 0.7; margin-top: 2px; }

.wa-thread-reply { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: center; background: var(--wa-header-bg); }
.wa-thread-reply textarea { flex: 1; resize: none; border-radius: 20px !important; padding: 9px 16px !important; max-height: 90px; background: var(--wa-input-bg) !important; border: none !important; }
.wa-thread-reply-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wa-send-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--wa-accent); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: filter 0.12s; }
.wa-send-btn:hover { filter: brightness(1.08); }
.wa-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--wa-icon); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s; }
.wa-icon-btn:hover { background: var(--wash-mid); }
.wa-thread-reply-blocked { padding: 14px 16px; border-top: 1px solid var(--border); font-size: 13px; background: var(--wa-header-bg); }
.wa-ai-summary { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--wa-header-bg); }
.wa-ai-summary-list { margin: 8px 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55; }
.wa-ai-summary-list li { margin-bottom: 6px; }
.wa-ai-summary-list li:last-child { margin-bottom: 0; }
.wa-bot-data { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--wa-header-bg); }
.wa-bot-data-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-bot-chip { font-size: 11.5px; background: var(--wa-panel-bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }

/* Nota interna (pedido do usuário: "escrever uma mensagem apenas pro sistema interno...
   comentário ou alerta sobre uma mensagem recebida") - nunca vai pro cliente, por isso o
   visual é bem diferente de uma bolha de WhatsApp: cartão centralizado, borda tracejada
   âmbar, pra nunca dar a entender que aquilo foi mandado/visto pelo cliente. */
.wa-note-row { display: flex; justify-content: center; margin: 6px 0; }
.wa-note { max-width: 80%; background: rgba(245,166,35,0.12); border: 1px dashed var(--orange,#f5a623); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.wa-note-head { font-weight: 800; font-size: 11px; color: var(--orange,#f5a623); margin-bottom: 3px; }
.wa-note-ref { font-size: 11px; color: var(--text-muted); font-style: italic; margin-bottom: 3px; }
.wa-note-btn { background: none; border: none; cursor: pointer; font-size: 11px; padding: 0 0 0 6px; opacity: 0.55; vertical-align: middle; }
.wa-note-btn:hover { opacity: 1; }
.wa-reply-mode-tabs { display: flex; gap: 4px; padding: 6px 12px 0; }
.wa-reply-mode-tab { border: none; background: none; color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px 999px 0 0; cursor: pointer; }
.wa-reply-mode-tab.active { background: var(--wash-mid); color: var(--text); }
.wa-reply-mode-tab.note-mode.active { background: rgba(245,166,35,0.15); color: var(--orange,#f5a623); }

/* Citação de mensagem (responder citando) - resuminho da mensagem original "colado" em cima
   da resposta, igual o WhatsApp de verdade. */
.wa-quote { border-left: 3px solid currentColor; opacity: 0.75; font-size: 11.5px; padding: 3px 8px; margin-bottom: 4px; background: rgba(0,0,0,0.06); border-radius: 4px; }
.wa-quote-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--wash-mid); border-left: 3px solid var(--wa-accent); padding: 6px 12px; font-size: 12px; }
.wa-quote-banner-cancel { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--text-muted); }

/* Rascunho da IA (modo rascunho) - visual claramente "pendente", com borda tracejada e ações
   de aprovar/descartar; nunca foi enviado de verdade, então não pode parecer uma bolha normal. */
.wa-draft { border: 2px dashed var(--accent-text); background: var(--wash-mid); }
.wa-draft-text { width: 100%; resize: vertical; font-family: inherit; font-size: 13.5px; margin: 4px 0; border-radius: 6px; }
.wa-draft-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Toggle Automático/Rascunho no cabeçalho da conversa. */
.wa-ai-mode-toggle { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.wa-ai-mode-toggle select { font-size: 11.5px; padding: 2px 6px; }
/* Botão "←" de voltar pra lista, dentro do cabeçalho da conversa - só existe visualmente no
   mobile (ver media query abaixo); no desktop fica escondido porque as 2 colunas (lista +
   conversa) sempre ficam lado a lado, sem precisar "voltar" de lugar nenhum. */
.wa-mobile-back-btn { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--wa-icon); font-size: 19px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.wa-mobile-back-btn:hover { background: var(--wash-mid); }

/* "⋯" - só existe no celular, abre/fecha a fileira de botões operacionais (Resumo/IA
   automática/Auditoria/Reatribuir/Fechar) e os cartões de "coletado pelo atendente
   virtual"/conversas antigas do cliente (ver .wa-thread-actions-row/.wa-thread-extra
   abaixo), que ficam escondidos por padrão - a 1ª reclamação ("ainda não tá legal") era
   isso tudo empurrando as mensagens de verdade pra fora da tela numa tela pequena. */
.wa-mobile-more-btn { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--wa-icon); font-size: 20px; font-weight: 800; cursor: pointer; flex-shrink: 0; margin-left: auto; }
.wa-mobile-more-btn:hover, .wa-mobile-more-btn.active { background: var(--wash-mid); }

/* Pedido do usuário: "quando acessa pelo celular, o WhatsApp fica ruim... quero que ajuste
   pra ficar muito parecido com o WhatsApp no celular mesmo. No computador deve manter" - antes,
   lista e conversa ficavam as DUAS empilhadas na mesma rolagem, dava pra ver os botões de
   admin da conversa MISTURADOS com a lista, sem nunca realmente "abrir" a conversa em tela
   cheia. 2ª reclamação (ainda com o calc(100vh-140px) + flex de antes): mesmo assim a página
   inteira (incluindo a barra de cima do sistema) ainda rolava por baixo da conversa, porque
   a altura calculada via 100vh é pouco confiável em navegador de celular (a barra de
   endereço soma/some, empurrando o cálculo). Solução mais robusta: quando aberta, a conversa
   vira um overlay `position:fixed;inset:0` cobrindo a tela INTEIRA de verdade (por cima de
   tudo, até da barra do sistema), sem depender de nenhuma conta de altura - sempre exatamente
   do tamanho da tela visível. Desktop (acima de 860px) nem entra nessa media query - continua
   exatamente como já estava, as 2 colunas sempre visíveis lado a lado. */
@media (max-width: 860px) {
  .wa-shell { flex-direction: column; height: calc(100vh - 140px); min-height: 480px; }
  .wa-list-col { width: 100%; border-right: none; border-bottom: none; max-height: none; flex: 1; min-height: 0; }
  .wa-thread-col { display: none; }
  .wa-fullscreen-toggle { display: none; } /* redundante - a conversa já abre em tela cheia sozinha */

  .wa-shell.wa-mobile-thread-open .wa-list-col { display: none; }
  .wa-shell.wa-mobile-thread-open .wa-thread-col {
    display: flex; position: fixed; inset: 0; z-index: 70;
    height: 100dvh; background: var(--wa-panel-bg);
  }
  .wa-mobile-back-btn, .wa-mobile-more-btn { display: flex; }
  .wa-thread-header-info { flex: 1; min-width: 0; }
  .wa-thread-name, .wa-thread-header-info .sim-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wa-thread-actions-row, .wa-thread-extra { display: none; }
  /* flex-basis:100% num container flex-wrap:wrap (.wa-thread-header, herdado do desktop)
     empurra pra própria linha nova, abaixo do "←  avatar  nome  ⋯" - sem isso ficaria
     espremido tentando caber do lado dos outros itens da mesma linha. */
  .wa-thread-actions-row.wa-extra-open { display: flex; flex-basis: 100%; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 8px; }
  .wa-thread-extra.wa-extra-open { display: block; }
  .wa-thread-body { flex: 1; min-height: 0; max-height: none; }
}