/* ===========================================================================
   PointZap — TEMA (tokens de cor, superficie, sombra, ritmo e efeitos)
   ---------------------------------------------------------------------------
   Este arquivo e carregado pelo `base.html` ANTES do CSS de cada pagina, e e a
   UNICA fonte das cores do sistema. O CSS de pagina nao escreve mais cor a mao:
   escreve `var(--token)`. Trocar o tema (ou a marca) e mexer AQUI, num lugar,
   em vez de garimpar 9 mil linhas de CSS.

   As cores sairam do logo do sistema de ORIGEM, amostradas pixel a pixel, e casam
   com o verde do logo do PointZap (pasta `logos/`):

     verde-limao  #9FF619      verde vivo   #19D242      verde fundo  #00B652
     branco       #F9F8FA      fundo        #01030C

   DOIS TEMAS. O padrao e o ESCURO, porque e a cara do logo e porque a tela de
   Conversas fica aberta o dia inteiro. Quem preferir claro clica no sol/lua da
   barra lateral: o `base.html` grava a escolha no `localStorage` (com o prefixo do
   app, ver APP_NAMESPACE) e marca `data-tema="claro"` no <html> ANTES da pintura,
   entao nao existe "flash branco" ao carregar.

   REGRA AO CRIAR TELA NOVA: nenhuma cor literal. Se faltar um token, acrescente
   aqui — nos DOIS temas — em vez de cravar um `#hex` na pagina. Contraste: par
   sempre `--text*` sobre `--surface*` (os dois viram juntos na troca de tema);
   texto branco so sobre `--accent-strong`, `--blue`, `--danger` e `--violet`.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- superficies (do mais fundo ao mais alto) --- */
  --bg: #05070f;              /* pagina */
  --bg-soft: #080d1a;         /* faixas e areas de descanso */
  --surface: #0c1220;         /* cartao, painel, barra */
  --surface-2: #111a2b;       /* campo de formulario, area interna */
  --surface-3: #17223a;       /* hover, item selecionado */
  --surface-rgb: 12, 18, 32;  /* para rgba() sobre superficie */

  /* A barra lateral e escura nos DOIS temas: e onde o logo vive. */
  --sidebar-bg: linear-gradient(180deg, #070c19 0%, #01030c 100%);
  --sidebar-item: rgba(255, 255, 255, 0.05);

  /* --- texto --- */
  --text: #e9eff8;            /* titulo e corpo */
  --text-soft: #b9c5d8;       /* apoio */
  --muted: #8b9bb5;           /* legenda, rotulo */
  --muted-2: #6d7d97;         /* o mais discreto que ainda se le */
  --muted-rgb: 139, 155, 181;
  --on-accent: #f7fffa;       /* texto sobre botao colorido */
  --qr-fundo: #ffffff;        /* fundo de QR Code: branco nos DOIS temas (a camera precisa) */

  /* --- bordas, sombras, veus ---
     `--edge-rgb` e o truque que faz borda funcionar nos dois temas: no escuro a
     borda e um BRANCO translucido; no claro, um azul-tinta translucido. O CSS de
     pagina escreve `rgba(var(--edge-rgb), 0.08)` e nao precisa saber em qual
     tema esta. */
  --edge-rgb: 255, 255, 255;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --scrim-rgb: 0, 0, 0;       /* fundo de modal/lightbox: escuro nos dois temas */
  --shadow-rgb: 0, 0, 0;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* --- acento: o verde do logo ---
     Dois tons de proposito. `--accent` e o verde VIVO do logo, para borda, icone,
     texto e brilho — sobre fundo escuro ele tem contraste de sobra. `--accent-strong`
     e um degrau mais fundo e existe para FUNDO DE BOTAO: o verde vivo com texto
     branco em cima daria ~2,4:1, que nao se le. O forte da ~4:1 com branco negrito,
     que e o minimo aceitavel para rotulo de botao. */
  --accent: #19d242;
  --accent-strong: #0fa83c;
  --accent-deep: #00b652;
  --accent-2: #9ff619;        /* limao do logo: so em degrade e brilho */
  --accent-rgb: 25, 210, 66;
  --accent-grad: linear-gradient(135deg, #19d242 0%, #0fa83c 55%, #009b45 100%);
  --accent-grad-lime: linear-gradient(120deg, #9ff619 0%, #19d242 60%, #00b652 100%);

  /* --- cores de estado (mesma familia do acento, so a matiz muda) --- */
  --blue: #4c8dff;
  --blue-rgb: 76, 141, 255;
  --violet: #a78bfa;
  --violet-rgb: 167, 139, 250;
  --amber: #f7b500;
  --amber-rgb: 247, 181, 0;
  --amber-text: #fbd38d;
  --danger: #ff6b6b;
  --danger-strong: #e5484d;
  --danger-rgb: 255, 107, 107;

  /* --- forma e ritmo --- */
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- area de conversa ---
     A tela de Conversas nao usa `--surface` para tudo de proposito: bolha enviada,
     bolha recebida e papel de parede do chat precisam se distinguir SEM depender de
     borda (o olho separa por tom, que e mais rapido de ler numa lista longa). */
  --chat-bg: #070c17;
  --bubble-in: #131c2e;
  --bubble-out: #10331f;
  --bubble-out-edge: rgba(var(--accent-rgb), 0.32);
  --composer-bg: #0a111f;

  /* Brilho do acento — o "efeito" que da vida ao verde sem poluir a tela. */
  --glow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 8px 28px rgba(var(--accent-rgb), 0.22);
  --glow-soft: 0 6px 22px rgba(var(--accent-rgb), 0.16);
}

/* =========================== TEMA CLARO ===========================
   Mesmos nomes, outros valores. Nada no CSS de pagina precisa mudar. */
:root[data-tema="claro"] {
  color-scheme: light;

  --bg: #f4f7fc;
  --bg-soft: #eef3fa;
  --surface: #ffffff;
  --surface-2: #f7fafd;
  --surface-3: #eef3f9;
  --surface-rgb: 255, 255, 255;

  --text: #101a2e;
  --text-soft: #3d4a61;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --muted-rgb: 100, 116, 139;

  --edge-rgb: 15, 23, 42;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --scrim-rgb: 15, 23, 42;
  --shadow-rgb: 15, 23, 42;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 10px 30px rgba(15, 23, 42, 0.1);
  --shadow-3: 0 24px 60px rgba(15, 23, 42, 0.16);

  /* No claro o verde vivo perde contraste como TEXTO (fica "neon" sobre branco),
     entao o acento desce um degrau e o forte vira o de botao. */
  --accent: #12a844;
  --accent-strong: #0d9f3a;
  --accent-deep: #077a2f;
  --accent-2: #34d058;
  --accent-rgb: 18, 168, 68;
  --accent-grad: linear-gradient(135deg, #16b84a 0%, #0d9f3a 55%, #07863a 100%);
  --accent-grad-lime: linear-gradient(120deg, #7ce83a 0%, #16b84a 60%, #0d9f3a 100%);

  --blue: #2d6cdf;
  --blue-rgb: 45, 108, 223;
  --violet: #7c3aed;
  --violet-rgb: 124, 58, 237;
  --amber: #d98f00;
  --amber-rgb: 217, 143, 0;
  --amber-text: #92400e;
  --danger: #dc2626;
  --danger-strong: #b91c1c;
  --danger-rgb: 220, 38, 38;

  --glow: 0 0 0 1px rgba(var(--accent-rgb), 0.28), 0 8px 24px rgba(var(--accent-rgb), 0.16);
  --glow-soft: 0 6px 18px rgba(var(--accent-rgb), 0.12);

  /* O bege do WhatsApp saiu: o papel de parede do chat virou um cinza-azul da
     familia do sistema. A bolha enviada continua verde-claro, que e a convencao que
     todo mundo ja le sem pensar. */
  --chat-bg: #eef2f8;
  --bubble-in: #ffffff;
  --bubble-out: #d7f7d0;
  --bubble-out-edge: rgba(var(--accent-rgb), 0.28);
  --composer-bg: #f4f7fb;
}

/* ============================ BASE ============================ */

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* AMBIENTE: dois halos de verde muito diluidos, fixos atras de tudo. E o que
   tira o fundo escuro do "preto chapado" sem custar nada (nao pinta a cada
   scroll: `position: fixed` + `pointer-events: none`). No claro, sai de cena. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(var(--accent-rgb), 0.13), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, rgba(76, 141, 255, 0.09), transparent 60%);
}

:root[data-tema="claro"] body::before {
  background:
    radial-gradient(1000px 560px at 88% -16%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    radial-gradient(720px 480px at -10% 110%, rgba(var(--blue-rgb), 0.06), transparent 58%);
}

/* Foco visivel: anel no acento. Fica so no foco por TECLADO (`:focus-visible`),
   entao o clique de mouse nao deixa contorno sobrando. Acessibilidade que nao
   atrapalha o uso normal. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection {
  background: rgba(var(--accent-rgb), 0.28);
  color: var(--text);
}

/* Barra de rolagem discreta, na cor do tema (Chrome/Edge e Firefox). */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--muted-rgb), 0.4) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--muted-rgb), 0.32);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--muted-rgb), 0.5);
  background-clip: padding-box;
}

