/* CC-02b Wave 2 - extracted from FRONTEND/05_communication/messaging-hub.html */
.fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }

        .chat-container {
            height: calc(100vh - 10rem);
        }
        
        .conversation-list {
            height: calc(100vh - 14rem);
            overflow-y: auto;
        }
        
        .messages-area {
            height: calc(100vh - 20rem);
            overflow-y: auto;
        }
        
        .message-bubble {
            max-width: 70%;
            word-wrap: break-word;
        }
        
        .message-sent {
            background: linear-gradient(135deg, #f97316, #ea580c);
        }
        
        .message-received {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(249, 115, 22, 0.1));
            backdrop-filter: blur(0.625rem);
            border: 0.0625rem solid rgba(255, 255, 255, 0.1);
        }
        
        .conversation-item {
            transition: all 0.3s ease;
        }
        
        .conversation-item:hover {
            background-color: rgba(249, 115, 22, 0.1);
            transform: translateX(0.25rem);
        }
        
        .conversation-item.active {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(139, 92, 246, 0.2));
            border-left: 0.25rem solid #f97316;
        }
        
        .online-indicator {
            position: relative;
        }
        
        .online-indicator::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0.75rem;
            height: 0.75rem;
            background: #10b981;
            border: 0.125rem solid white;
            border-radius: 50%;
        }
        
        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            background: rgba(107, 114, 128, 0.1);
            border-radius: 1rem;
            margin: 0.5rem 0;
        }
        
        .typing-dots {
            display: flex;
            gap: 0.25rem;
        }
        
        .typing-dot {
            width: 0.5rem;
            height: 0.5rem;
            background: #6b7280;
            border-radius: 50%;
            animation: typingAnimation 1.4s infinite;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typingAnimation {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-0.5rem); }
        }
        
        .media-preview {
            border-radius: 0.5rem;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .media-preview:hover {
            transform: scale(1.05);
        }
        
        .emoji-picker {
            position: absolute;
            bottom: 4rem;
            right: 1rem;
            background: white;
            border: 0.0625rem solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1rem;
            box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.1);
            z-index: 50;
        }
        
        .dark .emoji-picker {
            background: #374151;
            border-color: #4b5563;
        }
        
        .family-badge {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            padding: 0.125rem 0.375rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .encryption-indicator {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }