/* CC-02b Wave 2 - extracted from FRONTEND/05_communication/communication-analytics.html */
.glassmorphism {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(0.625rem);
            border: 0.0625rem solid rgba(255, 255, 255, 0.2);
        }
        
        .dark .glassmorphism {
            background: rgba(0, 0, 0, 0.3);
            border: 0.0625rem solid rgba(255, 255, 255, 0.1);
        }
        
        .comm-card {
            transition: all 0.3s ease;
        }
        
        .comm-card:hover {
            transform: translateY(-0.125rem);
            box-shadow: 0 1.25rem 2.5rem -0.75rem rgba(16, 185, 129, 0.25);
        }
        
        .message-bubble {
            position: relative;
            padding: 0.75rem 1rem;
            border-radius: 1rem;
            margin-bottom: 0.5rem;
            max-width: 18.75rem;
        }
        
        .message-sent {
            background: linear-gradient(135deg, #8B5CF6, #A78BFA);
            color: white;
            margin-left: auto;
        }
        
        .message-received {
            background: linear-gradient(135deg, #10B981, #34D399);
            color: white;
        }
        
        .message-bubble::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 0.375rem solid transparent;
        }
        
        .message-sent::before {
            right: -0.375rem;
            top: 0.75rem;
            border-left-color: #8B5CF6;
        }
        
        .message-received::before {
            left: -0.375rem;
            top: 0.75rem;
            border-right-color: #10B981;
        }
        
        @keyframes message-flow {
            from { opacity: 0; transform: translateY(1.25rem); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .message-animate {
            animation: message-flow 0.5s ease-out;
        }
        
        @keyframes typing-dots {
            0%, 20% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        
        .typing-indicator {
            display: inline-block;
            animation: typing-dots 1.4s infinite;
        }
        
        .typing-indicator:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator:nth-child(3) { animation-delay: 0.4s; }
        
        .sentiment-positive { background: linear-gradient(135deg, #10B981, #34D399); }
        .sentiment-neutral { background: linear-gradient(135deg, #6B7280, #9CA3AF); }
        .sentiment-negative { background: linear-gradient(135deg, #EF4444, #F87171); }
        
        .communication-flow {
            position: relative;
        }
        
        .communication-flow::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 0.125rem;
            background: linear-gradient(to bottom, #8B5CF6, #10B981);
            transform: translateX(-50%);
        }
        
        .flow-step {
            position: relative;
            background: white;
            border: 0.125rem solid #E5E7EB;
            border-radius: 0.75rem;
            padding: 1rem;
            margin-bottom: 1rem;
            margin-left: 1.5rem;
            margin-right: 1.5rem;
        }
        
        .dark .flow-step {
            background: #374151;
            border-color: #4B5563;
        }
        
        .flow-step::before {
            content: '';
            position: absolute;
            left: -1.625rem;
            top: 50%;
            width: 0.75rem;
            height: 0.75rem;
            background: #8B5CF6;
            border: 0.125rem solid white;
            border-radius: 50%;
            transform: translateY(-50%);
        }
        
        .response-time-excellent { color: #10B981; }
        .response-time-good { color: #059669; }
        .response-time-average { color: #F59E0B; }
        .response-time-poor { color: #EF4444; }
        
        .conversation-health {
            background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }