/* ══════════════════════════════════════════════════════════════════════════ 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; } /* ══════════════════════════════════════════════════════════════════════════ LUMINA MESSENGER 2.0 — META MESSENGER / WHATSAPP GLOBAL STANDARD ══════════════════════════════════════════════════════════════════════════ */ /* --- Główna karta modala (Responsive Dual-Pane) --- */ .lumina-messenger-modal-card { max-width: 1040px !important; width: 95% !important; height: 760px !important; max-height: 90vh !important; border-radius: 24px !important; background: #070d1e !important; border: 1.5px solid rgba(168, 85, 247, 0.35) !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(168, 85, 247, 0.15) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.3s ease !important; } /* --- Tryb Pełnoekranowy Centrum Rozmów LUMINA --- */ #directMessagesModal.is-fullscreen, div#directMessagesModal.is-fullscreen { padding: 0 !important; margin: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; align-items: stretch !important; justify-content: stretch !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #directMessagesModal.is-fullscreen .modal-card, #directMessagesModal .modal-card.is-fullscreen, div#directMessagesModal .lumina-messenger-modal-card.is-fullscreen, .lumina-messenger-modal-card.is-fullscreen { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; min-width: 100vw !important; min-height: 100vh !important; min-height: 100dvh !important; border-radius: 0 !important; border: none !important; position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; transform: none !important; z-index: 99999999 !important; box-shadow: none !important; } /* Przycisk fullscreen — widoczny na desktopie, ukryty na mobile */ .chat-fullscreen-btn, #directMessagesModal .chat-fullscreen-btn, #directMessagesModal button#btnChatFullscreen { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 !important; margin: 0 !important; flex: 0 0 36px !important; border-radius: 10px !important; border: 1px solid rgba(168, 85, 247, 0.35) !important; background: rgba(168, 85, 247, 0.12) !important; color: #c084fc !important; font-size: 0.95rem !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .chat-fullscreen-btn:hover, #directMessagesModal .chat-fullscreen-btn:hover, #directMessagesModal button#btnChatFullscreen:hover { background: rgba(168, 85, 247, 0.28) !important; border-color: rgba(192, 132, 252, 0.6) !important; color: #e9d5ff !important; } .chat-fullscreen-btn:active, #directMessagesModal .chat-fullscreen-btn:active, #directMessagesModal button#btnChatFullscreen:active { transform: scale(0.93) !important; } @media (max-width: 768px) { .chat-fullscreen-btn, #directMessagesModal .chat-fullscreen-btn, #directMessagesModal button#btnChatFullscreen { display: none !important; } } /* --- Układ dwukolumnowy (Dual-Pane) na desktopie --- */ .messenger-dual-pane-container { display: flex; flex-direction: row; flex: 1; min-height: 0; height: 100%; overflow: hidden; } .messenger-dual-pane-container[style*="display: none"], .messenger-dual-pane-container[style*="display:none"], .messenger-dual-pane-container.is-hidden { display: none !important; } /* Lewa kolumna: Inbox / Lista rozmów */ .messenger-inbox-column { width: 340px !important; min-width: 310px !important; max-width: 360px !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(11, 17, 32, 0.6) !important; display: flex; flex-direction: column; height: 100%; min-height: 0; flex-shrink: 0; } /* Prawa kolumna: Czat / Wątek rozmowy */ .messenger-chat-column { flex: 1; display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; background: rgba(7, 13, 30, 0.85); position: relative; } .messenger-inbox-column[style*="display: none"], .messenger-inbox-column[style*="display:none"], .messenger-chat-column[style*="display: none"], .messenger-chat-column[style*="display:none"] { display: none !important; } /* Stan powitalny (Empty State) gdy nie wybrano rozmowy na desktopie */ .messenger-placeholder-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; color: #94a3b8; } .messenger-placeholder-icon { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.2)); border: 2px solid rgba(168, 85, 247, 0.4); display: flex; align-items: center; justify-content: center; font-size: 2.3rem; color: #facc15; margin-bottom: 20px; box-shadow: 0 0 32px rgba(168, 85, 247, 0.35); animation: messengerFloat 3s ease-in-out infinite; } @keyframes messengerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* Styl dymków Meta Messenger / WhatsApp */ .fb-msg-bubble-me { background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important; color: #ffffff !important; border-radius: 18px 18px 4px 18px !important; box-shadow: 0 3px 12px rgba(168, 85, 247, 0.35) !important; max-width: 76% !important; padding: 9px 14px 6px 14px !important; position: relative !important; word-break: break-word !important; line-height: 1.45 !important; } .fb-msg-bubble-them { background: rgba(30, 41, 59, 0.92) !important; color: #f1f5f9 !important; border-radius: 18px 18px 18px 4px !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; max-width: 76% !important; padding: 9px 14px 6px 14px !important; position: relative !important; word-break: break-word !important; line-height: 1.45 !important; } /* Pasek statusu doręczenia (Meta/WhatsApp Checkmarks) */ .fb-msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 0.68rem; color: rgba(255, 255, 255, 0.7); margin-top: 4px; user-select: none; } .fb-check-single { color: rgba(255, 255, 255, 0.65); font-size: 0.75rem; } .fb-check-delivered { color: #38bdf8; font-size: 0.78rem; } .fb-check-read { color: #facc15; font-size: 0.78rem; text-shadow: 0 0 6px rgba(250, 204, 21, 0.6); } /* Szybki wybór Emoji (Messenger Emoji Picker) */ .messenger-quick-emojis-bar { display: none; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(15, 23, 42, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; scrollbar-width: none; } .messenger-quick-emojis-bar.open { display: flex; } .messenger-emoji-btn { background: none; border: none; font-size: 1.25rem; cursor: pointer; padding: 3px 6px; border-radius: 8px; transition: transform 0.15s, background 0.15s; } .messenger-emoji-btn:hover { transform: scale(1.25); background: rgba(255, 255, 255, 0.1); } /* Prośby o rozmowę — pierwszy kontakt pozostaje pod kontrolą odbiorcy. */ .lumina-message-requests { display: grid; gap: 8px; margin-bottom: 10px; } .lumina-message-requests-title { color: #f8d66d; font-size: 0.76rem; font-weight: 800; letter-spacing: .02em; } .lumina-message-request-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid rgba(250, 204, 21, .26); border-radius: 14px; background: linear-gradient(135deg, rgba(250, 204, 21, .11), rgba(168, 85, 247, .10)); } .lumina-message-request-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(250, 204, 21, .65); } .lumina-message-request-content { min-width: 0; } .lumina-message-request-content strong { display:block; color:#fff; font-size:.82rem; } .lumina-message-request-content p { margin:3px 0 0; color:#cbd5e1; font-size:.74rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .lumina-message-request-actions { grid-column:1 / -1; display:flex; gap:6px; } .lumina-message-request-actions button { min-height:36px; border-radius:10px; border:1px solid transparent; padding:0 10px; font:700 .72rem/1 inherit; cursor:pointer; } .lumina-message-request-actions .accept { background:#22c55e; color:#06230f; } .lumina-message-request-actions .decline { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#e2e8f0; } .lumina-message-request-actions .block { margin-left:auto; background:rgba(239,68,68,.13); border-color:rgba(239,68,68,.32); color:#fecaca; } /* ══════════════════════════════════════════════════════════════════════════ LUMINA MESSENGER — DEDICATED FULLSCREEN MOBILE ARCHITECTURE (< 768px) Globalny Standard Meta Messenger / WhatsApp: - 100% pełny ekran viewportu (100vw, 100dvh) bez marginesów i zaokrągleń - Rygorystyczna wzajemna wyłączność: widok listy (#dmListView) ALBO wątek (#dmChatRoomView) - Zero podwójnych list / nakładających się przycisków - Nagłówek czatu zintegrowany z przyciskiem powrotu (<-) - Pasek wiadomości rozciągliwy do pełnej wysokości, płynny scroll - Nowoczesny kompaktowy pasek wpisywania z okrągłym przyciskiem wysyłania (44x44px) ══════════════════════════════════════════════════════════════════════════ */ /* Root rule: messenger modals always sit above sticky navbars and banners */ #directMessagesModal.open, #publicChatModal.open { z-index: 20000000 !important; } @media (max-width: 768px) { /* Modal full screen */ #directMessagesModal.open, #publicChatModal.open { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; z-index: 20000000 !important; background: #070d1e !important; display: flex !important; flex-direction: column !important; } .lumina-messenger-modal-card { width: 100vw !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100dvh !important; border-radius: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; flex: 1 1 100% !important; background: #070d1e !important; } /* Dual-pane container: flex column occupying all remaining space */ #directMessagesModal .messenger-dual-pane-container, #messengerPrivateView .messenger-dual-pane-container { display: flex; flex-direction: column !important; flex: 1 1 0% !important; min-height: 0 !important; height: 100% !important; width: 100% !important; overflow: hidden !important; position: relative !important; } /* STAN 1: LISTA ROZMÓW (Inbox) — gdy czat NIE jest aktywny */ #directMessagesModal:not(.is-chat-active) #dmListView, #messengerPrivateView:not(.is-chat-active) #dmListView { display: flex !important; width: 100% !important; max-width: 100% !important; height: 100% !important; flex: 1 1 0% !important; border-right: none !important; min-height: 0 !important; } #directMessagesModal:not(.is-chat-active) #dmChatRoomView, #messengerPrivateView:not(.is-chat-active) #dmChatRoomView { display: none !important; } /* STAN 2: AKTYWNY CZAT 1:1 — 100% Pełny ekran konwersacji, Inbox całkowicie ukryty! */ #directMessagesModal.is-chat-active #dmListView, #messengerPrivateView.is-chat-active #dmListView { display: none !important; } #directMessagesModal.is-chat-active #dmChatRoomView, #messengerPrivateView.is-chat-active #dmChatRoomView { display: flex !important; width: 100% !important; height: 100% !important; flex: 1 1 0% !important; min-height: 0 !important; } /* W aktywnym czacie ukrywamy górny pasek zakładek modala (Centrum Rozmów LUMINA / Czat Ogólny / Sztab / Prywatne), ponieważ czat ma własny dedykowany pasek rozmówcy z przyciskiem Powrotu (<-) */ #directMessagesModal.is-chat-active > .modal-card > div:first-child, #directMessagesModal.is-chat-active .lumina-messenger-modal-card > div:first-child { display: none !important; } /* Pasek nagłówka czatu (Chat Header Bar) */ #directMessagesModal .chat-header-bar { padding: max(10px, env(safe-area-inset-top)) 14px 10px !important; background: rgba(11, 18, 38, 0.95) !important; backdrop-filter: blur(10px) !important; flex-shrink: 0 !important; } #directMessagesModal .chat-header-bar h3 { font-size: 0.95rem !important; } /* Przycisk powrotu do listy rozmów */ .messenger-back-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; color: #c084fc !important; font-size: 1.25rem !important; cursor: pointer !important; touch-action: manipulation !important; background: none !important; border: none !important; } .messenger-back-btn:active { transform: scale(0.92); } /* Aktywny kontener wątku rozmowy */ #directMessagesModal #dmActiveConversationBox { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; flex: 1 1 0% !important; } /* Obszar wiadomości: pełna dostępna wysokość, płynne przewijanie */ #directMessagesModal #activeChatMessagesBox, #directMessagesModal #publicChatMessagesBox, #directMessagesModal #commanderChatMessagesBox { flex: 1 1 0% !important; min-height: 0 !important; height: auto !important; padding: 12px 14px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth !important; } /* Pasek podpowiedzi (Smart Blessings Bar): pojedynczy przewijany poziomo wiersz bez zawijania */ #activeChatSmartBar, #publicChatSmartBar, .lumina-smart-bar-container, .chat-quick-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; gap: 6px !important; padding: 5px 10px !important; scrollbar-width: none !important; flex-shrink: 0 !important; background: rgba(7, 13, 30, 0.92) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } #activeChatSmartBar::-webkit-scrollbar, #publicChatSmartBar::-webkit-scrollbar, .lumina-smart-bar-container::-webkit-scrollbar, .chat-quick-bar::-webkit-scrollbar { display: none !important; } .smart-chip-btn, .smart-action-btn, .smart-cycle-btn, .chat-quick-bar button { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 0.72rem !important; padding: 4px 10px !important; border-radius: 12px !important; } /* Pasek wpisywania (Composer) — standard WhatsApp / Meta Messenger */ #directMessagesModal .chat-input-bar { padding: 6px 10px max(6px, env(safe-area-inset-bottom)) !important; gap: 8px !important; align-items: center !important; background: #090e1f !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; flex-shrink: 0 !important; z-index: 10 !important; } #directMessagesModal .chat-input-bar input { flex: 1 1 auto !important; min-height: 44px !important; height: 44px !important; padding: 0 16px !important; border-radius: 22px !important; font-size: 16px !important; /* 16px zapobiega automatycznemu zoomowaniu na iOS */ background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; outline: none !important; } /* Smukły, okrągły przycisk wysyłania (44x44px ikona) */ #directMessagesModal #btnActiveChatSubmit, #directMessagesModal #publicChatForm button[type="submit"], #directMessagesModal #commanderChatForm button[type="submit"] { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: linear-gradient(135deg, #ec4899, #8b5cf6) !important; border: none !important; box-shadow: 0 3px 12px rgba(236, 72, 153, 0.4) !important; } #directMessagesModal #btnActiveChatSubmit #btnActiveChatSubmitLabel, #directMessagesModal #publicChatForm button[type="submit"] span, #directMessagesModal #commanderChatForm button[type="submit"] span { display: none !important; } #directMessagesModal #btnActiveChatSubmit #btnActiveChatSubmitIcon, #directMessagesModal #btnActiveChatSubmit i, #directMessagesModal #publicChatForm button[type="submit"] i, #directMessagesModal #commanderChatForm button[type="submit"] i { display: inline-block !important; font-size: 1.05rem !important; color: #fff !important; margin: 0 !important; transform: translateX(1px) !important; } /* Dymki wiadomości */ #directMessagesModal .fb-msg-bubble-me, #directMessagesModal .fb-msg-bubble-them { max-width: 82% !important; font-size: 0.92rem !important; padding: 8px 13px !important; } /* Inbox padding */ #directMessagesModal #dmListView > div { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important; } #directMessagesModal #dmConversationsList { gap: 8px !important; } } @media (min-width: 769px) { .messenger-back-btn { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ LUMINA SCROLLBARS — Elegancki standard dopasowany do dark theme LUMINA Cienki (5px), gradient fioletowo-różowy, zaokrąglone — zero brzydkich domyślnych suwaków przeglądarki w obszarach czatu i listy rozmów. ══════════════════════════════════════════════════════════════════════════ */ /* Globalne własności scrollbara dla Firefox (scrollbar-width: thin + color) */ #dmConversationsList, #activeChatMessagesBox, #publicChatMessagesBox, #commanderChatMessagesBox, #activeChatMessagesContainer, .messenger-inbox-column, .messenger-chat-column, .lumina-chat-scroll, .dm-conversations-list { scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, 0.55) rgba(7, 13, 30, 0.4); } /* Webkit (Chrome, Safari, Edge, Android WebView) */ #dmConversationsList::-webkit-scrollbar, #activeChatMessagesBox::-webkit-scrollbar, #publicChatMessagesBox::-webkit-scrollbar, #commanderChatMessagesBox::-webkit-scrollbar, #activeChatMessagesContainer::-webkit-scrollbar, .messenger-inbox-column::-webkit-scrollbar, .messenger-chat-column::-webkit-scrollbar, .lumina-chat-scroll::-webkit-scrollbar, .dm-conversations-list::-webkit-scrollbar { width: 5px; height: 5px; } #dmConversationsList::-webkit-scrollbar-track, #activeChatMessagesBox::-webkit-scrollbar-track, #publicChatMessagesBox::-webkit-scrollbar-track, #commanderChatMessagesBox::-webkit-scrollbar-track, #activeChatMessagesContainer::-webkit-scrollbar-track, .messenger-inbox-column::-webkit-scrollbar-track, .messenger-chat-column::-webkit-scrollbar-track, .lumina-chat-scroll::-webkit-scrollbar-track, .dm-conversations-list::-webkit-scrollbar-track { background: rgba(7, 13, 30, 0.35); border-radius: 999px; } #dmConversationsList::-webkit-scrollbar-thumb, #activeChatMessagesBox::-webkit-scrollbar-thumb, #publicChatMessagesBox::-webkit-scrollbar-thumb, #commanderChatMessagesBox::-webkit-scrollbar-thumb, #activeChatMessagesContainer::-webkit-scrollbar-thumb, .messenger-inbox-column::-webkit-scrollbar-thumb, .messenger-chat-column::-webkit-scrollbar-thumb, .lumina-chat-scroll::-webkit-scrollbar-thumb, .dm-conversations-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a855f7 0%, #ec4899 100%); border-radius: 999px; min-height: 28px; } #dmConversationsList::-webkit-scrollbar-thumb:hover, #activeChatMessagesBox::-webkit-scrollbar-thumb:hover, #publicChatMessagesBox::-webkit-scrollbar-thumb:hover, #commanderChatMessagesBox::-webkit-scrollbar-thumb:hover, #activeChatMessagesContainer::-webkit-scrollbar-thumb:hover, .messenger-inbox-column::-webkit-scrollbar-thumb:hover, .messenger-chat-column::-webkit-scrollbar-thumb:hover, .lumina-chat-scroll::-webkit-scrollbar-thumb:hover, .dm-conversations-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #c084fc 0%, #f472b6 100%); } /* Filter-tabs poziomy scrollbar (Wszyscy / Rozmowy / Liderzy & Misja): Na mobile nie chcemy go widocznego — chcemy płynnego swipe'a bez suwaka */ #dmFilterTabsRow, .dm-filter-tabs, #dmFilterTabs { scrollbar-width: none; } #dmFilterTabsRow::-webkit-scrollbar, .dm-filter-tabs::-webkit-scrollbar, #dmFilterTabs::-webkit-scrollbar { display: none; } /* ══════════════════════════════════════════════════════════════════════════ SYNC-FAITH LOUNGE: WSPÓLNE SŁUCHANIE & OGLĄDANIE DLA DWOJGA (JOMA-D015) ══════════════════════════════════════════════════════════════════════════ */ .chat-header-sync-btn { background: linear-gradient(135deg, rgba(212, 169, 74, 0.18), rgba(245, 158, 11, 0.12)); border: 1.5px solid rgba(212, 169, 74, 0.45); color: #F5DC9A; border-radius: 12px; padding: 6px 12px; font-size: 0.78rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 36px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .chat-header-sync-btn:hover { background: linear-gradient(135deg, rgba(212, 169, 74, 0.3), rgba(245, 158, 11, 0.25)); border-color: #D4A94A; color: #fff; box-shadow: 0 0 14px rgba(212, 169, 74, 0.35); transform: translateY(-1px); } .chat-header-sync-btn.active { background: linear-gradient(135deg, #D4A94A, #B88D34); color: #0A0A0F; border-color: #F5DC9A; box-shadow: 0 0 18px rgba(212, 169, 74, 0.5); } .sync-faith-lounge-panel { display: none; flex-direction: column; background: linear-gradient(165deg, rgba(18, 18, 28, 0.96) 0%, rgba(10, 10, 15, 0.98) 100%); border-bottom: 1.5px solid rgba(212, 169, 74, 0.35); padding: 12px 14px; gap: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); position: relative; z-index: 15; animation: syncSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .sync-faith-lounge-panel.open { display: flex; } @keyframes syncSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .chat-header-profile-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1; border-radius: 12px; padding: 6px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 36px; transition: all 0.2s; } .chat-header-profile-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .chat-status-compact, .sync-status-compact { display: none; } @media (max-width: 640px) { .chat-status-full, .sync-status-full { display: none !important; } .chat-status-compact, .sync-status-compact { display: inline !important; } .chat-header-bar { padding: 8px 10px !important; gap: 6px !important; } .chat-header-user-info { gap: 6px !important; } .chat-header-avatar-wrap, .chat-header-avatar-wrap img { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } #activeChatName { font-size: 0.82rem !important; letter-spacing: -0.2px !important; } .chat-header-sync-text, .chat-header-profile-text { display: none !important; } .chat-header-sync-btn, .chat-header-profile-btn { padding: 0 !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 10px !important; } .sync-lounge-title-wrap { font-size: 0.76rem !important; } .sync-lounge-status-pill { font-size: 0.66rem !important; padding: 2px 6px !important; } } .sync-lounge-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sync-lounge-title-wrap { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 800; color: #F5DC9A; text-transform: uppercase; letter-spacing: 0.5px; } .sync-lounge-status-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); color: #4ade80; padding: 2px 8px; border-radius: 12px; font-size: 0.70rem; font-weight: 700; } .sync-lounge-close-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #94a3b8; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; transition: all 0.2s; flex-shrink: 0; } .sync-lounge-close-btn:hover { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; } .sync-lounge-tabs { display: flex; gap: 6px; background: rgba(255, 255, 255, 0.05); padding: 3px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); } .sync-lounge-tab { flex: 1; min-height: 32px; padding: 4px 10px; border-radius: 7px; border: none; background: transparent; color: #94a3b8; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .sync-lounge-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .sync-lounge-tab.active { background: linear-gradient(135deg, rgba(212, 169, 74, 0.3), rgba(245, 158, 11, 0.2)); border: 1px solid rgba(212, 169, 74, 0.5); color: #F5DC9A; font-weight: 800; box-shadow: 0 2px 8px rgba(212, 169, 74, 0.2); } .sync-player-card { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .sync-radio-wrap { display: flex; align-items: center; gap: 12px; } .sync-radio-cover { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; border-radius: 10px; object-fit: cover; border: 1.5px solid rgba(212, 169, 74, 0.35); flex-shrink: 0; } .sync-radio-info { flex: 1; min-width: 0; } .sync-radio-title { font-size: 0.85rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sync-radio-sub { font-size: 0.72rem; color: #94a3b8; } .sync-play-btn { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 50%; background: linear-gradient(135deg, #D4A94A, #B88D34); color: #0A0A0F; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: transform 0.18s, box-shadow 0.18s; box-shadow: 0 4px 12px rgba(212, 169, 74, 0.35); flex-shrink: 0; } .sync-play-btn:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(212, 169, 74, 0.5); } .sync-video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 220px; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid rgba(212, 169, 74, 0.25); } .sync-video-container iframe { width: 100%; height: 100%; border: none; display: block; } .sync-episode-select { width: 100%; background: rgba(10, 10, 18, 0.8); border: 1px solid rgba(212, 169, 74, 0.35); color: #F5DC9A; padding: 7px 10px; border-radius: 8px; font-size: 0.76rem; font-weight: 700; outline: none; cursor: pointer; } .sync-episode-select option { background: #0f172a; color: #fff; } .sync-faith-reactions-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; } .sync-faith-reactions-bar::-webkit-scrollbar { display: none; } .sync-faith-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; padding: 4px 10px; border-radius: 14px; font-size: 0.75rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: all 0.18s; } .sync-faith-btn:hover { background: rgba(212, 169, 74, 0.2); border-color: #D4A94A; color: #F5DC9A; transform: translateY(-1px); } /* ========================================================================== SYNC-FAITH LOUNGE: ADVANCED STREAM CONTROLS & PLACEHOLDERS (JOMA-STREAM-CTRL) ========================================================================== */ #btnSyncLoungeStopAll, .sync-lounge-stop-all-btn { background: rgba(239, 68, 68, 0.18) !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; color: #fca5a5 !important; font-family: var(--cc-font-sans, 'Manrope', 'Plus Jakarta Sans', sans-serif) !important; font-weight: 800 !important; font-size: 0.74rem !important; padding: 5px 12px !important; border-radius: 12px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: all 0.2s ease !important; line-height: 1.2 !important; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important; text-decoration: none !important; outline: none !important; flex-shrink: 0 !important; } #btnSyncLoungeStopAll:hover, .sync-lounge-stop-all-btn:hover { background: rgba(239, 68, 68, 0.32) !important; color: #fff !important; border-color: #ef4444 !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important; } #btnSyncLoungeStopAll:active, .sync-lounge-stop-all-btn:active { transform: scale(0.97) !important; } #btnSyncRadioStop, .sync-radio-stop-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 50% !important; background: rgba(239, 68, 68, 0.18) !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; color: #fca5a5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 0.82rem !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important; outline: none !important; } #btnSyncRadioStop:hover, .sync-radio-stop-btn:hover { background: rgba(239, 68, 68, 0.35) !important; color: #fff !important; border-color: #ef4444 !important; } .sync-stream-control-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 2px !important; flex-wrap: wrap !important; gap: 8px !important; } #btnSyncCourseToggle, #btnSyncTvToggle, .sync-stream-btn { font-family: var(--cc-font-sans, 'Manrope', 'Plus Jakarta Sans', sans-serif) !important; padding: 6px 14px !important; border-radius: 10px !important; font-size: 0.74rem !important; font-weight: 800 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: all 0.18s ease !important; line-height: 1.2 !important; text-decoration: none !important; outline: none !important; flex-shrink: 0 !important; } #btnSyncCourseToggle.danger, #btnSyncTvToggle.danger, .sync-stream-btn.danger { background: rgba(239, 68, 68, 0.18) !important; border: 1px solid rgba(239, 68, 68, 0.5) !important; color: #fca5a5 !important; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important; } #btnSyncCourseToggle.danger:hover, #btnSyncTvToggle.danger:hover, .sync-stream-btn.danger:hover { background: rgba(239, 68, 68, 0.32) !important; color: #fff !important; border-color: #ef4444 !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important; } #btnSyncCoursePause, #btnSyncTvMute, .sync-stream-btn.secondary { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #cbd5e1 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important; } #btnSyncCoursePause:hover, #btnSyncTvMute:hover, .sync-stream-btn.secondary:hover { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; border-color: rgba(212, 169, 74, 0.5) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } #btnSyncCourseToggle.play-state, #btnSyncTvToggle.play-state, .sync-stream-btn.play-state { background: linear-gradient(135deg, #D4A94A, #B88D34) !important; color: #0A0A0F !important; border: 1px solid #F5DC9A !important; box-shadow: 0 2px 10px rgba(212, 169, 74, 0.35) !important; } #btnSyncCourseToggle.play-state:hover, #btnSyncTvToggle.play-state:hover, .sync-stream-btn.play-state:hover { transform: translateY(-1px) !important; filter: brightness(1.1) !important; box-shadow: 0 4px 14px rgba(212, 169, 74, 0.5) !important; } .sync-stream-meta-status { display: inline-flex !important; align-items: center !important; gap: 6px !important; } .sync-pulse-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0 !important; } .sync-pulse-dot.green { background: #22c55e !important; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6) !important; } .sync-pulse-dot.red { background: #ef4444 !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important; } .sync-pulse-dot.gray { background: #64748b !important; } .sync-media-placeholder { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; max-height: 220px !important; border-radius: 10px !important; overflow: hidden !important; background: #000 !important; border: 1px solid rgba(212, 169, 74, 0.25) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } .sync-placeholder-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; filter: brightness(0.35) !important; transition: filter 0.2s !important; } .sync-media-placeholder:hover .sync-placeholder-img { filter: brightness(0.45) !important; } .sync-placeholder-overlay { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; padding: 10px !important; } .sync-placeholder-big-play { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: linear-gradient(135deg, #D4A94A, #B88D34) !important; color: #0A0A0F !important; border: none !important; font-size: 1.25rem !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 18px rgba(212, 169, 74, 0.5) !important; cursor: pointer !important; transition: transform 0.18s, filter 0.18s !important; } .sync-placeholder-big-play:hover { transform: scale(1.08) !important; filter: brightness(1.1) !important; } .sync-placeholder-badge { font-size: 0.72rem !important; font-weight: 800 !important; color: #F5DC9A !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .sync-placeholder-hint { font-size: 0.72rem !important; color: #e2e8f0 !important; } @media (max-width: 640px) { .sync-stop-all-text { display: none !important; } #btnSyncLoungeStopAll, .sync-lounge-stop-all-btn { padding: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 8px !important; justify-content: center !important; } }