/* ─────────────────────────────────────────────── wa-theme.css — WhatsApp Web theme (insforge) Paleta exacta del repo fazt/whatsapp-insforge Soporte light/dark mode via clase .dark en ─────────────────────────────────────────────── */ /* ── Light mode (default) ── */ :root { --wa-bg: #f0f2f5; --wa-panel: #ffffff; --wa-panel-secondary: #f0f2f5; --wa-border: #e9edef; --wa-text: #111b21; --wa-muted: #667781; --wa-accent: #008069; --wa-accent-hover: #017561; --wa-bubble-out: #d9fdd3; --wa-bubble-in: #ffffff; --wa-input-bg: #ffffff; --wa-hover: #f5f6f6; --wa-sidebar: #f0f2f5; --wa-icon: #54656f; --wa-unread-badge: #25d366; --wa-status-ring: #00a884; --wa-status-ring-seen:#8696a0; --wa-chat-pattern: url("/patterns/chat-bg-light.svg"); /* Extensiones FamVoIP (no existen en insforge) */ --wa-bubble-ai: #e8e0f0; /* AI messages - light purple tint */ --wa-bubble-agent: #e7f0e8; /* Human agent handoff - light green tint */ } /* ── Dark mode ── */ .dark { --wa-bg: #0b141a; --wa-panel: #111b21; --wa-panel-secondary: #202c33; --wa-border: #2a3942; --wa-text: #e9edef; --wa-muted: #8696a0; --wa-accent: #00a884; --wa-accent-hover: #06cf9c; --wa-bubble-out: #005c4b; --wa-bubble-in: #202c33; --wa-input-bg: #2a3942; --wa-hover: #202c33; --wa-sidebar: #111b21; --wa-icon: #aebac1; --wa-unread-badge: #00a884; --wa-status-ring: #00a884; --wa-status-ring-seen:#8696a0; --wa-chat-pattern: url("/patterns/chat-bg-dark.svg"); /* Extensiones FamVoIP */ --wa-bubble-ai: #2a1f5e; /* AI messages - deep purple */ --wa-bubble-agent: #172833; /* Human agent handoff - darker */ } /* ── Tipografía global WhatsApp ── */ html, body { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ── Scrollbar delgada tipo WhatsApp ── */ * { scrollbar-width: thin; scrollbar-color: var(--wa-border) transparent; } *::-webkit-scrollbar { width: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--wa-border); border-radius: 3px; } /* ── Fondo de patrón para área de chat ── */ .chat-pattern-bg { background-color: var(--wa-panel-secondary); background-image: var(--wa-chat-pattern); background-repeat: repeat; background-size: 400px; }