/* ============================================================
   Ezzetilo — Design Tokens (from spec v1.0)
   ============================================================ */
:root {
  /* ---- Palette ---- */
  --green-primary: #1D9E75;
  --green-primary-d: #168862;
  --brand-navy: #0B1F3A;
  --brand-navy-2: #102a4d;
  --green-light: #E1F5EE;
  --green-text: #085041;
  --blue-info: #378ADD;
  --blue-info-light: #E6F1FB;
  --blue-text: #0C447C;
  --amber: #BA7517;
  --amber-light: #FAEEDA;
  --amber-text: #633806;
  --red-error: #E24B4A;
  --red-light: #FCEBEB;
  --red-text: #791F1F;
  --purple-ai: #534AB7;
  --purple-light: #EEEDFE;
  --purple-text: #26215C;
  --surface: #F5F5F3;
  --border: #E5E7EB;
  --text-1: #2C2C2A;
  --text-2: #888780;
  --white: #FFFFFF;
  --neutral-light: #F1EFE8;
  --neutral-text: #444441;
  --placeholder: #9CA3AF;
  --sidebar-item: #7fa8c9;

  /* ---- Superfícies temáveis (light = valores idênticos aos de sempre; o
     tema dark sobrescreve tudo em [data-theme="dark"] mais abaixo) ---- */
  --card: #FFFFFF;
  --card-hover: #F5F5F3;
  --input-bg: #FFFFFF;

  /* ---- Chat estilo WhatsApp (fundo com padrão de rabiscos) ----
     O padrão é um SVG inline (data URI) porque CSS não permite trocar a cor
     de um background-image externo por variável — cada tema define o seu,
     com o traço na opacidade certa pro fundo. */
  --chat-bg: #EFEAE2;
  --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 34c4-8 14-8 16 0 2-8 12-8 16 0 2 6-8 12-16 18-8-6-18-12-16-18z'/%3E%3Cpath d='M118 22l3.5 8 8.5.8-6.4 5.7 1.9 8.5-7.5-4.6-7.5 4.6 1.9-8.5-6.4-5.7 8.5-.8z'/%3E%3Cpath d='M206 30a12 12 0 1 1-6 22l-9 3 3-8a12 12 0 0 1 12-17z'/%3E%3Cpath d='M40 112v-16c0-3 2-5 5-5h14M52 112a6 6 0 1 0 0-12 6 6 0 0 0 0 12z'/%3E%3Cpath d='M130 96c8-6 18 0 18 8 0 10-18 20-18 20s-18-10-18-20c0-8 10-14 18-8z' transform='scale(0.8) translate(35 28)'/%3E%3Cpath d='M196 106h26a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-4l2 8-10-8h-14a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6z'/%3E%3Cpath d='M28 196c0-8 6-14 14-14 2-6 12-6 14 0 8 0 14 6 14 14z'/%3E%3Cpath d='M124 180l22 10-22 10 4-10z'/%3E%3Cpath d='M198 186c10 0 18 6 18 14h-36c0-8 8-14 18-14zM191 186l3-8M205 186l-3-8'/%3E%3Cpath d='M84 250a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM90 240l6-16 8 3'/%3E%3Ccircle cx='170' cy='244' r='9'/%3E%3Cpath d='M166 242c1 2 7 2 8 0M167 240h0M173 240h0'/%3E%3C/g%3E%3C/svg%3E");
  --bubble-in-bg: #FFFFFF;
  --bubble-in-fg: #2C2C2A;
  --bubble-in-border: #E5E7EB;
  --bubble-out-bg: #1D9E75;
  --bubble-out-fg: #FFFFFF;
  --chat-chip-bg: #FFFFFF;

  /* ---- Sidebar (aba lateral) temável ----
     Light = rail claro com texto escuro (padrão de CRM moderno); o dark
     sobrescreve pra rail escuro. Antes era navy fixa nos dois temas. */
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #E5E7EB;
  --sidebar-fg: #2C2C2A;          /* logo "Ezzetilo", nome do negócio, nome do usuário */
  --sidebar-muted: #888780;       /* seções, subtítulos, chevrons, itens inativos */
  --sidebar-chip-bg: #F5F5F3;     /* fundo do switcher de negócio */
  --sidebar-chip-hover: #ECECE9;
  --sidebar-hover: #F5F5F3;       /* hover de item de menu */
  --sidebar-active-bg: #E1F5EE;   /* item ativo (tint verde) */
  --sidebar-active-fg: #168862;   /* item ativo (verde) */

  /* ---- Barra de digitar (composer) — pílula escura ----
     Light = navy da marca (como foi desenhado); dark = cinza-grafite do
     WhatsApp, pra não ficar aquele azul destoando no fundo quase-preto. */
  --composer-bg: #0B1F3A;
  --composer-active: #102a4d;     /* fundo do botão de ícone ativo/aberto */

  /* ---- Spacing (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* ---- Shadows ---- */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.05);
  --sh-md: 0 4px 6px rgba(0,0,0,0.07);
  --sh-lg: 0 10px 15px rgba(0,0,0,0.1);
  --sh-card: 0 1px 3px rgba(0,0,0,0.08);
  --sh-focus: 0 0 0 3px rgba(29,158,117,0.25);

  /* ---- Typography ---- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --sidebar-w: 220px;
  --sidebar-w-collapsed: 64px;
}

/* ============================================================
   Tema DARK — paleta WhatsApp Web dark. Ativado por
   document.documentElement.dataset.theme = 'dark' (ver EzzeTheme
   em data.js). Sobrescreve só as variáveis; todo componente que
   usa var(--...) adapta sozinho, sem JS por componente.
   ============================================================ */
