/* ============================================================ ROFIA — Camada de decoração de tema do agente (v9.2.0) Aplicada via classe `rofia-deco-` no (o loader JS adiciona). Tudo pointer-events:none. Cores vêm de variáveis CSS (:root) setadas pelo loader. Slugs permitidos (whitelist no backend): neve · bandeirinhas · verde_amarelo · confete · cop_kids ============================================================ */ /* base comum dos overlays */ .rofia-deco-neve::before, .rofia-deco-bandeirinhas::before, .rofia-deco-verde_amarelo::before, .rofia-deco-confete::before, .rofia-deco-cop_kids::before { content: ''; position: fixed; left: 0; right: 0; pointer-events: none; } /* ── Natal — neve caindo (overlay sutil sobre a tela) ── */ @keyframes rofia-snow { 0% { background-position: 0 -200px, 0 -120px, 0 -300px; } 100% { background-position: 0 100vh, 0 100vh, 0 100vh; } } .rofia-deco-neve::before { top: 0; height: 100vh; z-index: 2147483000; opacity: .55; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 120px 80px, #fff, transparent), radial-gradient(1.5px 1.5px at 220px 50px, #e8f4ff, transparent); background-size: 200px 220px, 180px 200px, 160px 240px; animation: rofia-snow 13s linear infinite; } /* ── Festa Junina — bandeirinhas no topo ── */ .rofia-deco-bandeirinhas { border-top: 3px solid #FFB703; } .rofia-deco-bandeirinhas::before { top: 0; height: 18px; z-index: 2147483000; opacity: .95; background: linear-gradient(135deg, transparent 49%, #E63946 50%) 0 0 / 18px 18px repeat-x, linear-gradient(45deg, transparent 49%, #2A9D8F 50%) 9px 0 / 18px 18px repeat-x; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } /* ── Brasil — faixa verde-amarela no topo (Copa / Olimpíadas / seleção) ── */ .rofia-deco-verde_amarelo::before { top: 0; height: 5px; z-index: 2147483000; opacity: 1; background: linear-gradient(90deg, #009C3B 0 40%, #FFDF00 40% 70%, #002776 70% 100%); } /* ── Confete (genérico/comemoração) ── */ @keyframes rofia-confete { 0% { background-position: 0 -120px, 60px -200px, 120px -80px; } 100% { background-position: 0 100vh, 60px 100vh, 120px 100vh; } } .rofia-deco-confete::before { top: 0; height: 100vh; z-index: 2147483000; opacity: .5; background-image: radial-gradient(3px 3px at 30px 40px, #ff5e5e, transparent), radial-gradient(3px 3px at 90px 120px, #5ec8ff, transparent), radial-gradient(3px 3px at 160px 80px, #ffd35e, transparent); background-size: 200px 260px, 220px 300px, 180px 240px; animation: rofia-confete 9s linear infinite; } /* ── COP Kids — "Tia Ana" / céu estrelado (espaço) — visível SOBRE o chat ── */ @keyframes rofia-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } .rofia-deco-cop_kids::before { top: 0; height: 100vh; z-index: 2147483000; opacity: .8; /* na FRENTE; pointer-events:none herdado */ background-image: radial-gradient(2px 2px at 24px 40px, #ffffff, transparent), radial-gradient(2.4px 2.4px at 130px 120px, #88d4ff, transparent), radial-gradient(2px 2px at 232px 210px, #fbbf24, transparent), radial-gradient(2.4px 2.4px at 80px 300px, #a78bfa, transparent), radial-gradient(1.5px 1.5px at 300px 90px, #ffffff, transparent), radial-gradient(1.5px 1.5px at 180px 360px, #7fdcff, transparent); background-size: 220px 300px; animation: rofia-twinkle 3s ease-in-out infinite; } /* ── COP Kids — astronautas TRANSPARENTES navegando pela TELA TODA (v9.4.1) ── #rofia-astro-layer é injetado pelo loader JS no , FIXO e atrás do conteúdo (z:-1) — mesmo padrão das estrelas do tema Colégio COP. Os PNGs têm fundo escuro → mix-blend:screen remove o fundo. Passam por CIMA do conteúdo (abaixo dos modais), como no visual original do Kids. Movimento por keyframes CSS (rofiaDrift1..4), sem JS por frame. */ #rofia-astro-layer { position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden; /* por CIMA de absolutamente TUDO (pointer-events:none = nenhum clique é bloqueado) */ } #rofia-astro-layer .rofia-astro { position: absolute; top: 0; left: 0; width: auto; transform-origin: center center; mix-blend-mode: screen; filter: drop-shadow(0 6px 16px rgba(56,200,240,.25)); will-change: transform; user-select: none; -webkit-user-drag: none; } #rofia-astro-layer .rofia-astro-1 { height: 150px; opacity: .4; animation: rofiaDrift1 65s linear infinite; } #rofia-astro-layer .rofia-astro-2 { height: 110px; opacity: .4; animation: rofiaDrift2 82s linear infinite; } #rofia-astro-layer .rofia-astro-3 { height: 170px; opacity: .4; animation: rofiaDrift3 92s linear infinite; } #rofia-astro-layer .rofia-astro-4 { height: 95px; opacity: .4; animation: rofiaDrift4 71s linear infinite; } @keyframes rofiaDrift1 { 0% { transform: translate(-8vw, 18vh) rotate(-12deg); } 50% { transform: translate(55vw, 8vh) rotate(14deg); } 100% { transform: translate(108vw, 22vh) rotate(-6deg); } } @keyframes rofiaDrift2 { 0% { transform: translate(108vw, 55vh) rotate(15deg); } 50% { transform: translate(45vw, 68vh) rotate(-18deg); } 100% { transform: translate(-12vw, 50vh) rotate(10deg); } } @keyframes rofiaDrift3 { 0% { transform: translate(-12vw, 82vh) rotate(6deg); } 50% { transform: translate(52vw, 90vh) rotate(24deg); } 100% { transform: translate(112vw, 78vh) rotate(-10deg); } } @keyframes rofiaDrift4 { 0% { transform: translate(112vw, 6vh) rotate(-18deg); } 50% { transform: translate(48vw, 32vh) rotate(15deg); } 100% { transform: translate(-10vw, 55vh) rotate(-8deg); } } @media (prefers-reduced-motion: reduce) { #rofia-astro-layer { display: none; } } /* conteúdo do chat sempre ACIMA dos astronautas */ /* conteúdo do chat sempre ACIMA dos astronautas */ .rofia-deco-cop_kids .chat-box > .chat-hdr, .rofia-deco-cop_kids .chat-box > .chat-msgs, .rofia-deco-cop_kids .chat-box > .chat-quick, .rofia-deco-cop_kids .chat-box > .chat-input, .rofia-deco-cop_kids .chat-box > .chat-compliance { position: relative; z-index: 1; } /* ── COP Kids — faixa aurora no cabeçalho do chat ── */ .chat-hdr.rofia-ck-hdr { position: relative; overflow: hidden; background: #05060f !important; } .chat-hdr.rofia-ck-hdr > .rofia-ck-wave { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; opacity: .72; mix-blend-mode: screen; pointer-events: none; z-index: 0; } .chat-hdr.rofia-ck-hdr > *:not(.rofia-ck-wave) { position: relative; z-index: 1; } /* v9.2.6.1 — legibilidade sobre a aurora: scrim escuro atrás do texto/pill (escuro nas pontas onde ficam o nome e a pill; claro no meio p/ a aurora aparecer) + sombra no texto + avatar/pill reforçados. O ::after fica ENTRE a wave (z0) e o conteúdo (z1). */ .chat-hdr.rofia-ck-hdr::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,6,15,.92) 0%, rgba(5,6,15,.72) 26%, rgba(5,6,15,.24) 52%, rgba(5,6,15,.46) 80%, rgba(5,6,15,.80) 100%); } .chat-hdr.rofia-ck-hdr .chat-hdr-name { text-shadow: 0 1px 5px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.8); } .chat-hdr.rofia-ck-hdr .chat-hdr-sub { color: #d6e4ff; text-shadow: 0 1px 4px rgba(0,0,0,.95); } .chat-hdr.rofia-ck-hdr .chat-av { box-shadow: 0 2px 12px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); } .chat-hdr.rofia-ck-hdr .online-pill { background: rgba(2,4,12,.72) !important; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 2px 10px rgba(0,0,0,.5); backdrop-filter: blur(3px); }