/* Campos e botoes herdam o tema em vez do estilo do sistema operacional (senao
   um <select> no tema escuro abre branco). */
input,
select,
textarea,
button {
  color-scheme: inherit;
}

/* ======================= EFEITOS REAPROVEITAVEIS =======================
   Classes utilitarias que as telas usam para nao repetir o efeito em cada CSS. */

/* Vidro: superficie translucida com desfoque do que passa atras. Usado em
   cartao, cabecalho e menu. O `background-color` de retaguarda existe para
   navegador sem `backdrop-filter` (o cartao fica solido, nao invisivel). */
.zp-glass {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(2px)) {
  .zp-glass { background: var(--surface); }
}

/* Entrada dos blocos: sobem 10px e aparecem. Escalonado por `--i` (a tela passa
   `style="--i: 2"`), o que da a sensacao de "montou na hora" sem JavaScript. */
@keyframes zp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.zp-rise {
  animation: zp-rise var(--t-slow) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* Brilho pulsante para o ponto "ao vivo" (aviso de nova mensagem, status online). */
@keyframes zp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.zp-pulse {
  animation: zp-pulse 2.2s ease-out infinite;
}

/* Brilho que corre uma vez sobre o elemento (usado no cartao do login). */
@keyframes zp-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(320%) skewX(-18deg); }
}

