/* ============================================================================ onda-29-whatsapp.css — Aba "WhatsApp" (FASE 1.2 · REFINAMENTO VISUAL/UX) ============================================================================ Interface de atendimento estilo WhatsApp Web em 3 colunas, 100% mockada (markup no index.html, dados/estado em whatsapp.js). SÓ qualidade visual + UX — sem WhatsApp real, backend, websocket, banco, auth ou lógica de negócio. TEMA DA TELA ESCOPADO (data-wa-theme no .wa) -------------------------------------------------------------------------- TODAS as cores desta tela vivem em vars LOCAIS no `.wa` (--wa-*). O tema claro é o default; `.wa[data-wa-theme="dark"]` SÓ sobrescreve essas vars. NUNCA tocamos :root nem os tokens globais — o resto do painel segue no tema global da casa (data-theme no ). O bordô da marca (--color-primary) e a geometria/tipografia/motion (--gap-*, --radius-*, --fs-*, --ease-*…) saem dos tokens globais; o que muda entre claro/escuro são só as superfícies, textos, bordas e o verde-WhatsApp das bolhas — tudo via --wa-*. Componentes (espelham os blocos comentados no index.html / whatsapp.js): .wa-topbar / .wa-conn — header da tela + ConnectionStatus (pulso) .wa-board — grid de 3 colunas (cada uma rola sozinha) .wa-list / .wa-item / .wa-av — ConversationList + Item (4 estados + novo) .wa-chat / .wa-messages — ChatHeader + ChatMessages (agrupadas) .wa-bubble / .wa-date — MessageBubble (grupos) + pílula de data .wa-input — ChatInput (cápsula + enviar, placeholders) .wa-customer / .wa-card — CustomerPanel em CARDS + CustomerTags .wa-empty — empty states (sem seleção / busca vazia) Cascade: carrega depois dos tokens; escopo próprio em .wa-*, sem !important. ============================================================================ */ /* ============================================================================ 1) VARS LOCAIS — TEMA CLARO (default) Bordô da marca = --color-primary (#7A0F2E). Verde-WhatsApp = var local. ============================================================================ */ .wa { /* Superfícies */ --wa-bg: #FFFFFF; /* fundo geral das colunas (lista/header/painel) */ --wa-panel: #F8FAFC; /* superfície aninhada (cards do painel, inputs) */ --wa-chat-bg: #ECE5DC; /* fundo da área de mensagens (papel WhatsApp) */ --wa-chat-bg-2: #EFE7DE; /* 2º tom do gradiente suave do chat */ --wa-elevated: #FFFFFF; /* topo de pílula/balão recebido */ /* Texto */ --wa-text: #0F172A; /* texto principal (slate-900, ~17:1 sobre branco) */ --wa-text-muted: #41505F; /* legendas/preview/hora (~8:1, piso AAA hint) */ --wa-text-faint: #64748B; /* placeholders / micro-meta */ /* Bordas / divisores */ --wa-border: #E2E8F0; /* hairline divisor (slate-200) */ --wa-border-strong: #CBD5E1; /* borda de input/contorno visível (slate-300) */ /* Bolhas */ --wa-bubble-in: #FFFFFF; /* balão recebido (branco) */ --wa-bubble-in-tx: #111B21; --wa-bubble-out: #D9FDD3; /* balão enviado (verde-WhatsApp claro) */ --wa-bubble-out-tx: #102A1B; --wa-bubble-meta: #5A6B73; /* hora/legenda dentro do balão (AA sobre ambas) */ --wa-tail: var(--wa-bubble-in); /* cor do rabinho (igual à bolha) */ --wa-tail-out: var(--wa-bubble-out); /* Acento de marca + verde de conexão */ --wa-accent: var(--color-primary); /* bordô da marca */ --wa-accent-deep: var(--color-primary-deep, #5C0B22); --wa-accent-soft: rgba(122, 15, 46, 0.07); /* faixa do item selecionado */ --wa-accent-pill: rgba(122, 15, 46, 0.08); /* chip de tag */ --wa-accent-pill-bd:rgba(122, 15, 46, 0.22); --wa-wa-green: #25D366; /* verde "conectado"/badge */ --wa-conn-off: #94A3B8; /* dot desconectado (cinza) */ /* Estados da lista */ --wa-hover: rgba(15, 23, 42, 0.04); --wa-on-accent: #FFFFFF; /* texto sobre o bordô do topbar */ /* Pílula de data + sombras locais */ --wa-date-bg: rgba(255, 255, 255, 0.94); --wa-date-tx: #41505F; --wa-shadow-sm: 0 1px 1px rgba(15, 42, 50, 0.08); --wa-shadow-card: 0 1px 2px rgba(15, 42, 50, 0.05), 0 1px 3px rgba(15, 42, 50, 0.07); /* Focus ring local (bordô) */ --wa-focus: 0 0 0 3px rgba(122, 15, 46, 0.32); /* ---------------------------------------------------------------------- FASE 1.4 — vars SEMÂNTICAS da central (status/canal/setor/presença). Pares bg+texto pra contraste AA nos dois temas. (claro abaixo) ---------------------------------------------------------------------- */ /* StatusBadge */ --wa-st-aguardando-bg: #FEF3C7; --wa-st-aguardando-tx: #92590B; /* âmbar */ --wa-st-em_atendimento-bg: #DCFCE7; --wa-st-em_atendimento-tx: #166534; /* verde */ --wa-st-resolvida-bg: #DBEAFE; --wa-st-resolvida-tx: #1E40AF; /* azul */ --wa-st-encerrada-bg: #E2E8F0; --wa-st-encerrada-tx: #475569; /* cinza */ /* Canais / Setores (mesma paleta — o canal e o setor compartilham as cores) */ --wa-comercial: #2563EB; /* azul */ --wa-suporte: #0D9488; /* teal */ --wa-financeiro: #B45309; /* âmbar escuro */ --wa-posvenda: #7C3AED; /* violeta */ /* Presença do atendente */ --wa-pres-online: #22C55E; --wa-pres-ausente: #F59E0B; --wa-pres-offline: #94A3B8; /* ---------------------------------------------------------------------- FULL-BLEED (Gu): a tela ocupa a ÁREA DE CONTEÚDO INTEIRA (edge-to-edge), não parece mais uma "janela"/card. `fixed` abaixo do topnav ignora o padding/wrappers do .app-content. Sem borda/raio/sombra. Scroll vive DENTRO de cada coluna. (z-index baixo: topnav e seus menus ficam acima.) ---------------------------------------------------------------------- */ position: fixed; top: var(--topnav-h); left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; background: var(--wa-bg); overflow: hidden; color: var(--wa-text); } /* ============================================================================ 1b) VARS LOCAIS — TEMA ESCURO (só sobrescreve --wa-*, nada global) Contraste AA em ambos os temas. Verde-WhatsApp escuro nas bolhas enviadas. ============================================================================ */ .wa[data-wa-theme="dark"] { --wa-bg: #111B21; /* superfície geral escura (WhatsApp dark) */ --wa-panel: #1B2A33; /* card/painel aninhado */ /* busca no dark: tom integrado (estilo WhatsApp) + SEM borda clara (a borda forte fazia a cápsula "saltar" branca/destacada — Gu). */ --wa-search-bg: #202C33; --wa-search-bd: transparent; --wa-chat-bg: #0B141A; /* fundo do chat (mais escuro que a lista) */ --wa-chat-bg-2: #0E1820; --wa-elevated: #202C33; --wa-text: #E9EDEF; /* texto principal (~14:1 sobre #111B21) */ --wa-text-muted: #AEBAC1; /* legendas (~7:1) */ --wa-text-faint: #8696A0; --wa-border: rgba(233, 237, 239, 0.10); --wa-border-strong: rgba(233, 237, 239, 0.20); --wa-bubble-in: #202C33; /* recebido escuro */ --wa-bubble-in-tx: #E9EDEF; --wa-bubble-out: #144D37; /* enviado: verde-WhatsApp ESCURO */ --wa-bubble-out-tx: #E9EDEF; --wa-bubble-meta: #AEBAC1; --wa-tail: var(--wa-bubble-in); --wa-tail-out: var(--wa-bubble-out); /* No dark o acento de marca clareia um tom pra manter contraste/vivacidade */ --wa-accent: #D2647F; /* bordô claro (AA sobre superfícies escuras) */ --wa-accent-deep: #E08299; --wa-accent-soft: rgba(210, 100, 127, 0.16); --wa-accent-pill: rgba(210, 100, 127, 0.18); --wa-accent-pill-bd:rgba(210, 100, 127, 0.34); --wa-wa-green: #25D366; --wa-conn-off: #94A3B8; --wa-hover: rgba(255, 255, 255, 0.05); --wa-on-accent: #FFFFFF; --wa-date-bg: rgba(32, 44, 51, 0.92); --wa-date-tx: #C9D2D7; --wa-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.30); --wa-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36); --wa-focus: 0 0 0 3px rgba(210, 100, 127, 0.45); /* FASE 1.4 — vars semânticas no DARK (fundo translúcido + texto claro, AA). */ --wa-st-aguardando-bg: rgba(245, 158, 11, 0.20); --wa-st-aguardando-tx: #FCD34D; --wa-st-em_atendimento-bg: rgba(34, 197, 94, 0.20); --wa-st-em_atendimento-tx: #6EE7A8; --wa-st-resolvida-bg: rgba(59, 130, 246, 0.22); --wa-st-resolvida-tx: #93C5FD; --wa-st-encerrada-bg: rgba(148, 163, 184, 0.22); --wa-st-encerrada-tx: #CBD5E1; --wa-comercial: #60A5FA; --wa-suporte: #2DD4BF; --wa-financeiro: #FBBF24; --wa-posvenda: #A78BFA; --wa-pres-online: #4ADE80; --wa-pres-ausente: #FBBF24; --wa-pres-offline: #94A3B8; border-color: var(--wa-border); } /* ============================================================================ 2) ConnectionStatus + HEADER DA TELA (.wa-topbar) Header acompanha o TEMA (Gu): branco no claro, escuro no escuro. O avatar fica bordô como toque de marca; o resto usa as cores do tema. ============================================================================ */ .wa-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); padding: var(--gap-3) var(--gap-4); background: var(--wa-bg); color: var(--wa-text); border-bottom: 1px solid var(--wa-border); } .wa-topbar__canal { display: flex; align-items: center; gap: var(--gap-3); min-width: 0; } .wa-topbar__brand { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary); /* avatarzinho bordô = toque de marca */ color: #fff; } .wa-topbar__brand svg { display: block; } .wa-topbar__titulo { font-size: var(--fs-md); font-weight: 600; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-conn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--wa-hover); font-size: var(--fs-sm); font-weight: 500; color: var(--wa-text-muted); white-space: nowrap; } .wa-conn__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--wa-conn-off); /* desconectado (cinza) */ flex-shrink: 0; } .wa-conn.is-on .wa-conn__dot { background: var(--wa-wa-green); /* verde "conectado" */ } /* Pulso do dot (respeita prefers-reduced-motion lá embaixo). */ .wa-conn.is-on .wa-conn__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--wa-wa-green); opacity: 0.55; animation: wa-pulse 1.8s var(--ease-out) infinite; } @keyframes wa-pulse { 0% { transform: scale(0.7); opacity: 0.55; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } /* Ações do header (buscar / mais / toggle de tema) */ .wa-topbar__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; } .wa-topbar__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--wa-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .wa-topbar__btn svg { display: block; } .wa-topbar__btn:hover { background: var(--wa-hover); color: var(--wa-text); } .wa-topbar__btn:focus-visible { outline: none; box-shadow: var(--wa-focus); } /* O toggle troca o ícone via x-show; a transição é só o hover/feedback. */ /* ============================================================================ 3) BOARD — 3 colunas lado a lado, cada uma com scroll independente ============================================================================ */ .wa-board { flex: 1 1 auto; min-height: 0; /* permite que filhos rolem (não estoura) */ display: grid; grid-template-columns: 340px 1fr 320px; } /* Sem painel: a coluna direita some e o chat ocupa o espaço. */ .wa-board.is-no-panel { grid-template-columns: 340px 1fr; } /* ============================================================================ 4) ConversationList (coluna esquerda) ============================================================================ */ .wa-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--wa-border); background: var(--wa-bg); } .wa-list__search { flex: 0 0 auto; position: relative; display: flex; align-items: center; padding: var(--gap-3); border-bottom: 1px solid var(--wa-border); } .wa-list__search svg { position: absolute; left: calc(var(--gap-3) + 13px); top: 50%; transform: translateY(-50%); /* centra na vertical (faltava — ficava colado no topo) */ color: var(--wa-text-faint); pointer-events: none; } /* Especificidade alta de propósito: o painel tem uma regra GLOBAL `:root[data-theme="light"] input[type="text"]` (onda-8) que, sendo mais específica que `.wa-list__input` (1 classe), zerava o padding-left de 38px (texto colava embaixo da lupa). Este seletor (.wa-list__search .wa-list__input sob :root[...]) vence e restaura o padding pro ícone. */ :root[data-theme="light"] .wa-list__search .wa-list__input { width: 100%; height: 40px; padding: 0 14px 0 42px; /* 42px à esquerda: livra a lupa (right ~41px) */ border: 1px solid var(--wa-search-bd, var(--wa-border-strong)); border-radius: var(--radius-pill); background: var(--wa-search-bg, var(--wa-panel)); font-family: var(--font-sans); font-size: var(--fs-base); color: var(--wa-text); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .wa-list__input::placeholder { color: var(--wa-text-faint); } :root[data-theme="light"] .wa-list__search .wa-list__input:focus-visible { outline: none; border-color: var(--wa-accent); box-shadow: var(--wa-focus); } .wa-list__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* ---- ConversationItem ---- */ .wa-item { position: relative; display: flex; align-items: center; gap: var(--gap-3); width: 100%; padding: var(--gap-3) var(--gap-4); border: none; border-bottom: 1px solid var(--wa-border); /* separador hairline */ background: transparent; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } /* estado: hover */ .wa-item:hover { background: var(--wa-hover); } /* estado: selecionado — faixa bordô à esquerda + leve fundo */ .wa-item.is-active { background: var(--wa-accent-soft); } .wa-item.is-active::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--wa-accent); } .wa-item:focus-visible { outline: none; box-shadow: var(--wa-focus); z-index: 1; } .wa-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wa-item__row { display: flex; align-items: center; gap: var(--gap-2); } .wa-item__nome { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); font-weight: 500; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* estado: não-lido — nome em bold + preview mais forte */ .wa-item.is-unread .wa-item__nome { font-weight: 700; } .wa-item.is-unread .wa-item__preview { color: var(--wa-text); font-weight: 500; } .wa-item__hora { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--wa-text-muted); } .wa-item.is-unread .wa-item__hora { color: var(--wa-accent); font-weight: 600; } .wa-item__preview { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); color: var(--wa-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-item__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--wa-wa-green); /* badge não-lidas verde WhatsApp */ color: #06310F; font-size: var(--fs-sm); font-weight: 700; line-height: 1; } /* destaque "novo" — dot pulsante + label discreto na primeira linha */ .wa-item__novo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--wa-accent-pill); border: 1px solid var(--wa-accent-pill-bd); color: var(--wa-accent); font-size: 10px; font-weight: 700; letter-spacing: var(--ls-caps-loose); text-transform: uppercase; } .wa-item__novo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wa-accent); } /* ============================================================================ 5) Avatar (.wa-av) — iniciais em círculo colorido. Paleta de 8 cores. ============================================================================ */ .wa-av { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #FFFFFF; font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.02em; user-select: none; } .wa-av--lg { width: 40px; height: 40px; font-size: var(--fs-base); } .wa-av--xl { width: 88px; height: 88px; font-size: var(--fs-2xl); } .wa-av--0 { background: #6B7CCB; } .wa-av--1 { background: #C77B53; } .wa-av--2 { background: #4FA68C; } .wa-av--3 { background: #B5577F; } .wa-av--4 { background: #8E72C0; } .wa-av--5 { background: #C99846; } .wa-av--6 { background: #5390C2; } .wa-av--7 { background: #59A05A; } /* ============================================================================ 6) Chat (coluna central) — ChatHeader + ChatMessages + ChatInput ============================================================================ */ .wa-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; /* gradiente suave local (sem imagem externa) */ background: linear-gradient(160deg, var(--wa-chat-bg-2), var(--wa-chat-bg)); } .wa-chat__inner { display: flex; flex-direction: column; min-height: 0; height: 100%; } /* ---- ChatHeader ---- */ .wa-chat__header { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap-3); padding: var(--gap-3) var(--gap-4); background: var(--wa-bg); border-bottom: 1px solid var(--wa-border); } .wa-chat__back { display: none; /* só no mobile (≤768px) */ flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: var(--wa-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .wa-chat__back:hover { background: var(--wa-hover); } .wa-chat__back:focus-visible { outline: none; box-shadow: var(--wa-focus); } .wa-chat__meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wa-chat__nome { font-size: var(--fs-md); font-weight: 600; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-chat__status { font-size: var(--fs-sm); color: var(--wa-text-muted); } .wa-chat__info { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: var(--wa-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .wa-chat__info:hover { background: var(--wa-hover); color: var(--wa-text); } .wa-chat__info.is-on { color: var(--wa-accent); } .wa-chat__info:focus-visible { outline: none; box-shadow: var(--wa-focus); } /* ---- ChatMessages (rola sozinho) ---- */ .wa-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: var(--gap-4) var(--gap-6); } .wa-msg-wrap { display: flex; flex-direction: column; } /* ---- Separador de data (centralizado) ---- */ .wa-date { display: flex; justify-content: center; margin: var(--gap-3) 0; } .wa-date__pill { padding: 4px 12px; border-radius: var(--radius-md); background: var(--wa-date-bg); box-shadow: var(--wa-shadow-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--wa-date-tx); } /* ---- MessageBubble (recebida ESQ / enviada DIR) ---- */ .wa-bubble { position: relative; max-width: 65%; margin-bottom: 2px; /* gap apertado dentro do grupo */ padding: 6px 10px 5px; border-radius: 12px; box-shadow: var(--wa-shadow-sm); font-size: var(--fs-base); line-height: var(--lh-normal); word-wrap: break-word; } .wa-bubble--in { align-self: flex-start; background: var(--wa-bubble-in); color: var(--wa-bubble-in-tx); } .wa-bubble--out { align-self: flex-end; background: var(--wa-bubble-out); color: var(--wa-bubble-out-tx); } /* --- Agrupamento de bolhas (cantos + gap + rabinho) --- first → primeira do grupo: ganha o canto "vivo" do lado do remetente last → última do grupo: ganha rabinho + maior gap abaixo middle → arredondamento padrão e gap mínimo (classes setadas no markup via primeiraDoGrupo / ultimaDoGrupo) */ .wa-bubble--in.is-first { border-top-left-radius: var(--radius-xs); } .wa-bubble--out.is-first { border-top-right-radius: var(--radius-xs); } .wa-bubble.is-last { margin-bottom: var(--gap-3); } /* respiro entre grupos */ /* Rabinho só na última do grupo */ .wa-bubble.is-last::after { content: ""; position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; } .wa-bubble--in.is-last::after { left: -7px; border-width: 0 8px 8px 0; border-color: transparent var(--wa-tail) transparent transparent; } .wa-bubble--out.is-last::after { right: -7px; border-width: 0 0 8px 8px; border-color: transparent transparent transparent var(--wa-tail-out); } .wa-bubble__texto { display: block; white-space: pre-wrap; } .wa-bubble__hora { display: block; margin-top: 2px; text-align: right; font-size: var(--fs-sm); color: var(--wa-bubble-meta); } /* ---- ChatInput (rodapé: cápsula + enviar destacado, placeholders) ---- */ .wa-input { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap-2); padding: var(--gap-3) var(--gap-4); background: var(--wa-bg); border-top: 1px solid var(--wa-border); } .wa-input__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--wa-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .wa-input__icon:hover { background: var(--wa-hover); color: var(--wa-text); } /* Especificidade alta (como o input de busca): a regra global `:root[data-theme="light"] input[type="text"]` (onda-8) é mais específica que `.wa-input__field` e pintava o campo de BRANCO no dark. Este seletor vence e usa as vars locais (--wa-search-* compartilhadas: integra no dark, sem borda). */ :root[data-theme="light"] .wa-input .wa-input__field { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--wa-search-bd, var(--wa-border-strong)); border-radius: var(--radius-pill); background: var(--wa-search-bg, var(--wa-panel)); font-family: var(--font-sans); font-size: var(--fs-base); color: var(--wa-text); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .wa-input__field::placeholder { color: var(--wa-text-faint); } :root[data-theme="light"] .wa-input .wa-input__field:focus-visible { outline: none; border-color: var(--wa-accent); box-shadow: var(--wa-focus); } .wa-input__send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--color-primary); /* enviar = círculo bordô da marca */ color: var(--wa-on-accent); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .wa-input__send:hover { background: var(--color-primary-deep, #5C0B22); } .wa-input__send:active { transform: scale(0.94); } .wa-input__icon:focus-visible, .wa-input__send:focus-visible { outline: none; box-shadow: var(--wa-focus); } /* ============================================================================ 7) CustomerPanel (coluna direita) — ficha em CARDS + CustomerTags ============================================================================ */ .wa-customer { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--wa-border); background: var(--wa-bg); } .wa-customer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--gap-5) var(--gap-5) var(--gap-6); display: flex; flex-direction: column; gap: var(--gap-4); } .wa-customer__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: var(--gap-2); } .wa-customer__nome { margin: 4px 0 0; font-size: var(--fs-xl); font-weight: 600; color: var(--wa-text); } /* ---- Card de seção ---- */ .wa-card { padding: var(--gap-4); border: 1px solid var(--wa-border); border-radius: var(--radius-lg); background: var(--wa-panel); } .wa-card__title { display: block; margin: 0 0 var(--gap-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps-loose); text-transform: uppercase; color: var(--wa-text-muted); } .wa-card__rows { display: flex; flex-direction: column; gap: var(--gap-3); } .wa-field { display: flex; flex-direction: column; gap: 2px; } .wa-field__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps-loose); text-transform: uppercase; color: var(--wa-text-faint); } .wa-field__value { margin: 0; font-size: var(--fs-base); color: var(--wa-text); word-break: break-word; } /* ---- CustomerTags (chips) ---- */ .wa-tags { display: flex; flex-wrap: wrap; gap: var(--gap-2); } .wa-tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--wa-accent-pill); border: 1px solid var(--wa-accent-pill-bd); color: var(--wa-accent); font-size: var(--fs-sm); font-weight: 600; } /* ---- Observações (textarea mock) ---- */ .wa-customer__obs { width: 100%; min-height: 92px; padding: 10px 12px; border: 1px solid var(--wa-border-strong); border-radius: var(--radius-md); background: var(--wa-bg); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--wa-text); resize: vertical; } .wa-customer__obs::placeholder { color: var(--wa-text-faint); } .wa-customer__obs:focus-visible { outline: none; border-color: var(--wa-accent); box-shadow: var(--wa-focus); } /* ============================================================================ 8) EMPTY STATES — sem seleção (chat central) + busca vazia (lista) ============================================================================ */ .wa-empty { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--gap-3); padding: var(--gap-8) var(--gap-6); color: var(--wa-text-muted); } .wa-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--wa-hover); color: var(--wa-text-faint); } .wa-empty__icon svg { display: block; } .wa-empty__title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--wa-text); } .wa-empty__hint { margin: 0; font-size: var(--fs-base); color: var(--wa-text-muted); max-width: 32ch; } /* Empty da busca na lista (versão compacta) */ .wa-list__empty { display: flex; flex-direction: column; align-items: center; gap: var(--gap-2); padding: var(--gap-8) var(--gap-4); text-align: center; color: var(--wa-text-muted); } .wa-list__empty svg { color: var(--wa-text-faint); } .wa-list__empty p { margin: 0; font-size: var(--fs-base); } /* ============================================================================ 9) TOPNAV — ícone de marca do WhatsApp (preenchido, não traçado) O .topnav-tab__icon padrão usa stroke; o logo do WhatsApp é fill. Override local pra renderizar corretamente sem mexer no token global. ============================================================================ */ .topnav-tab__icon--brand { fill: currentColor; stroke: none; } /* ============================================================================ 10) RESPONSIVO ≤1024px (tablet): coluna direita controlada por painelAberto (.wa-board pode virar 2 colunas via .is-no-panel; quando aberta, vira overlay leve). ≤768px (mobile): estrutura de 1 coluna; vistaMobile alterna lista ↔ chat. ============================================================================ */ @media (max-width: 1024px) { /* No tablet, abrir o painel sobrepõe o chat ao invés de espremer 3 colunas. */ .wa-board { grid-template-columns: 320px 1fr; } .wa-board .wa-customer { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; z-index: 5; box-shadow: var(--wa-shadow-card); } .wa-board { position: relative; } /* Quando o JS não pediu painel, ele já não renderiza (x-show) → 2 colunas. */ } @media (max-width: 768px) { /* .wa é fixed (top/bottom já definem a altura — sem height aqui). */ .wa-board { grid-template-columns: 1fr; } /* Mobile = pilha de telas; o JS escolhe qual está em foco (vistaMobile). O markup aplica .is-mobile-lista / .is-mobile-chat no board pra alternar. */ .wa-board.is-mobile-lista .wa-chat, .wa-board.is-mobile-lista .wa-customer { display: none; } .wa-board.is-mobile-chat .wa-list { display: none; } .wa-board .wa-customer { width: 100%; } .wa-chat__back { display: inline-flex; } /* botão voltar aparece no mobile */ .wa-bubble { max-width: 82%; } } /* ============================================================================ 11) REDUCED MOTION — desliga o pulso/animações da tela (WCAG 2.3.3) (os tokens globais já zeram transitions; aqui matamos o keyframe do pulso) ============================================================================ */ @media (prefers-reduced-motion: reduce) { .wa-conn.is-on .wa-conn__dot::after { animation: none; opacity: 0; } .wa-input__send:active { transform: none; } } /* ============================================================================ 12) FASE 1.3 — ListCounters + ListFilters + OnlineDot + botão simular Tudo escopado em .wa-* sobre as MESMAS vars locais (claro+dark já cobertos). ============================================================================ */ /* ---- ListCounters (resumo dinâmico no topo da lista) ---- */ .wa-list__counters { flex: 0 0 auto; display: flex; gap: var(--gap-2); padding: var(--gap-3) var(--gap-3) 0; } .wa-counter { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: var(--gap-2) 4px; border: 1px solid var(--wa-border); border-radius: var(--radius-md); background: var(--wa-panel); text-align: center; } .wa-counter__num { font-size: var(--fs-md); font-weight: 700; line-height: 1; color: var(--wa-text); } .wa-counter__lbl { font-size: 10px; font-weight: 600; letter-spacing: var(--ls-caps-loose); text-transform: uppercase; color: var(--wa-text-faint); white-space: nowrap; } /* ---- ListFilters (chips, scroll horizontal se faltar largura) ---- */ .wa-list__filters { flex: 0 0 auto; display: flex; gap: 6px; padding: var(--gap-3); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--wa-border); } .wa-list__filters::-webkit-scrollbar { display: none; } .wa-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--wa-border-strong); border-radius: var(--radius-pill); background: var(--wa-bg); color: var(--wa-text-muted); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .wa-chip:hover { background: var(--wa-hover); } /* chip ativo = bordô da marca (sólido, texto sobre acento) */ .wa-chip.is-on { background: var(--wa-accent); border-color: var(--wa-accent); color: var(--wa-on-accent); } .wa-chip:focus-visible { outline: none; box-shadow: var(--wa-focus); } .wa-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--wa-accent-pill); color: var(--wa-accent); font-size: 11px; font-weight: 700; line-height: 1; } /* No chip ativo, o contador inverte pra ler sobre o bordô. */ .wa-chip.is-on .wa-chip__count { background: rgba(255, 255, 255, 0.22); color: var(--wa-on-accent); } /* ---- OnlineDot (avatar com indicador de presença mock) ---- */ .wa-av-wrap { position: relative; flex: 0 0 auto; display: inline-flex; } .wa-av__dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--wa-bg); /* anel pra destacar sobre o avatar */ box-sizing: border-box; } .wa-av__dot.is-online { background: var(--wa-wa-green); } .wa-av__dot.is-offline { background: var(--wa-conn-off); } /* dot maior no avatar XL do painel do cliente */ .wa-av__dot--xl { width: 16px; height: 16px; border-width: 3px; right: 4px; bottom: 4px; } /* No ChatHeader o avatar fica sobre o fundo claro (--wa-bg), anel já casa. */ /* ---- Botão "Adicionar mensagem simulada" (temporário, discreto) ---- */ .wa-input__simular { color: var(--wa-accent); } .wa-input__simular:hover { background: var(--wa-accent-soft); color: var(--wa-accent); } /* ============================================================================ 13) FASE 1.4 — CENTRAL DE ATENDIMENTO ChannelSelector · OperationalPanel · StatusBadge · ChannelChip · AgentStatus · AssignButton/TransferMenu/Encerrar/Reabrir · SystemEvent (timeline) · ResponsibleLine. Tudo escopado .wa-* sobre as MESMAS vars locais (claro+dark). ============================================================================ */ /* ---- ChannelSelector (topbar) ---- */ .wa-channel-select { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-right: var(--gap-2); padding: 0 8px 0 10px; height: 32px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.16); color: var(--wa-on-accent); } .wa-channel-select__icon { display: inline-flex; opacity: 0.9; } .wa-channel-select__field { appearance: none; border: none; background: transparent; color: var(--wa-on-accent); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; padding-right: 16px; cursor: pointer; /* seta custom (chevron branco) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; } .wa-channel-select__field:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); border-radius: var(--radius-sm); } /* opções herdam o tema do SO; forçamos texto legível */ .wa-channel-select__field option { color: #0F172A; background: #FFFFFF; } /* ---- OperationalPanel (4 contadores; herda .wa-list__counters) ---- */ .wa-oppanel .wa-counter--sem { border-color: var(--wa-st-aguardando-tx); } .wa-oppanel .wa-counter--andamento { border-color: var(--wa-st-em_atendimento-tx); } .wa-oppanel .wa-counter--encerrada { border-color: var(--wa-st-encerrada-tx); } .wa-oppanel .wa-counter--sem .wa-counter__num { color: var(--wa-st-aguardando-tx); } .wa-oppanel .wa-counter--andamento .wa-counter__num { color: var(--wa-st-em_atendimento-tx); } /* ---- StatusBadge ---- */ .wa-status { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; } .wa-status--aguardando { background: var(--wa-st-aguardando-bg); color: var(--wa-st-aguardando-tx); } .wa-status--em_atendimento { background: var(--wa-st-em_atendimento-bg); color: var(--wa-st-em_atendimento-tx); } .wa-status--resolvida { background: var(--wa-st-resolvida-bg); color: var(--wa-st-resolvida-tx); } .wa-status--encerrada { background: var(--wa-st-encerrada-bg); color: var(--wa-st-encerrada-tx); } /* ---- ChannelChip (item da lista + inline no header) ---- */ .wa-chan { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--wa-text-muted); white-space: nowrap; } .wa-chan__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--wa-comercial); } .wa-chan__dot--lg { width: 11px; height: 11px; } .wa-chan--comercial .wa-chan__dot, .wa-chan__dot.wa-chan--comercial { background: var(--wa-comercial); } .wa-chan--suporte .wa-chan__dot, .wa-chan__dot.wa-chan--suporte { background: var(--wa-suporte); } .wa-chan--financeiro .wa-chan__dot, .wa-chan__dot.wa-chan--financeiro { background: var(--wa-financeiro); } .wa-chan--posvenda .wa-chan__dot, .wa-chan__dot.wa-chan--posvenda { background: var(--wa-posvenda); } .wa-chan--inline { color: var(--wa-text-muted); } /* ---- Linha operacional no ConversationItem ---- */ .wa-item__ops { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; } .wa-item__ops .wa-chan__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-item__resp { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--wa-panel); border: 1px solid var(--wa-border-strong); font-size: 10px; font-weight: 700; color: var(--wa-text-muted); } /* ---- ChatHeader: nome + status + ResponsibleLine ---- */ .wa-chat__nome-row { display: flex; align-items: center; gap: var(--gap-2); min-width: 0; } .wa-chat__resp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); color: var(--wa-text-muted); } .wa-chat__sep { color: var(--wa-text-faint); } .wa-chat__semresp { color: var(--wa-st-aguardando-tx); font-weight: 600; } /* ---- Ações do header (AssignButton / Transferir / Encerrar / Reabrir) ---- */ .wa-chat__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; } .wa-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--wa-border-strong); border-radius: var(--radius-pill); background: var(--wa-bg); color: var(--wa-text-muted); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .wa-act svg { display: block; } .wa-act:hover { background: var(--wa-hover); color: var(--wa-text); } .wa-act:focus-visible { outline: none; box-shadow: var(--wa-focus); } /* AssignButton em destaque (bordô da marca) */ .wa-act--primary { background: var(--wa-accent); border-color: var(--wa-accent); color: var(--wa-on-accent); } .wa-act--primary:hover { background: var(--wa-accent-deep); border-color: var(--wa-accent-deep); color: var(--wa-on-accent); } /* ---- TransferMenu (popover) ---- */ .wa-transfer { position: relative; } .wa-transfer__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 264px; max-height: 360px; overflow-y: auto; padding: 6px; border: 1px solid var(--wa-border); border-radius: var(--radius-lg); background: var(--wa-bg); box-shadow: var(--wa-shadow-card); } .wa-transfer__group { margin: 6px 8px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps-loose); text-transform: uppercase; color: var(--wa-text-faint); } .wa-transfer__item { display: flex; align-items: center; gap: var(--gap-2); width: 100%; padding: 8px; border: none; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .wa-transfer__item:hover { background: var(--wa-hover); } .wa-transfer__item:focus-visible { outline: none; box-shadow: var(--wa-focus); } .wa-transfer__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .wa-transfer__nome { font-size: var(--fs-base); font-weight: 600; color: var(--wa-text); } .wa-transfer__meta { font-size: var(--fs-sm); color: var(--wa-text-muted); } .wa-av--xs { width: 30px; height: 30px; font-size: var(--fs-sm); } /* AgentStatus (dot de presença) */ .wa-pres { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--wa-pres-offline); } .wa-pres--online { background: var(--wa-pres-online); } .wa-pres--ausente { background: var(--wa-pres-ausente); } .wa-pres--offline { background: var(--wa-pres-offline); } /* ---- SystemEvent (pílula central da timeline operacional) ---- */ .wa-event { display: flex; justify-content: center; margin: var(--gap-2) 0; } .wa-event__pill { display: inline-flex; align-items: center; gap: 8px; max-width: 80%; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--wa-date-bg); border: 1px dashed var(--wa-border-strong); box-shadow: var(--wa-shadow-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--wa-date-tx); text-align: center; } .wa-event__hora { font-size: 11px; font-weight: 500; color: var(--wa-text-faint); flex: 0 0 auto; } /* leve dica de cor por tipo na borda esquerda da pílula */ .wa-event--assumiu { border-left: 3px solid var(--wa-st-em_atendimento-tx); } .wa-event--transferiu { border-left: 3px solid var(--wa-comercial); } .wa-event--encerrada { border-left: 3px solid var(--wa-st-encerrada-tx); } .wa-event--resolvida { border-left: 3px solid var(--wa-st-resolvida-tx); } .wa-event--reaberta { border-left: 3px solid var(--wa-st-aguardando-tx); } /* ---- Responsivo: no mobile/tablet, ações do header compactam (só ícones) ---- */ @media (max-width: 1024px) { .wa-act span:not(.sr-only) { display: none; } /* esconde rótulo, mantém ícone */ .wa-act { padding: 0 9px; } .wa-chat__resp { font-size: 11px; } } /* ============================================================================ 14) FASE FINAL — "SISTEMA VIVO" (100% mock) ConnectionStatus (sync) · LiveToggle · MessageStatus (ticks) · TypingIndicator · AudioMessage · MediaMessage (imagem/documento) · Toast · pulso de notificação. Tudo escopado .wa-* sobre as MESMAS vars locais (claro + dark já cobertos). Animações leves; todas desligadas em prefers-reduced-motion (§11 ampliado). ============================================================================ */ /* a .wa já é `position: fixed` (§1, full-bleed) — fixed também é containing block pros toasts `absolute` no canto inferior direito. (NÃO reapontar pra relative aqui: sobrescreveria o full-bleed.) */ /* ---- ConnectionStatus: rótulo de última sincronização ---- */ .wa-conn__sync { opacity: 0.82; font-weight: 400; white-space: nowrap; } /* em telas estreitas, esconde o "sincronizado" pra não estourar o topbar */ @media (max-width: 600px) { .wa-conn__sync { display: none; } } /* ---- LiveToggle (topbar) ---- */ .wa-live { display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-right: var(--gap-2); padding: 0 12px; border: 1px solid var(--wa-border-strong); border-radius: var(--radius-pill); background: var(--wa-hover); color: var(--wa-text); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .wa-live:hover { background: var(--wa-hover); border-color: var(--wa-accent); } .wa-live:focus-visible { outline: none; box-shadow: var(--wa-focus); } .wa-live__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wa-conn-off); /* pausado = cinza */ flex: 0 0 auto; position: relative; } .wa-live.is-on .wa-live__dot { background: var(--wa-wa-green); /* ao vivo = verde pulsante */ } .wa-live.is-on .wa-live__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--wa-wa-green); opacity: 0.5; animation: wa-pulse 1.8s var(--ease-out) infinite; } /* ---- ChatHeader: linha de status online / digitando ---- */ .wa-chat__status { font-size: var(--fs-sm); color: var(--wa-text-muted); line-height: 1.3; } .wa-chat__status.is-typing { color: var(--wa-st-em_atendimento-tx); /* verde discreto p/ "digitando…" */ font-weight: 600; } /* ---- MessageBubble: rodapé (hora + ticks) alinhados à direita ---- */ .wa-bubble__foot { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; } .wa-bubble__foot .wa-bubble__hora { margin-top: 0; } /* ---- MessageStatus (ticks de entrega) ---- */ .wa-ticks { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--wa-bubble-meta); /* cinza enviado/entregue */ } .wa-ticks svg { display: block; } .wa-ticks.is-lido { color: #34B7F1; } /* azul WhatsApp "lido" */ /* ---- TypingIndicator (bolha de 3 pontinhos no fim do chat) ---- */ .wa-typing { align-self: flex-start; margin: 2px 0 var(--gap-3); } .wa-typing__bubble { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 12px; border-top-left-radius: var(--radius-xs); background: var(--wa-bubble-in); box-shadow: var(--wa-shadow-sm); } .wa-typing__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-text-faint); animation: wa-typing 1.2s var(--ease-in-out, ease-in-out) infinite; } .wa-typing__dot:nth-child(2) { animation-delay: 0.18s; } .wa-typing__dot:nth-child(3) { animation-delay: 0.36s; } @keyframes wa-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } } /* ---- AudioMessage (player visual; não reproduz nada) ---- */ .wa-bubble--media { max-width: 320px; } .wa-audio { display: flex; align-items: center; gap: 10px; min-width: 180px; } .wa-audio__play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--wa-accent); color: var(--wa-on-accent); cursor: pointer; } .wa-audio__play:focus-visible { outline: none; box-shadow: var(--wa-focus); } .wa-audio__wave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 24px; } .wa-audio__wave i { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--wa-bubble-meta); opacity: 0.55; height: 30%; } /* alturas variadas (waveform fake estável, sem JS) */ .wa-audio__wave i:nth-child(3n) { height: 80%; opacity: 0.75; } .wa-audio__wave i:nth-child(4n+1) { height: 55%; } .wa-audio__wave i:nth-child(2n) { height: 95%; opacity: 0.8; } .wa-audio__wave i:nth-child(5n) { height: 40%; } .wa-audio__time { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--wa-bubble-meta); } /* ---- MediaMessage: imagem (thumb fake) + documento (card) ---- */ .wa-media { display: flex; flex-direction: column; gap: 6px; } .wa-media__thumb { width: 240px; max-width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12)); color: var(--wa-accent); } .wa[data-wa-theme="dark"] .wa-media__thumb { background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12)); } .wa-media__thumb--grafico { color: var(--wa-suporte); } .wa-media__thumb--receita { color: var(--wa-accent); background: #FAFAF5; } .wa[data-wa-theme="dark"] .wa-media__thumb--receita { background: rgba(255,255,255,0.10); } .wa-media__thumb svg { width: 100%; height: 100%; } .wa-media__meta { display: flex; align-items: baseline; gap: 8px; } .wa-media__nome { font-size: var(--fs-sm); font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-media__tam { font-size: 11px; color: var(--wa-bubble-meta); flex: 0 0 auto; } .wa-doc { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.05); } .wa[data-wa-theme="dark"] .wa-doc { background: rgba(255, 255, 255, 0.06); } .wa-doc__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: var(--wa-accent); color: var(--wa-on-accent); } .wa-doc__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wa-doc__nome { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-doc__tam { font-size: 11px; color: var(--wa-bubble-meta); } /* ---- Pulso de notificação no item da lista (realce breve) ---- */ .wa-item.is-pulse { animation: wa-item-pulse 1.2s var(--ease-out) 1; } @keyframes wa-item-pulse { 0% { background: var(--wa-accent-soft); } 100% { background: transparent; } } /* ---- Toast (notificação de nova mensagem; canto inferior direito) ---- */ .wa-toasts { position: absolute; right: var(--gap-4); bottom: var(--gap-4); z-index: 30; display: flex; flex-direction: column; gap: var(--gap-2); pointer-events: none; /* só os toasts capturam clique */ max-width: min(340px, calc(100% - var(--gap-6))); } .wa-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--wa-border); border-left: 3px solid var(--wa-wa-green); border-radius: var(--radius-md); background: var(--wa-bg); box-shadow: var(--wa-shadow-card); } .wa-toast__icon { flex: 0 0 auto; display: inline-flex; color: var(--wa-wa-green); margin-top: 1px; } .wa-toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .wa-toast__title { font-size: var(--fs-sm); font-weight: 700; color: var(--wa-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-toast__text { font-size: var(--fs-sm); color: var(--wa-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-toast__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; color: var(--wa-text-faint); cursor: pointer; } .wa-toast__close:hover { background: var(--wa-hover); color: var(--wa-text); } .wa-toast__close:focus-visible { outline: none; box-shadow: var(--wa-focus); } /* enviar desabilitado (sem texto) fica discreto */ .wa-input__send:disabled { opacity: 0.5; cursor: default; } .wa-input__send:disabled:hover { background: var(--color-primary); } /* ---- Reduced motion: desliga as animações novas ---- */ @media (prefers-reduced-motion: reduce) { .wa-live.is-on .wa-live__dot::after { animation: none; opacity: 0; } .wa-typing__dot { animation: none; opacity: 0.7; } .wa-item.is-pulse { animation: none; } } /* ============================================================================ FIM — onda-29-whatsapp.css ============================================================================ */