/* ============================================================================ AEGIS THEME — camada visual do Chatwoot (Liquid Glass) ---------------------------------------------------------------------------- Injetada por vueapp.html.erb. NAO faz parte do bundle Vue: se algo aqui der errado, some a tag e o Chatwoot volta 100% ao original. DOUTRINA (por que nao e "retangulo branco com blur"): vidro e LENTE, nao filtro. Tem espessura, entao (1) desloca o que esta atras, (2) concentra luz na borda, (3) joga um especular que aponta pra fonte de luz, (4) separa cor de leve no angulo mais fechado. FONTE DE LUZ (uma so, o resto obedece): topo-esquerda, fria (~6200K), em 22% / -10% de cada painel. Borda voltada pra luz (topo/esquerda) = anel aceso; borda oposta (baixo/direita) = retorno fraco; interior = bloom suave. PILHA DE CAMADAS de .ag-glass (de tras pra frente — falta uma, cai a ilusao): 1. backdrop -> blur + saturate + brightness (o proprio elemento) 2. refracao -> deslocamento SVG, concentrado NA BORDA (::after) 3. tint -> corpo translucido com piso de opacidade 4. edge lens -> anel de borda com gradiente direcional (::after) 5. especular -> bloom interior + inset highlights (::before) 6. aberracao -> sussurro de magenta/ciano no anel 7. conteudo -> SEMPRE acima, nunca sofre as camadas opticas ORCAMENTO GPU: backdrop-filter = 1 passe cada. Teto de 4 na tela de conversa (cabecalho do chat, caixa de resposta, camada de popover, paleta de comando). Sidebar e lista NAO levam blur: nada passa por tras delas, seria passe pago por nada — ali a profundidade vem de gradiente + anel, que e de graca. ============================================================================ */ /* ---------------------------------------------------------------- 1. TOKENS */ html.ag-theme { /* posicao e temperatura da fonte de luz (tudo abaixo deriva daqui) */ --ag-lx: 22%; --ag-ly: -10%; --ag-light: 232 242 255; /* marca — mesma do Chatwoot, nao inventamos identidade nova */ --ag-brand: 39 129 246; --ag-brand-lift: 96 165 250; /* curvas de movimento */ --ag-spring: cubic-bezier(.22, 1.28, .36, 1); /* elastic ease (pop) */ --ag-glide: cubic-bezier(.32, .72, 0, 1); /* deslize sem overshoot */ --ag-fast: 160ms; --ag-med: 280ms; --ag-slow: 420ms; /* geometria — raio continuo (squircle-ish) e concentrico */ --ag-r-lg: 16px; --ag-r-md: 12px; --ag-r-sm: 8px; } /* ---- TEMA CLARO (padrao) — "Vellum Frost" -------------------------------- */ html.ag-theme { --ag-tint: 255 255 255; --ag-tint-a: .74; /* piso de opacidade: legibilidade > efeito */ --ag-rim-hi: 255 255 255; --ag-rim-hi-a: .95; --ag-rim-lo: 24 40 70; --ag-rim-lo-a: .10; --ag-bloom-a: .55; --ag-ink: 28 32 36; --ag-ink-soft: 96 100 108; --ag-sh-contact: 0 1px 1px rgb(20 35 60 / .08); --ag-sh-ambient: 0 4px 12px -2px rgb(20 35 60 / .10); --ag-sh-cast: 0 18px 40px -12px rgb(20 35 60 / .18); --ag-bubble-in: 255 255 255; --ag-bubble-in-a: .92; --ag-scroll: 24 40 70; --ag-scroll-a: .22; } /* ---- TEMA ESCURO — "Obsidian Translucence" ------------------------------- */ /* ATENCAO: o Chatwoot poe a classe .dark no , NAO no . A JS espelha isso em html.ag-dark pra permitir seletor de tema aqui. */ html.ag-theme.ag-dark { --ag-tint: 30 33 41; --ag-tint-a: .70; --ag-rim-hi: 190 214 255; --ag-rim-hi-a: .30; --ag-rim-lo: 120 150 200; --ag-rim-lo-a: .08; --ag-bloom-a: .40; --ag-ink: 237 238 240; --ag-ink-soft: 176 180 186; --ag-sh-contact: 0 1px 1px rgb(0 0 0 / .55); --ag-sh-ambient: 0 6px 16px -4px rgb(0 0 0 / .55); --ag-sh-cast: 0 22px 48px -16px rgb(0 0 0 / .70); --ag-bubble-in: 44 48 57; --ag-bubble-in-a: .96; --ag-scroll: 190 214 255; --ag-scroll-a: .20; } /* Legibilidade adaptativa nao-negociavel: se o usuario pediu menos transparencia, o vidro vira superficie opaca. Sem excecao. */ @media (prefers-reduced-transparency: reduce) { html.ag-theme { --ag-tint-a: 1; } html.ag-theme .ag-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* Mesma coisa quando o motor nao tem backdrop-filter: opaco, nunca "vidro sujo" */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.ag-theme { --ag-tint-a: 1; } } /* ------------------------------------------------- 2. PRIMITIVA .ag-glass */ html.ag-theme .ag-glass { position: relative; isolation: isolate; background: rgb(var(--ag-tint) / var(--ag-tint-a)); /* CAMADA 1 — backdrop. Declaracao simples PRIMEIRO: motor que nao entende a versao com url() cai aqui em vez de largar a propriedade inteira e renderizar zero vidro. */ -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.05); backdrop-filter: blur(22px) saturate(1.7) brightness(1.05); box-shadow: var(--ag-sh-contact), var(--ag-sh-ambient), var(--ag-sh-cast); transition: backdrop-filter var(--ag-med) var(--ag-glide), box-shadow var(--ag-med) var(--ag-glide); } /* CAMADA 5 — especular: bloom interior puxado pra fonte de luz + retorno fraco na borda oposta. mix-blend screen no escuro / soft-light no claro. */ html.ag-theme .ag-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 80% at var(--ag-lx) var(--ag-ly), rgb(var(--ag-light) / calc(var(--ag-bloom-a) * .30)) 0%, rgb(var(--ag-light) / 0) 60%), linear-gradient(to bottom, rgb(var(--ag-light) / calc(var(--ag-bloom-a) * .12)) 0%, rgb(var(--ag-light) / 0) 38%); mix-blend-mode: soft-light; opacity: 1; } html.ag-theme.ag-dark .ag-glass::before { mix-blend-mode: screen; } /* CAMADAS 2+4+6 — o anel. Aqui mora o vidro de verdade: - mask de duas camadas (content-box vs padding-box, composite exclude) deixa SO a borda, entao o backdrop-filter dela desloca so onde o caminho optico e mais longo — que e exatamente o que uma lente faz; - gradiente direcional: topo/esquerda aceso, baixo/direita retorno fraco; - aberracao cromatica no sussurro: se der pra NOMEAR a cor, ta forte demais. */ html.ag-theme .ag-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient( to bottom right, rgb(var(--ag-rim-hi) / var(--ag-rim-hi-a)) 0%, rgb(var(--ag-rim-hi) / calc(var(--ag-rim-hi-a) * .25)) 34%, rgb(var(--ag-rim-lo) / 0) 58%, rgb(var(--ag-rim-lo) / var(--ag-rim-lo-a)) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: 0 0 0 .5px rgb(255 0 200 / .035), 0 0 1.5px rgb(0 220 255 / .030); } /* CAMADA 2 (refracao) so entra em motor que suporta url() em backdrop-filter. Escrita DEPOIS da declaracao simples, de proposito. */ @supports (backdrop-filter: url(#ag-refract)) { html.ag-theme .ag-glass::after { -webkit-backdrop-filter: blur(1.5px) url(#ag-refract); backdrop-filter: blur(1.5px) url(#ag-refract); } } /* CAMADA 7 — conteudo sempre acima das opticas. Nunca desfocamos texto. */ html.ag-theme .ag-glass > * { position: relative; z-index: 1; } /* ---------------------------------------------------- 2b. PRIMITIVA .ag-card */ /* Mesma linguagem (tint+especular+anel+sombra em 3 niveis+motion elastico) MAS sem backdrop-filter — pra elementos que se REPETEM muito na tela (cards de Kanban/Follow-up: podem ser dezenas ao mesmo tempo, e cada backdrop-filter e um passe de GPU separado; nesse volume o orcamento do doc explode a toa). Tambem NAO define background/border — deixa o que o CSS do card ja define (a paleta de elevacao ja calibrada) e so soma luz+profundidade por cima. */ html.ag-theme .ag-card { position: relative; isolation: isolate; box-shadow: var(--ag-sh-contact), var(--ag-sh-ambient); transition: box-shadow var(--ag-med) var(--ag-glide), transform var(--ag-fast) var(--ag-spring); } html.ag-theme .ag-card:hover { box-shadow: var(--ag-sh-contact), var(--ag-sh-ambient), var(--ag-sh-cast); transform: translateY(-1px); } html.ag-theme .ag-card:active { transform: translateY(0) scale(.99); } html.ag-theme .ag-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 80% at var(--ag-lx) var(--ag-ly), rgb(var(--ag-light) / calc(var(--ag-bloom-a) * .22)) 0%, rgb(var(--ag-light) / 0) 62%); mix-blend-mode: soft-light; } html.ag-theme.ag-dark .ag-card::before { mix-blend-mode: screen; } html.ag-theme .ag-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(to bottom right, rgb(var(--ag-rim-hi) / var(--ag-rim-hi-a)) 0%, rgb(var(--ag-rim-hi) / calc(var(--ag-rim-hi-a) * .20)) 30%, rgb(var(--ag-rim-lo) / 0) 55%, rgb(var(--ag-rim-lo) / var(--ag-rim-lo-a)) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } html.ag-theme .ag-card > * { position: relative; z-index: 1; } /* -------------------------------------------- 3. CHROME: sidebar e colunas */ /* Sidebar: sem blur (nada passa atras). Profundidade por gradiente + anel. */ html.ag-theme aside.bg-n-background { background-image: linear-gradient( 165deg, rgb(var(--ag-light) / calc(var(--ag-bloom-a) * .10)) 0%, rgb(var(--ag-light) / 0) 42%); box-shadow: inset -1px 0 0 rgb(var(--ag-rim-lo) / var(--ag-rim-lo-a)), var(--ag-sh-ambient); } /* Itens do menu: alvo maior, estado ativo obvio, resposta elastica ao clique */ html.ag-theme aside nav a, html.ag-theme aside nav button { border-radius: var(--ag-r-md); transition: background-color var(--ag-fast) var(--ag-glide), transform var(--ag-fast) var(--ag-spring), box-shadow var(--ag-fast) var(--ag-glide); } html.ag-theme aside nav a:active, html.ag-theme aside nav button:active { transform: scale(.97); } html.ag-theme aside nav a:hover { box-shadow: inset 0 0 0 1px rgb(var(--ag-rim-hi) / calc(var(--ag-rim-hi-a) * .35)); } /* Coluna da lista: separacao clara das colunas vizinhas */ html.ag-theme .conversations-list-wrap { box-shadow: inset -1px 0 0 rgb(var(--ag-rim-lo) / var(--ag-rim-lo-a)); } /* ------------------------------------------ 4. LISTA DE CONVERSAS (usabilidade) */ /* Queixa real: nao da pra saber de bate-pronto qual conversa esta aberta. */ html.ag-theme .conversation { border-radius: var(--ag-r-md); margin: 2px 6px; padding-left: 10px !important; padding-right: 10px !important; border-bottom: 0 !important; transition: background-color var(--ag-fast) var(--ag-glide), transform var(--ag-fast) var(--ag-spring), box-shadow var(--ag-med) var(--ag-glide); } html.ag-theme .conversation:hover { transform: translateX(2px); box-shadow: var(--ag-sh-contact), var(--ag-sh-ambient); } html.ag-theme .conversation::before { display: none !important; } /* Ativa: barra de acento + elevacao. Impossivel confundir. */ html.ag-theme .conversation.active, html.ag-theme .conversation[class*="bg-n-alpha-2"], html.ag-theme .conversation.ag-active { background: linear-gradient( 100deg, rgb(var(--ag-brand) / .16) 0%, rgb(var(--ag-brand) / .05) 45%, transparent 100%) !important; box-shadow: inset 3px 0 0 rgb(var(--ag-brand)), inset 0 0 0 1px rgb(var(--ag-brand) / .22), var(--ag-sh-ambient); } /* Nao lida: peso visual de verdade */ html.ag-theme .conversation .conversation--user { letter-spacing: -.005em; } /* Anel de canal no avatar — cor por canal (WhatsApp verde, Instagram rosa, e-mail azul...), setada via --ag-ring pelo JS (renderChannelRings). Gap contra o proprio avatar pra nao brigar com a foto (mesmo padrao do "anel de story" que todo mundo ja reconhece). */ html.ag-theme .ag-ring { box-shadow: 0 0 0 2px rgb(var(--ag-tint)), 0 0 0 3.5px var(--ag-ring, transparent); } /* ------------------------------------------------------ 5. PAINEL DE MENSAGENS */ html.ag-theme .conversation-panel { /* respiro pro cabecalho de vidro que agora flutua por cima. A altura real vem da JS (o cabecalho e 96px abaixo de xl e 48px acima) — chutar 60px fixo escondia mensagem em tela estreita. */ padding-top: calc(var(--ag-header-h, 48px) + 14px); scroll-padding-top: calc(var(--ag-header-h, 48px) + 26px); background-image: radial-gradient( 100% 55% at 50% 0%, rgb(var(--ag-light) / calc(var(--ag-bloom-a) * .05)) 0%, transparent 70%); } /* Cabecalho do chat vira VIDRO DE VERDADE: as mensagens correm por tras dele. Sem sobreposicao real, blur em cima de cor chapada e so plastico fosco. */ html.ag-theme .conversation-details-wrap > div:first-child { position: absolute; top: 0; left: 0; right: 0; z-index: 20; border-bottom: 0 !important; border-radius: 0 0 var(--ag-r-lg) var(--ag-r-lg); /* o Chatwoot nativo trava essa altura em h-12/xl:h-12 (48/96px) — sem espaco pra nenhuma faixa de chip extra (Instagram/janela do WhatsApp/ resumo do cliente). Sem soltar isso, o conteudo extra "vaza" por cima das mensagens em vez de empurrar o cabecalho pra baixo (achado ao vivo: os chips apareciam boiando sobre a conversa). */ height: auto !important; min-height: 48px; flex-wrap: wrap; } /* ---- Bolhas ---- */ html.ag-theme .message-bubble-container { animation: ag-arrive var(--ag-slow) var(--ag-glide) both; } /* Dissolucao gaussiana: entra POR DESFOQUE, nao por opacity seca */ @keyframes ag-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } html.ag-theme [data-bubble-name] { border-radius: var(--ag-r-lg) !important; box-shadow: var(--ag-sh-contact), var(--ag-sh-ambient); transition: box-shadow var(--ag-med) var(--ag-glide), transform var(--ag-med) var(--ag-spring); } html.ag-theme .message-bubble-container:hover [data-bubble-name] { box-shadow: var(--ag-sh-contact), var(--ag-sh-ambient), var(--ag-sh-cast); } /* Recebida (esquerda) — corpo neutro com anel superior aceso */ html.ag-theme .left-bubble { background: rgb(var(--ag-bubble-in) / var(--ag-bubble-in-a)) !important; border-bottom-left-radius: var(--ag-r-sm) !important; box-shadow: inset 0 1px 0 rgb(var(--ag-rim-hi) / calc(var(--ag-rim-hi-a) * .40)), var(--ag-sh-contact), var(--ag-sh-ambient); } /* Enviada (direita) — a identidade da marca vive aqui. O azul chapado do Chatwoot no escuro (15 57 102) sumia no fundo; gradiente + anel resolvem. */ html.ag-theme .right-bubble { background: linear-gradient( 155deg, rgb(var(--ag-brand-lift) / .95) 0%, rgb(var(--ag-brand) / .98) 55%, rgb(var(--ag-brand) / 1) 100%) !important; color: #fff !important; border-bottom-right-radius: var(--ag-r-sm) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(0 0 0 / .10), 0 1px 1px rgb(var(--ag-brand) / .30), 0 6px 18px -6px rgb(var(--ag-brand) / .45); } html.ag-theme .right-bubble, html.ag-theme .right-bubble * { color: #fff !important; } html.ag-theme .right-bubble a { text-decoration: underline; text-underline-offset: 2px; } /* Falha de envio continua gritando — mas com acabamento */ html.ag-theme [data-bubble-name].bg-n-ruby-4, html.ag-theme .message-bubble-container .bg-n-ruby-4 { box-shadow: inset 0 0 0 1px rgb(229 70 102 / .45), var(--ag-sh-ambient) !important; } /* Retry de mensagem com falha: nativo era um triangulo/icone de 20px quase invisible do lado de "Falha ao enviar". Vira pilula com rotulo — sem precisar de JS, e um