<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        * { 
            font-family: 'Inter', sans-serif; 
            -webkit-tap-highlight-color: transparent;
        }
        
        /* Utilitaires */
        .gradient-bg { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .glass-effect { 
            background: rgba(255, 255, 255, 0.95); 
            backdrop-filter: blur(10px);
        }
        .scrollbar-hide::-webkit-scrollbar { 
            display: none; 
        }
        
        /* Logo Styling */
        .logo-container {
            transition: all 0.3s ease;
        }
        .logo-container:hover {
            transform: scale(1.05);
        }
        .logo-img {
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }
        
        /* Animation Chat Mobile */
        .mobile-chat-panel {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 50;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }
        .mobile-chat-panel.active {
            transform: translateX(0);
        }
        
        /* Loader */
        .chat-loader {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 
            0% { transform: rotate(0deg); } 
            100% { transform: rotate(360deg); } 
        }
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9ca3af;
        }

        /* Notifications */
        @keyframes slide-in {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-in {
            animation: slide-in 0.3s ease forwards;
        }
        .animate-fade-in {
            animation: fade-in 0.3s ease-in;
        }

        /* Password Strength */
        .password-strength {
            margin-top: 4px;
            font-size: 11px;
            font-weight: 500;
            padding: 2px 6px;
            border-radius: 3px;
            display: inline-block;
        }
        .strength-weak { 
            background-color: #fee2e2; 
            color: #dc2626; 
        }
        .strength-medium { 
            background-color: #fef3c7; 
            color: #d97706; 
        }
        .strength-strong { 
            background-color: #d1fae5; 
            color: #059669; 
        }

        /* Toggle password */
        .password-container {
            position: relative;
        }
        .password-container input {
            padding-right: 40px !important;
        }
        .toggle-password-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            padding: 4px;
            z-index: 10;
        }
        .toggle-password-btn:hover {
            color: #4f46e5;
        }

        /* Messages */
        .message-bubble {
            max-width: 85%;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        /* File upload preview */
        .file-preview {
            transition: all 0.3s ease;
        }
        .file-preview:hover {
            background-color: #f3f4f6;
        }

        /* Lazy loading images */
        .lazy-load {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .lazy-load.loaded {
            opacity: 1;
        }

        /* Typing indicator */
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 12px;
        }
        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #9ca3af;
            border-radius: 50%;
            animation: typing-bounce 1.4s infinite ease-in-out both;
        }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes typing-bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* Image preview modal */
        .image-preview-modal {
            background-color: rgba(0, 0, 0, 0.95);
        }
        .image-preview-modal img {
            max-height: 85vh;
            max-width: 90vw;
        }

        /* RESPONSIVE DESIGN */
        @media (min-width: 768px) {
            .mobile-chat-panel { 
                position: static; 
                transform: none !important; 
                z-index: auto; 
                width: auto; 
                height: auto; 
                background: transparent; 
            }
            .md-hidden { 
                display: none !important; 
            }
        }

        @media (max-width: 767px) {
            #app-container { 
                flex-direction: column; 
            }
            aside { 
                display: none !important; 
            }
            #mobile-top-nav {
                display: flex;
                position: fixed; 
                top: 0; 
                left: 0; 
                right: 0; 
                height: 60px;
                background: white; 
                z-index: 40; 
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                justify-content: space-around; 
                align-items: center;
            }
            main { 
                padding-top: 60px; 
                height: 100vh; 
            }
            #messaging-page, #messaging-page > div, #messaging-page .conv-list-container { 
                height: 100%; 
            }
            .logo-img {
                max-width: 120px;
            }
        }
        
        /* Status indicators */
        .status-online {
            color: #10b981;
        }
        .status-offline {
            color: #9ca3af;
        }
        .status-away {
            color: #f59e0b;
        }
        
        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        /* Accessibility */
        *:focus {
            outline: 2px solid #4f46e5;
            outline-offset: 2px;
        }

        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .dark\:bg-gray-900 { background-color: #111827; }
            .dark\:text-white { color: #ffffff; }
            .dark\:border-gray-700 { border-color: #374151; }
        }
		
		/* Boutons de gestion admin */
		.admin-btn-active {
			background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
		}
		.admin-btn-inactive {
			background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
		}

		/* Tooltip amélioré pour les boutons */
		button[title]:hover::after {
			content: attr(title);
			position: absolute;
			bottom: -30px;
			left: 50%;
			transform: translateX(-50%);
			background: #333;
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			white-space: nowrap;
			z-index: 1000;
		}
		
		.message-bubble {
			animation: fadeIn 0.3s ease-out;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		/* Assurez-vous que les images chargées sont stables */
		.lazy-load.loaded {
			transition: opacity 0.5s ease;
		}

		/* Prévenir les reflows inutiles */
		#messages-container {
			contain: content;
			will-change: transform;
		}

		/* Style pour les nouveaux messages */
		.message-bubble.new-message {
			background-color: rgba(250, 240, 217, 0.3);
			border-left: 3px solid #caa27a;
		}

		/* Animation discrète pour les nouveaux messages */
		@keyframes highlight {
			0% { background-color: rgba(250, 240, 217, 0.3); }
			100% { background-color: transparent; }
		}

		.new-message-highlight {
			animation: highlight 2s ease-out;
		}
    </style>