[data-theme="dark"] {
  --surface: #0C1317;
  --border: #222D34;
  --text-1: #E9EDEF;
  --text-2: #8696A0;
  --neutral-light: #202C33;
  --neutral-text: #C5CDD3;
  --placeholder: #667781;

  --card: #111B21;
  --card-hover: #202C33;
  --input-bg: #202C33;

  /* Tons "light" dos badges viram tints escuros — mesmo matiz, fundo escuro */
  --green-light: #103529;
  --green-text: #6FDDB4;
  --blue-info-light: #0E2A44;
  --blue-text: #7CB8ED;
  --amber-light: #33260D;
  --amber-text: #E5B15C;
  --red-light: #3A1516;
  --red-text: #F1918F;
  --purple-light: #221F3F;
  --purple-text: #A9A1EE;

  --sh-card: 0 1px 3px rgba(0,0,0,0.4);
  --sh-md: 0 4px 6px rgba(0,0,0,0.45);
  --sh-lg: 0 10px 15px rgba(0,0,0,0.5);

  /* Chat estilo WhatsApp dark (fundo #0b141a + rabiscos claros sutis) */
  --chat-bg: #0B141A;
  --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.04' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 34c4-8 14-8 16 0 2-8 12-8 16 0 2 6-8 12-16 18-8-6-18-12-16-18z'/%3E%3Cpath d='M118 22l3.5 8 8.5.8-6.4 5.7 1.9 8.5-7.5-4.6-7.5 4.6 1.9-8.5-6.4-5.7 8.5-.8z'/%3E%3Cpath d='M206 30a12 12 0 1 1-6 22l-9 3 3-8a12 12 0 0 1 12-17z'/%3E%3Cpath d='M40 112v-16c0-3 2-5 5-5h14M52 112a6 6 0 1 0 0-12 6 6 0 0 0 0 12z'/%3E%3Cpath d='M130 96c8-6 18 0 18 8 0 10-18 20-18 20s-18-10-18-20c0-8 10-14 18-8z' transform='scale(0.8) translate(35 28)'/%3E%3Cpath d='M196 106h26a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-4l2 8-10-8h-14a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6z'/%3E%3Cpath d='M28 196c0-8 6-14 14-14 2-6 12-6 14 0 8 0 14 6 14 14z'/%3E%3Cpath d='M124 180l22 10-22 10 4-10z'/%3E%3Cpath d='M198 186c10 0 18 6 18 14h-36c0-8 8-14 18-14zM191 186l3-8M205 186l-3-8'/%3E%3Cpath d='M84 250a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM90 240l6-16 8 3'/%3E%3Ccircle cx='170' cy='244' r='9'/%3E%3Cpath d='M166 242c1 2 7 2 8 0M167 240h0M173 240h0'/%3E%3C/g%3E%3C/svg%3E");
  --bubble-in-bg: #202C33;
  --bubble-in-fg: #E9EDEF;
  --bubble-in-border: transparent;
  --bubble-out-bg: #005C4B;
  --bubble-out-fg: #E9EDEF;
  --chat-chip-bg: #182229;

  /* Sidebar dark — rail escuro estilo WhatsApp/painel */
  --sidebar-bg: #111B21;
  --sidebar-border: #222D34;
  --sidebar-fg: #E9EDEF;
  --sidebar-muted: #8696A0;
  --sidebar-chip-bg: rgba(255,255,255,0.05);
  --sidebar-chip-hover: rgba(255,255,255,0.09);
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active-bg: rgba(29,158,117,0.18);
  --sidebar-active-fg: #1DD882;

  /* Composer dark — cinza-grafite do WhatsApp (sem o azul) */
  --composer-bg: #202C33;
  --composer-active: #2A3942;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #374750; border-radius: 999px; border: 1px solid transparent; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #46565f; background-clip: content-box; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text-1);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Firefox: scrollbar fina (equivalente ao ::-webkit-scrollbar width:6px do Chrome/Safari) */
* { scrollbar-width: thin; }
[data-theme="dark"] * { scrollbar-color: #374750 transparent; }
/* color: inherit — sem isso, o <button> usa a cor de texto padrão do
   navegador (preta) em vez de herdar a do tema; textos dentro de botões sem
   color explícito (ex: nome do contato na lista do Inbox) ficavam pretos e
   ilegíveis no dark. Botões que definem sua própria cor (verde/branco etc.)
   não são afetados — o inline vence. */
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d8d8d4; border-radius: 999px; border: 1px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c4c4c0; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Type scale helpers ---- */
.t-display { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.t-h1 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.t-h2 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.t-h3 { font-size: 15px; font-weight: 500; line-height: 1.4; }
.t-body-l { font-size: 14px; font-weight: 400; line-height: 1.6; }
.t-body { font-size: 13px; font-weight: 400; line-height: 1.5; }
.t-caption { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--text-2); }
.t-label { font-size: 11px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.t-mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; }

.nx-fade { animation: nxFade .28s ease both; }
@keyframes nxFade { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nx-fade { animation: none; } }
@keyframes nxPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.nx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-primary); animation: nxPulse 1.6s ease-in-out infinite; }

/* Emoji picker — hover via CSS (não handlers JS) porque o grid pode ter
   milhares de botões; :hover no CSS não tem o custo de listener por item. */
.nx-emoji-btn { background: none; border: none; font-size: 21px; padding: 4px; border-radius: 6px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.nx-emoji-btn:hover { background: var(--surface); }
.nx-emoji-tab { background: none; border: none; display: flex; align-items: center; justify-content: center; font-size: 15px; padding: 6px; border-radius: 8px; cursor: pointer; color: var(--text-2); flex-shrink: 0; }
.nx-emoji-tab:hover { background: var(--surface); }

/* Tooltip customizado (barra do composer) — só CSS, sem estado/handler por
   botão: aparece rápido e some junto, sem o delay/estilo inconsistente do
   title nativo do navegador. */
.nx-tip { position: relative; }
.nx-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px);
  background: var(--brand-navy-2); color: #fff; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; padding: 5px 9px; border-radius: 6px; box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
  z-index: 260;
}
.nx-tip::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--brand-navy-2);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 260;
}
.nx-tip:hover::after, .nx-tip:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nx-emoji-tab.active { background: var(--green-light); }