/* WhatsBot custom styles */ /* ── Theme tokens ───────────────────────────────────────────────── The Tailwind `wa-*` palette resolves to these CSS variables (channel triplets, so opacity modifiers like bg-wa-teal/10 keep working). Light is the default; adding `.dark` on swaps the whole app to dark mode. The toggle lives in the gear menu (app.js) and persists in localStorage. */ :root { color-scheme: light; --wa-teal: 0 128 105; --wa-tealDark: 0 168 132; --wa-bg: 255 255 255; --wa-panel: 240 242 245; --wa-chatBg: 239 234 226; --wa-chatOverlay: 209 215 219; --wa-outgoing: 217 253 211; --wa-incoming: 255 255 255; --wa-text: 17 27 33; --wa-secondary: 102 119 129; --wa-border: 233 237 239; --wa-inputBg: 255 255 255; --wa-hover: 245 246 246; --wa-selected: 240 242 245; --wa-badge: 37 211 102; --wa-icon: 84 101 111; --wa-iconActive: 0 128 105; } html.dark { color-scheme: dark; --wa-teal: 0 168 132; --wa-tealDark: 0 168 132; --wa-bg: 17 27 33; --wa-panel: 32 44 51; --wa-chatBg: 11 20 26; --wa-chatOverlay: 32 44 51; --wa-outgoing: 0 92 75; --wa-incoming: 32 44 51; --wa-text: 233 237 239; --wa-secondary: 142 158 168; --wa-border: 42 57 66; --wa-inputBg: 42 57 66; --wa-hover: 42 57 66; --wa-selected: 42 57 66; --wa-badge: 37 211 102; --wa-icon: 142 158 168; --wa-iconActive: 0 168 132; } /* Smooth transitions for status indicators */ .status-dot { transition: background-color 0.3s ease; } /* QR code image styling */ .qr-image { image-rendering: pixelated; } /* Pulse animation for loading states */ @keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; } /* ── WhatsApp Web replica styles ──────────────────────────────── */ /* Incoming message tail (left, white) */ .msg-tail-in { position: relative; } .msg-tail-in::before { content: ''; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-top: 8px solid rgb(var(--wa-incoming)); border-left: 8px solid transparent; } /* Outgoing message tail (right, light green) */ .msg-tail-out { position: relative; } .msg-tail-out::before { content: ''; position: absolute; top: 0; right: -8px; width: 0; height: 0; border-top: 8px solid rgb(var(--wa-outgoing)); border-right: 8px solid transparent; } /* Thin scrollbar like WhatsApp */ .wa-scrollbar::-webkit-scrollbar { width: 6px; } .wa-scrollbar::-webkit-scrollbar-track { background: transparent; } .wa-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; } .wa-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } html.dark .wa-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); } html.dark .wa-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } /* Contact row hover transition */ .wa-contact-row { transition: background-color 0.15s ease; } /* WhatsApp chat doodle background pattern */ .wa-chat-pattern { background-color: rgb(var(--wa-chatBg)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23c8c3ba' fill-opacity='0.2'%3E%3Cpath d='M20 15a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z'/%3E%3Cpath d='M80 45l-4 8h8l-4-8zm0 2l2.5 5h-5l2.5-5z'/%3E%3Crect x='140' y='15' width='8' height='10' rx='1' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Ccircle cx='200' cy='20' r='4' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M258 15l6 5-6 5V15zm1 1.8v6.4l4.3-3.2-4.3-3.2z'/%3E%3Cpath d='M20 75a6 6 0 014 2l-1 1a4.8 4.8 0 00-7 0l-1-1a6 6 0 014-2z'/%3E%3Cpath d='M78 80h4v1h-4v3h-1v-3h-4v-1h4v-4h1v4z'/%3E%3Cpath d='M135 75h10v1h-10v-1zm0 4h7v1h-7v-1z'/%3E%3Ccircle cx='200' cy='80' r='5' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M195 78l3 2 3-2v5l-3 2-3-2v-5z' fill='none' stroke='%23c8c3ba' stroke-opacity='0.15'/%3E%3Cpath d='M260 75c2 0 4 2 4 4s-2 4-4 4-4-2-4-4 2-4 4-4zm0 1.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5z'/%3E%3Cpath d='M17 135h6l-3 6-3-6zm3 1.5l-1.8 3.5h3.6l-1.8-3.5z'/%3E%3Cpath d='M80 135a4 4 0 110 8 4 4 0 010-8zm0 1.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z'/%3E%3Cpath d='M140 138h3v-3h1v3h3v1h-3v3h-1v-3h-3v-1z'/%3E%3Cpath d='M195 135h10v8h-10v-8zm1 1v6h8v-6h-8z'/%3E%3Ccircle cx='260' cy='140' r='3'/%3E%3Cpath d='M20 200l4-3v6l-4-3zm1 0l2 1.5v-3l-2 1.5z'/%3E%3Cpath d='M75 195h10v1h-10v-1zm2 3h6v1h-6v-1z'/%3E%3Cpath d='M140 197a3 3 0 110 6 3 3 0 010-6z'/%3E%3Cpath d='M197 195l3 5 3-5h-6zm3 1.5l1.8 3h-3.6l1.8-3z'/%3E%3Cpath d='M258 197c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M18 260h4v4h-4v-4zm.8.8v2.4h2.4v-2.4h-2.4z'/%3E%3Ccircle cx='80' cy='262' r='3.5' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M138 258l4 4 4-4' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M198 260a2 2 0 012 2c0 1.1-.9 2-2 2s-2-.9-2-2a2 2 0 012-2z'/%3E%3Cpath d='M256 258h8v6h-8v-6zm1 1v4h6v-4h-6z'/%3E%3C/g%3E%3C/svg%3E"); } /* WhatsApp bubble shadow */ .wa-bubble { box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); overflow-wrap: break-word; word-break: break-word; } /* Empty state background (WhatsApp's darker panel) */ .wa-empty-bg { background-color: rgb(var(--wa-panel)); border-left: 1px solid rgb(var(--wa-border)); } /* Slide-in from right animation for contact info panel */ @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } .animate-slide-in-right { animation: slide-in-right 0.25s ease-out; } /* Brief highlight band when a message is focused from a search result */ @keyframes wa-msg-flash { 0% { background-color: rgba(0, 168, 132, 0.32); } 70% { background-color: rgba(0, 168, 132, 0.32); } 100% { background-color: transparent; } } .wa-msg-highlight { border-radius: 8px; animation: wa-msg-flash 3s ease-out; } /* ── Dark-mode fallback for raw Tailwind color utilities ────────────────── Core components use the themed wa-* palette, but plugin screens — including ones we don't control and ones added in the future — may use raw utilities like bg-white / text-gray-* / border-gray-*. These scoped overrides re-theme those whenever has the `.dark` class, so ANY screen stays readable in dark mode automatically. They sit at higher specificity than the base utilities but use NO !important, so inline styles still win (e.g. the QR code keeps its white background). Accent colors (text-white, red/green/blue/amber, bg-black/ overlays) are intentionally left untouched. */ html.dark .bg-white { background-color: rgb(var(--wa-panel)); } html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: rgb(var(--wa-panel)); } html.dark .bg-gray-200, html.dark .bg-gray-300 { background-color: rgb(var(--wa-border)); } html.dark .hover\:bg-white:hover, html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-200:hover, html.dark .hover\:bg-gray-300:hover { background-color: rgb(var(--wa-hover)); } html.dark .text-gray-300, html.dark .text-gray-400, html.dark .text-gray-500, html.dark .text-gray-600 { color: rgb(var(--wa-secondary)); } html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900, html.dark .text-black { color: rgb(var(--wa-text)); } html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: rgb(var(--wa-border)); } html.dark .placeholder-gray-400::placeholder, html.dark .placeholder-gray-500::placeholder { color: rgb(var(--wa-secondary)); } /* Soft accent tints (bg-green-50, border-red-200, text-amber-700, …) used for selected / success / warning / error states stay LIGHT by default, so in dark mode they'd show themed light text over a near-white pill = unreadable. Re-tint them to a dark, translucent version of the same hue (so the card reads as a subtle colored-dark surface) and lift the paired accent text to a light shade. */ html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.14); } html.dark .border-green-100, html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.40); } html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800 { color: #86efac; } html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.14); } html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.40); } html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5; } html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.14); } html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.40); } html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; } html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.14); } html.dark .border-yellow-100, html.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.40); } html.dark .text-yellow-600, html.dark .text-yellow-700, html.dark .text-yellow-800 { color: #fde047; } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.14); } html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.40); } html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800 { color: #93c5fd; } html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.14); } html.dark .border-orange-100, html.dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.40); } html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74; } html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.14); } html.dark .border-purple-100, html.dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.40); } html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800 { color: #d8b4fe; } html.dark .bg-pink-50, html.dark .bg-pink-100 { background-color: rgba(236, 72, 153, 0.14); } html.dark .border-pink-100, html.dark .border-pink-200 { border-color: rgba(236, 72, 153, 0.40); } html.dark .text-pink-600, html.dark .text-pink-700, html.dark .text-pink-800 { color: #f9a8d4; } /* Form fields: fixed gray surface + black text, readable in both themes. A dedicated class so the dark utility overrides above never touch it. */ .wa-field { background-color: #e5e7eb; color: #000; } .wa-field::placeholder { color: #6b7280; } /* === Jugaad 19/07/2026: Juga (obrigada) como marca d'água do chat === Segunda camada de background sobre o doodle (a opacidade ~9% está embutida no PNG, então funciona no tema claro E escuro sem regra dark:). Centralizado, não repete, não rola com as mensagens. */ .wa-chat-pattern { background-image: url("/static/brand/sol-watermark-light.png"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23c8c3ba' fill-opacity='0.2'%3E%3Cpath d='M20 15a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z'/%3E%3Cpath d='M80 45l-4 8h8l-4-8zm0 2l2.5 5h-5l2.5-5z'/%3E%3Crect x='140' y='15' width='8' height='10' rx='1' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Ccircle cx='200' cy='20' r='4' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M258 15l6 5-6 5V15zm1 1.8v6.4l4.3-3.2-4.3-3.2z'/%3E%3Cpath d='M20 75a6 6 0 014 2l-1 1a4.8 4.8 0 00-7 0l-1-1a6 6 0 014-2z'/%3E%3Cpath d='M78 80h4v1h-4v3h-1v-3h-4v-1h4v-4h1v4z'/%3E%3Cpath d='M135 75h10v1h-10v-1zm0 4h7v1h-7v-1z'/%3E%3Ccircle cx='200' cy='80' r='5' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M195 78l3 2 3-2v5l-3 2-3-2v-5z' fill='none' stroke='%23c8c3ba' stroke-opacity='0.15'/%3E%3Cpath d='M260 75c2 0 4 2 4 4s-2 4-4 4-4-2-4-4 2-4 4-4zm0 1.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5z'/%3E%3Cpath d='M17 135h6l-3 6-3-6zm3 1.5l-1.8 3.5h3.6l-1.8-3.5z'/%3E%3Cpath d='M80 135a4 4 0 110 8 4 4 0 010-8zm0 1.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z'/%3E%3Cpath d='M140 138h3v-3h1v3h3v1h-3v3h-1v-3h-3v-1z'/%3E%3Cpath d='M195 135h10v8h-10v-8zm1 1v6h8v-6h-8z'/%3E%3Ccircle cx='260' cy='140' r='3'/%3E%3Cpath d='M20 200l4-3v6l-4-3zm1 0l2 1.5v-3l-2 1.5z'/%3E%3Cpath d='M75 195h10v1h-10v-1zm2 3h6v1h-6v-1z'/%3E%3Cpath d='M140 197a3 3 0 110 6 3 3 0 010-6z'/%3E%3Cpath d='M197 195l3 5 3-5h-6zm3 1.5l1.8 3h-3.6l1.8-3z'/%3E%3Cpath d='M258 197c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M18 260h4v4h-4v-4zm.8.8v2.4h2.4v-2.4h-2.4z'/%3E%3Ccircle cx='80' cy='262' r='3.5' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M138 258l4 4 4-4' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M198 260a2 2 0 012 2c0 1.1-.9 2-2 2s-2-.9-2-2a2 2 0 012-2z'/%3E%3Cpath d='M256 258h8v6h-8v-6zm1 1v4h6v-4h-6z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; background-position: center center, 0 0; background-size: min(52vh, 380px) auto, auto; } /* === Jugaad 21/07/2026 (spec UX mobile, Uma) — P2: marca d'água menor no mobile. Em ~390px o mascote a 380px preenchia quase toda a largura e competia com a leitura das bolhas. Aqui ele encolhe (~⅓ da largura) e desce pro rodapé. Só o tamanho/posição da 1ª camada muda; o doodle padrão fica intacto. */ @media (max-width: 640px) { .wa-chat-pattern { background-size: min(38vw, 150px) auto, auto; background-position: center 82%, 0 0; } } /* === Jugaad 21/07/2026 (spec UX mobile, Uma) — P1: safe-area (notch iPhone). Aplicadas no header (topo/notch) e no wrapper do composer (home indicator). No desktop env(safe-area-inset-*) é 0, então é inócuo. */ .jg-safe-top { padding-top: env(safe-area-inset-top); } .jg-safe-bottom { padding-bottom: env(safe-area-inset-bottom); } /* ============================================================ JUGAAD DESIGN SYSTEM v1 (blueprint docs/design/redesign/00-blueprint.md) F1 Fundação — tokens --jg-* (3 camadas) + átomos .jg-* Regra: --jg-* acompanha --wa-*, nunca substitui. Sem !important. ============================================================ */ :root { /* Camada 1 — primitivos da marca (consumir via semântico) */ --jg-laranja: #F26522; --jg-laranja-d: #D4551A; --jg-vermelho: #E4002B; --jg-amarelo: #F5E000; --jg-verde-500: #16a34a; --jg-ambar-600: #d97706; --jg-vermelho-600: #dc2626; --jg-azul-600: #2563eb; --jg-azul-400: #60a5fa; --jg-slate-600: #475569; /* Camada 2 — semânticos (claro) */ --jg-acao: var(--jg-laranja); --jg-acao-hover: var(--jg-laranja-d); --jg-marca-texto: var(--jg-vermelho); --jg-sucesso: var(--jg-verde-500); --jg-aviso: var(--jg-ambar-600); --jg-erro: var(--jg-vermelho-600); --jg-info: var(--jg-azul-600); --jg-offline: var(--jg-slate-600); --jg-scrim: rgba(15,23,42,.45); --jg-shadow-modal: 0 10px 40px rgba(0,0,0,.25); --jg-r-sm: 8px; --jg-r-md: 10px; --jg-r-lg: 14px; --jg-r-pill: 999px; --jg-space-1: 4px; --jg-space-2: 8px; --jg-space-3: 12px; --jg-fs-xs: 11px; --jg-fs-sm: 12.5px; --jg-fs-md: 13px; --jg-fs-lg: 16px; --jg-fs-xl: 18px; /* Camada 3 — componente (repetição provada no audit) */ --jg-btn-pad: 6px 12px; --jg-field-pad: 6px 10px; --jg-bubble-r: 12px; --jg-bubble-r-grupo: 4px; --jg-file-pdf: var(--jg-erro); --jg-file-sheet: var(--jg-sucesso); --jg-file-img: var(--jg-info); --jg-file-doc: var(--jg-offline); } html.dark { --jg-marca-texto: #FF4D6A; --jg-info: var(--jg-azul-400); --jg-scrim: rgba(0,0,0,.55); } /* Átomos .jg-* (BEM-lite). Consomem só a camada semântica. */ .jg-btn { border: 1px solid rgb(var(--wa-border)); border-radius: var(--jg-r-sm); padding: var(--jg-btn-pad); font-size: var(--jg-fs-sm); cursor: pointer; background: rgb(var(--wa-panel)); color: inherit; transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; } .jg-btn:hover { border-color: var(--jg-acao); } .jg-btn--pri { background: var(--jg-acao); border-color: var(--jg-acao); color: #fff; } .jg-btn--pri:hover { background: var(--jg-acao-hover); border-color: var(--jg-acao-hover); } .jg-btn--danger { background: var(--jg-erro); border-color: var(--jg-erro); color: #fff; } .jg-btn--ok { background: var(--jg-sucesso); border-color: var(--jg-sucesso); color: #fff; } .jg-btn:disabled { opacity: .5; cursor: default; } .jg-field { width: 100%; border: 1px solid rgb(var(--wa-border)); border-radius: var(--jg-r-sm); padding: var(--jg-field-pad); font-size: var(--jg-fs-md); background: rgb(var(--wa-panel)); color: inherit; box-sizing: border-box; } .jg-field:focus { outline: none; border-color: var(--jg-acao); } .jg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--jg-r-pill); font-size: var(--jg-fs-xs); font-weight: 600; white-space: nowrap; } .jg-badge--ok { color: var(--jg-sucesso); background: rgba(22,163,74,.12); background: color-mix(in srgb, var(--jg-sucesso) 12%, transparent); } .jg-badge--warn { color: var(--jg-aviso); background: rgba(217,119,6,.12); background: color-mix(in srgb, var(--jg-aviso) 12%, transparent); } .jg-badge--err { color: var(--jg-erro); background: rgba(220,38,38,.12); background: color-mix(in srgb, var(--jg-erro) 12%, transparent); } .jg-card { border: 1px solid rgb(var(--wa-border)); border-radius: var(--jg-r-lg); padding: var(--jg-space-3) 14px; background: rgb(var(--wa-bg)); } .jg-item { display: flex; align-items: center; gap: var(--jg-space-2); padding: var(--jg-space-2) var(--jg-space-3); border: 1px solid rgb(var(--wa-border)); border-radius: var(--jg-r-md); background: rgb(var(--wa-panel)); } .jg-modal { position: fixed; inset: 0; background: var(--jg-scrim); display: flex; align-items: center; justify-content: center; z-index: 60; } .jg-modal__box { background: rgb(var(--wa-panel)); border-radius: var(--jg-r-lg); padding: 18px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: var(--jg-shadow-modal); } .jg-empty { font-size: var(--jg-fs-sm); opacity: .55; padding: 4px 2px; } /* F2 — Chat premium (CSS-only sobre classes reais do vendor; DECISION-04) */ .wa-chat-pattern .wa-bubble { border-radius: var(--jg-bubble-r); } /* mídia sem moldura (WhatsApp 2026): imagens dentro da bolha arredondam junto */ .wa-chat-pattern .wa-bubble img { border-radius: calc(var(--jg-bubble-r) - 4px); } /* F4 — Polimento */ .jg-num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .jg-btn, .wa-chat-pattern * { transition: none; animation: none; } } /* Cabeçalho de página de plugin (revisão 19/07 — distribuição + mascote) */ .jg-pagehead { display:flex; align-items:center; gap:14px; border:1px solid rgb(var(--wa-border)); border-radius:var(--jg-r-lg); padding:12px 16px; background:rgba(242,101,34,.05); background:color-mix(in srgb, var(--jg-acao) 5%, transparent); } .jg-pagehead__art { width:64px; height:64px; object-fit:contain; flex:none; } .jg-pagehead__tx { display:flex; flex-direction:column; gap:2px; min-width:0; } .jg-pagehead__tx b { font-size:var(--jg-fs-xl); font-weight:600; } .jg-pagehead__tx span { font-size:var(--jg-fs-sm); opacity:.7; } .jg-hdr-art { width:56px; height:auto; object-fit:contain; flex:none; margin-left:auto; } @media (max-width:640px) { .jg-pagehead__art { width:48px; height:48px; } .jg-hdr-art { width:44px; } } @media (max-width:400px) { .jg-hdr-art { display:none; } .jg-pagehead__art { display:none; } } /* dark: Juga clareado e mais presente — à frente dos ícones do doodle */ html.dark .wa-chat-pattern { background-image: url("/static/brand/sol-watermark-dark.png"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23c8c3ba' fill-opacity='0.2'%3E%3Cpath d='M20 15a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z'/%3E%3Cpath d='M80 45l-4 8h8l-4-8zm0 2l2.5 5h-5l2.5-5z'/%3E%3Crect x='140' y='15' width='8' height='10' rx='1' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Ccircle cx='200' cy='20' r='4' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M258 15l6 5-6 5V15zm1 1.8v6.4l4.3-3.2-4.3-3.2z'/%3E%3Cpath d='M20 75a6 6 0 014 2l-1 1a4.8 4.8 0 00-7 0l-1-1a6 6 0 014-2z'/%3E%3Cpath d='M78 80h4v1h-4v3h-1v-3h-4v-1h4v-4h1v4z'/%3E%3Cpath d='M135 75h10v1h-10v-1zm0 4h7v1h-7v-1z'/%3E%3Ccircle cx='200' cy='80' r='5' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M195 78l3 2 3-2v5l-3 2-3-2v-5z' fill='none' stroke='%23c8c3ba' stroke-opacity='0.15'/%3E%3Cpath d='M260 75c2 0 4 2 4 4s-2 4-4 4-4-2-4-4 2-4 4-4zm0 1.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5z'/%3E%3Cpath d='M17 135h6l-3 6-3-6zm3 1.5l-1.8 3.5h3.6l-1.8-3.5z'/%3E%3Cpath d='M80 135a4 4 0 110 8 4 4 0 010-8zm0 1.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z'/%3E%3Cpath d='M140 138h3v-3h1v3h3v1h-3v3h-1v-3h-3v-1z'/%3E%3Cpath d='M195 135h10v8h-10v-8zm1 1v6h8v-6h-8z'/%3E%3Ccircle cx='260' cy='140' r='3'/%3E%3Cpath d='M20 200l4-3v6l-4-3zm1 0l2 1.5v-3l-2 1.5z'/%3E%3Cpath d='M75 195h10v1h-10v-1zm2 3h6v1h-6v-1z'/%3E%3Cpath d='M140 197a3 3 0 110 6 3 3 0 010-6z'/%3E%3Cpath d='M197 195l3 5 3-5h-6zm3 1.5l1.8 3h-3.6l1.8-3z'/%3E%3Cpath d='M258 197c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M18 260h4v4h-4v-4zm.8.8v2.4h2.4v-2.4h-2.4z'/%3E%3Ccircle cx='80' cy='262' r='3.5' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2'/%3E%3Cpath d='M138 258l4 4 4-4' fill='none' stroke='%23c8c3ba' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M198 260a2 2 0 012 2c0 1.1-.9 2-2 2s-2-.9-2-2a2 2 0 012-2z'/%3E%3Cpath d='M256 258h8v6h-8v-6zm1 1v4h6v-4h-6z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; background-position: center center, 0 0; background-size: min(52vh, 380px) auto, auto; } /* === Jugaad 21/07/2026: véu por atribuição na lista de conversas === Minhas conversas (assignee.isMe) e as atendidas pela IA mantêm a aparência atual. De OUTRO humano: semi-transparente com filete azul à esquerda. SEM atribuição: semi-transparente com filete âmbar. Hover devolve a leitura; a linha selecionada nunca é atenuada (regra aplicada no ContactList.js). */ .jg-assign-other { opacity: .55; box-shadow: inset 3px 0 0 0 rgba(59, 130, 246, .65); } .jg-assign-none { opacity: .55; box-shadow: inset 3px 0 0 0 rgba(217, 119, 6, .70); } .jg-assign-other:hover, .jg-assign-none:hover { opacity: .92; } html.dark .jg-assign-other { box-shadow: inset 3px 0 0 0 rgba(96, 165, 250, .60); } html.dark .jg-assign-none { box-shadow: inset 3px 0 0 0 rgba(251, 191, 36, .60); } /* === Jugaad 24/07/2026: estrela de comemoração no fechamento === Na operação da Jugaad a tag "CONTRATO Fazer" marca o cliente que ACABOU DE FECHAR (contrato a emitir) — é venda ganha. A linha ganha uma estrela dourada permanente; a animação toca só quando a linha aparece com a tag pela primeira vez naquela sessão, pra comemorar sem virar poluição visual na lista. */ @keyframes jg-star-pop { 0% { transform: scale(.2) rotate(-140deg); opacity: 0; } 55% { transform: scale(1.75) rotate(12deg); opacity: 1; } 75% { transform: scale(.92) rotate(-6deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes jg-star-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 197, 24, 0)); } 50% { filter: drop-shadow(0 0 7px rgba(245, 197, 24, .95)); } } .jg-star-pop { animation: jg-star-pop .85s cubic-bezier(.18, 1.5, .5, 1) both, jg-star-glow 1.5s ease-in-out .35s 2; transform-origin: center; } /* Linha do cliente que acabou de fechar: brilho dourado sutil que some ao passar o mouse, pra não atrapalhar a leitura do texto da conversa. */ .jg-fechou { background: linear-gradient(90deg, rgba(245, 197, 24, .13), transparent 62%); } .jg-fechou:hover { background: none; } html.dark .jg-fechou { background: linear-gradient(90deg, rgba(245, 197, 24, .10), transparent 62%); } /* Respeita quem pediu menos movimento no sistema. */ @media (prefers-reduced-motion: reduce) { .jg-star-pop { animation: none; } } /* === Jugaad 26/07/2026: 👁 "última mensagem foi da IA" === Fica na LISTA de conversas, ao lado do IA OFF: dá pra varrer a lista e ver onde a IA falou por último sem abrir cada conversa. Nasceu porque a operação ainda calibra os prompts da Flora/Hélio e essas respostas precisam de uma conferida humana. Quando a fase passar, remover `ultimaFoiIA` no ContactList.js (este CSS fica inerte sem a classe). */ .jg-revisar-lista { margin-left: 5px; font-size: 11px; line-height: 1; vertical-align: middle; cursor: default; opacity: .85; filter: drop-shadow(0 0 2px rgba(245, 158, 11, .55)); }