/* QUEM PEDE MENOS MOVIMENTO RECEBE MENOS MOVIMENTO. Nao e detalhe de gosto:
   animacao continua provoca desconforto real em quem tem sensibilidade
   vestibular, e o sistema fica aberto o dia inteiro. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============== LOGO: duas versoes nas telas de entrada ==============
   A marca do PointZap e COLORIDA (pino verde, balao branco, "point" escuro e "zap"
   verde). Por isso NAO se inverte por CSS — `invert` deixaria o verde magenta, que era
   aceitavel so na marca monocromatica anterior.

   ⚠️ O "point" e quase preto: no tema ESCURO (o padrao) ele sumiria. As telas de entrada
   tem DUAS imagens: `logo-pointzap-branco.png` (o "point" em branco) no tema escuro e
   `logo-pointzap.png` (a arte original) no claro. As duas saem do mesmo original da
   pasta `logos/`; trocou a arte, gere as duas (seção 17 do CONTEXTO).

   ⚠️ A BARRA LATERAL e escura nos DOIS temas, e la so vai o ICONE (`logo.png`), que
   aparece bem sobre escuro — nao ha troca por tema ali. Antes de mexer aqui, confira em
   qual superficie a marca assenta em CADA tema. */
/* Duas classes de proposito: o `login.css` (carregado DEPOIS deste arquivo) poe
   `display: block` no `.brand-logo`, e com uma classe so ele venceria — as duas versoes
   apareceriam juntas. */
.brand-logo.brand-logo-claro,
:root[data-tema="claro"] .brand-logo.brand-logo-escuro {
  display: none;
}
:root[data-tema="claro"] .brand-logo.brand-logo-claro {
  display: block;
}

/* ============ BOTOES DO PE DA BARRA (recolher / tema) ============
   Dois botoes iguais no pe da barra lateral. Cada um troca um atributo no
   <html> — `data-menu` e `data-tema` — e o CSS mostra o par certo de rotulos.
   Sem biblioteca e sem script por botao. */
.sidebar-btn,
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--sidebar-item);
  color: #e9eff8;
  font: 600 13px/1 'Poppins', sans-serif;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t-fast);
}

.sidebar-btn:hover,
.theme-toggle:hover {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.45);
}

/* O empurrao so com a barra ABERTA — no trilho ele tira o icone do centro. */
:root:not([data-menu="recolhido"]) .sidebar-btn:hover,
:root:not([data-menu="recolhido"]) .theme-toggle:hover {
  transform: translateY(-1px);
}

.sidebar-btn-icon,
.theme-toggle-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), 0.18);
  font-size: 13px;
  line-height: 1;
}

/* O rotulo diz para onde a pessoa VAI, nao onde ela esta — e o que ela quer
   saber ao olhar o botao. Vale para os dois: "Tema claro" quando se esta no
   escuro, "Expandir menu" quando o menu esta recolhido. */
.theme-toggle-label-claro { display: inline; }
.theme-toggle-label-escuro { display: none; }

:root[data-tema="claro"] .theme-toggle-label-claro { display: none; }
:root[data-tema="claro"] .theme-toggle-label-escuro { display: inline; }

.so-aberto { display: inline; }
.so-recolhido { display: none; }

:root[data-menu="recolhido"] .so-aberto { display: none; }
:root[data-menu="recolhido"] .so-recolhido { display: inline; }

/* O pe empilha os dois botoes: lado a lado eles nao cabem no trilho. */
.sidebar-foot {
  display: grid;
  gap: 8px;
}