/* ══════════════════════════════════════════════════════════════════════════ LUMINA CHAT PREMIUM — wygląd dymków, awatarów i wskaźnika pisania ══════════════════════════════════════════════════════════════════════════ Jeden plik, dołączany raz do każdej strony z czatem: Klasy tutaj są NOWE i opt-in — nie nadpisują istniejących stylów inline, więc można je wprowadzać stopniowo, bez ryzyka konfliktu z tym, co już działa (patrz historia: konflikt reguł CSS między plikami już raz kosztował tydzień naprawiania przycisków profilu — ten plik nie definiuje nic, co już istnieje gdzie indziej). ══════════════════════════════════════════════════════════════════════════ */ /* --- Wejście nowej wiadomości: delikatne pojawienie się, nie "wyskoczenie" --- */ @keyframes luminaMsgIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .lumina-msg-row { animation: luminaMsgIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); } /* --- Awatar z delikatną poświatą, spójny z tożsamością wizualną LUMINA --- */ .lumina-chat-avatar { transition: box-shadow 0.2s ease, transform 0.15s ease; } .lumina-chat-avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5), 0 0 14px rgba(139, 92, 246, 0.35); } /* --- Dymek premium: subtelne szkło zamiast płaskiego koloru --- */ .lumina-bubble-mine { background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(6, 182, 212, 0.9)); box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.15); } .lumina-bubble-theirs { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06); } /* --- Wskaźnik "X pisze…" --- */ .lumina-typing-indicator { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 0.76rem; color: #cbd5e1; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.2s ease, max-height 0.2s ease; } .lumina-typing-indicator.lumina-typing-visible { opacity: 1; max-height: 30px; } .lumina-typing-dots { display: inline-flex; gap: 3px; } .lumina-typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: #ec4899; animation: luminaTypingBounce 1.1s infinite ease-in-out; } .lumina-typing-dots span:nth-child(2) { animation-delay: 0.15s; } .lumina-typing-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes luminaTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } /* --- Pole wpisywania: delikatna poświata przy fokusie, czuje się "żywe" --- */ .lumina-chat-input-premium:focus { outline: none; border-color: rgba(236, 72, 153, 0.6) !important; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15); } /* --- Przycisk wysyłania: mikroanimacja przy kliknięciu --- */ .lumina-send-btn-premium { transition: transform 0.12s ease, box-shadow 0.12s ease; } .lumina-send-btn-premium:active { transform: scale(0.94); } .lumina-send-btn-premium:hover { box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4); } /* --- Podświetlenie wiadomości, do której skoczono (np. z powiadomienia) --- */ @keyframes luminaHighlightPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } 30% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.5); } } .chat-message-highlight { animation: luminaHighlightPulse 1.4s ease-in-out 2; }