Spaces:

secutorpro
/

comsync-pro-team-connect-hub

Running

App Files Files Community

secutorpro commited on Dec 25, 2025

Commit

99d9682

verified ·

1 Parent(s): 17f6526

corrige moi tout ça svp je veux un travaille de pro de colegue à colègue

Browse files

Files changed (3) hide show

chat.html +66 -87
components/navbar.js +6 -2
style.css +368 -11

chat.html CHANGED Viewed

@@ -8,39 +8,11 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-        .scrollbar-hide::-webkit-scrollbar {
-            display: none;
-        }
-        .message-user {
-            background: linear-gradient(135deg, #3b82f6, #60a5fa);
-            border-radius: 12px 12px 0 12px;
-            align-self: flex-end;
-        }
-        .message-ai {
-            background: rgba(55, 65, 81, 0.8);
-            border-radius: 12px 12px 12px 0;
-            align-self: flex-start;
-        }
-        .typing-indicator span {
-            animation: typing 1.4s infinite ease-in-out;
-        }
-        .typing-indicator span:nth-child(1) { animation-delay: 0s; }
-        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-        @keyframes typing {
-            0%, 60%, 100% { transform: translateY(0); }
-            30% { transform: translateY(-5px); }
-        }
-    </style>
 </head>
 <body class="bg-gray-900 text-gray-100">
     <div id="vanta-bg" class="fixed inset-0 z-0"></div>
-    <div class="relative z-10 min-h-screen p-4 md:p-6">
         <!-- Header -->
         <header class="bg-gray-800/80 backdrop-blur-md rounded-xl p-4 mb-6 border border-gray-700/50 shadow-lg">
             <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
@@ -70,7 +42,7 @@
                 <!-- Chat Header -->
                 <div class="mb-4 pb-4 border-b border-gray-700">
                     <h2 class="text-xl font-semibold flex items-center">
-                        <i data-feather="message-circle" class="w-5 h-5 mr-2 text-purple-400"></i>
                         Dolphin-Mistral AI Assistant
                     </h2>
                     <p class="text-sm text-gray-400 mt-1">Ask anything related to operations, logistics, or emergency procedures</p>
@@ -79,10 +51,10 @@
                 <!-- Messages Container -->
                 <div id="chat-messages" class="flex-1 overflow-y-auto scrollbar-hide space-y-4 mb-4">
                     <!-- Initial Message -->
-                    <div class="message-ai p-4 max-w-[80%]">
                         <div class="flex items-start space-x-3">
                             <div class="bg-purple-500 rounded-full p-2">
-                                <i data-feather="bot" class="w-4 h-4"></i>
                             </div>
                             <div>
                                 <p class="font-medium">AI Assistant</p>
@@ -96,7 +68,7 @@
                 <div id="typing-indicator" class="message-ai p-4 max-w-[60%] hidden">
                     <div class="flex items-start space-x-3">
                         <div class="bg-purple-500 rounded-full p-2">
-                            <i data-feather="bot" class="w-4 h-4"></i>
                         </div>
                         <div class="typing-indicator flex space-x-1 pt-2">
                             <span class="w-2 h-2 bg-gray-300 rounded-full"></span>
@@ -113,12 +85,12 @@
                             type="text"
                             id="user-input"
                             placeholder="Type your message here..."
-                            class="flex-1 bg-gray-700/50 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"
                             autocomplete="off"
                         >
                         <button
                             type="submit"
-                            class="bg-purple-600 hover:bg-purple-700 p-3 rounded-lg transition-colors"
                         >
                             <i data-feather="send" class="w-5 h-5"></i>
                         </button>
@@ -128,8 +100,7 @@
             </div>
         </div>
     </div>
-    <script>
         // Initialize Vanta.js background
         VANTA.NET({
             el: "#vanta-bg",
@@ -185,20 +156,20 @@
                 messageDiv.innerHTML = `
                     <div class="flex items-start space-x-3">
                         <div class="bg-purple-500 rounded-full p-2">
-                            <i data-feather="bot" class="w-4 h-4"></i>
                         </div>
                         <div>
                             <p class="font-medium">AI Assistant</p>
-                            <p>${content}</p>
                         </div>
                     </div>
                 `;
             }
             chatMessages.appendChild(messageDiv);
             feather.replace();
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
         // Connection status simulation
         let isConnected = true;
@@ -227,9 +198,8 @@
             }
         }, 15000);
-        // Simulate AI response streaming
         async function simulateAIResponse(userMessage) {
-            // Check connection first
             if (!isConnected) {
                 addMessage('ai', 'Unable to process request: No connection to Mission Control. Please check your communication systems.');
                 return;
@@ -246,10 +216,11 @@
             // Hide typing indicator
             typingIndicator.classList.add('hidden');
-            // Simulated responses based on user input with more variety
             let response = "";
             const lowerMsg = userMessage.toLowerCase();
             if (lowerMsg.includes("hello") || lowerMsg.includes("hi") || lowerMsg.includes("hey")) {
                 const greetings = [
                     "Greetings, operative. How can I assist with your mission today?",
@@ -257,34 +228,48 @@
                     "Hi there! I'm monitoring all channels. What's your request?"
                 ];
                 response = greetings[Math.floor(Math.random() * greetings.length)];
-            } else if (lowerMsg.includes("emergency") || lowerMsg.includes("help") || lowerMsg.includes("mayday")) {
-                response = "CRITICAL ALERT: Emergency protocols activated. Contacting Mission Control immediately on Channel 1. Please state your emergency clearly.";
-            } else if (lowerMsg.includes("procedure") || lowerMsg.includes("protocol") || lowerMsg.includes("sop")) {
-                response = "Accessing Standard Operating Procedures database... Please specify which protocol you require:\n- Emergency Evacuation\n- Medical Response\n- Security Breach\n- Equipment Failure";
-            } else if (lowerMsg.includes("location") || lowerMsg.includes("position") || lowerMsg.includes("where")) {
-                response = "Integrating GPS tracking systems...\nLatest known positions:\n- John Smith: Sector 7 (40.74844°N, -73.98566°W)\n- Maria Garcia: Base Camp (40.74890°N, -73.98750°W)\n- Robert Johnson: Sector 3 (40.74780°N, -73.98620°W)";
-            } else if (lowerMsg.includes("weather") || lowerMsg.includes("climate") || lowerMsg.includes("conditions")) {
-                response = "Accessing meteorological data...\nCurrent Conditions:\n- Visibility: Excellent (10km+)\n- Temperature: 22°C (72°F)\n- Wind: 5 km/h NE\n- Atmospheric Pressure: Stable\n- Precipitation: None forecasted";
-            } else if (lowerMsg.includes("status") || lowerMsg.includes("update") || lowerMsg.includes("report")) {
-                response = "System Status Report:\n- Network: Online\n- GPS: Active\n- Signal Strength: Good\n- Battery: 85%\n- Team Members: 3 Online\nAll systems functioning within normal parameters.";
-            } else if (lowerMsg.includes("channel") || lowerMsg.includes("frequency") || lowerMsg.includes("communication")) {
-                response = "Communication Channels Status:\n- Channel 1 (Operations): Active\n- Channel 2 (Logistics): Active\n- Channel 3 (Medical): Active\n- Channel 4 (Security): Active\nAll channels monitored and operational.";
-            } else {
                 const responses = [
-                    "Acknowledged. Processing your request...",
-                    "Understood. I've logged this information in the system.",
-                    "Confirmed. All team members notified.",
-                    "Analyzing your query... Operational parameters remain stable.",
-                    "Request received. Cross-referencing with mission protocols...",
-                    "Data processed. No anomalies detected in current operations.",
-                    "Command understood. Executing requested action sequence."
                 ];
                 response = responses[Math.floor(Math.random() * responses.length)];
             }
             addMessage('ai', response);
         }
-// Handle form submission
         chatForm.addEventListener('submit', async (e) => {
             e.preventDefault();
@@ -298,48 +283,42 @@
             // Get AI response
             await simulateAIResponse(message);
         });
-        // Allow sending with Enter key
         userInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 chatForm.dispatchEvent(new Event('submit'));
             }
         });
-        // Add click handler for settings button
         document.querySelector('.settings-btn').addEventListener('click', function() {
-            alert('AI Assistant settings would open here in a full implementation.');
-        });
-        // Handle browser back/forward buttons
-        window.addEventListener('popstate', function(event) {
-            // Go back to previous page
-            window.history.back();
         });
-        // Add history entry for proper back navigation
-        history.pushState(null, null, location.href);
-// Simulate periodic status updates
         setInterval(() => {
             if (isConnected && Math.random() > 0.7) {
                 const statuses = [
-                    "Mission Control reports all systems nominal.",
-                    "Weather conditions remain stable across all sectors.",
-                    "All team members accounted for and reporting normal status.",
-                    "Communications network integrity at 98.7% efficiency.",
-                    "Power levels maintaining optimal charge across all units."
                 ];
                 const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
                 addMessage('ai', `[SYSTEM UPDATE] ${randomStatus}`);
             }
         }, 30000);
-        // Handle browser back/forward buttons
         window.addEventListener('popstate', function(event) {
-            // Reload the page to ensure proper state restoration
             location.reload();
         });
-        // Add history entry for proper back navigation
         history.pushState(null, null, location.href);
 </script>
 </body>

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body class="bg-gray-900 text-gray-100">
     <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+<div class="relative z-10 min-h-screen p-4 md:p-6">
         <!-- Header -->
         <header class="bg-gray-800/80 backdrop-blur-md rounded-xl p-4 mb-6 border border-gray-700/50 shadow-lg">
             <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                 <!-- Chat Header -->
                 <div class="mb-4 pb-4 border-b border-gray-700">
                     <h2 class="text-xl font-semibold flex items-center">
+                        <i data-feather="cpu" class="w-5 h-5 mr-2 text-purple-400"></i>
                         Dolphin-Mistral AI Assistant
                     </h2>
                     <p class="text-sm text-gray-400 mt-1">Ask anything related to operations, logistics, or emergency procedures</p>
                 <!-- Messages Container -->
                 <div id="chat-messages" class="flex-1 overflow-y-auto scrollbar-hide space-y-4 mb-4">
                     <!-- Initial Message -->
+                    <div class="message-ai p-4 max-w-[80%] animate-slide-in">
                         <div class="flex items-start space-x-3">
                             <div class="bg-purple-500 rounded-full p-2">
+                                <i data-feather="cpu" class="w-4 h-4"></i>
                             </div>
                             <div>
                                 <p class="font-medium">AI Assistant</p>
                 <div id="typing-indicator" class="message-ai p-4 max-w-[60%] hidden">
                     <div class="flex items-start space-x-3">
                         <div class="bg-purple-500 rounded-full p-2">
+                            <i data-feather="cpu" class="w-4 h-4"></i>
                         </div>
                         <div class="typing-indicator flex space-x-1 pt-2">
                             <span class="w-2 h-2 bg-gray-300 rounded-full"></span>
                             type="text"
                             id="user-input"
                             placeholder="Type your message here..."
+                            class="form-input flex-1"
                             autocomplete="off"
                         >
                         <button
                             type="submit"
+                            class="btn-primary p-3"
                         >
                             <i data-feather="send" class="w-5 h-5"></i>
                         </button>
             </div>
         </div>
     </div>
+<script>
         // Initialize Vanta.js background
         VANTA.NET({
             el: "#vanta-bg",
                 messageDiv.innerHTML = `
                     <div class="flex items-start space-x-3">
                         <div class="bg-purple-500 rounded-full p-2">
+                            <i data-feather="cpu" class="w-4 h-4"></i>
                         </div>
                         <div>
                             <p class="font-medium">AI Assistant</p>
+                            <p>${content.replace(/\n/g, '<br>')}</p>
                         </div>
                     </div>
                 `;
             }
             chatMessages.appendChild(messageDiv);
             feather.replace();
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
         // Connection status simulation
         let isConnected = true;
             }
         }, 15000);
+        // Enhanced AI Response System
         async function simulateAIResponse(userMessage) {
             if (!isConnected) {
                 addMessage('ai', 'Unable to process request: No connection to Mission Control. Please check your communication systems.');
                 return;
             // Hide typing indicator
             typingIndicator.classList.add('hidden');
+            // Enhanced response system with context awareness
             let response = "";
             const lowerMsg = userMessage.toLowerCase();
+            // Context-aware responses
             if (lowerMsg.includes("hello") || lowerMsg.includes("hi") || lowerMsg.includes("hey")) {
                 const greetings = [
                     "Greetings, operative. How can I assist with your mission today?",
                     "Hi there! I'm monitoring all channels. What's your request?"
                 ];
                 response = greetings[Math.floor(Math.random() * greetings.length)];
+            }
+            else if (lowerMsg.includes("emergency") || lowerMsg.includes("help") || lowerMsg.includes("mayday")) {
+                response = "🚨 CRITICAL ALERT: Emergency protocols activated. Contacting Mission Control immediately on Channel 1. Please state your emergency clearly.";
+            }
+            else if (lowerMsg.includes("procedure") || lowerMsg.includes("protocol") || lowerMsg.includes("sop")) {
+                response = "📋 Accessing Standard Operating Procedures database...\n\nPlease specify which protocol you require:\n• Emergency Evacuation\n• Medical Response\n• Security Breach\n• Equipment Failure\n• Communication Protocol";
+            }
+            else if (lowerMsg.includes("location") || lowerMsg.includes("position") || lowerMsg.includes("where")) {
+                response = "🗺️ Integrating GPS tracking systems...\n\nLatest known positions:\n• John Smith: Sector 7 (40.74844°N, -73.98566°W)\n• Maria Garcia: Base Camp (40.74890°N, -73.98750°W)\n• Robert Johnson: Sector 3 (40.74780°N, -73.98620°W)\n\nLast update: 2 minutes ago";
+            }
+            else if (lowerMsg.includes("weather") || lowerMsg.includes("climate") || lowerMsg.includes("conditions")) {
+                response = "🌤️ Accessing meteorological data...\n\nCurrent Conditions:\n• Visibility: Excellent (10km+)\n• Temperature: 22°C (72°F)\n• Wind: 5 km/h NE\n• Atmospheric Pressure: Stable\n• Precipitation: None forecasted\n• UV Index: Moderate";
+            }
+            else if (lowerMsg.includes("status") || lowerMsg.includes("update") || lowerMsg.includes("report")) {
+                response = "📊 System Status Report:\n\n• Network: Online ✅\n• GPS: Active ✅\n• Signal Strength: Good 📶\n• Battery: 85% 🔋\n• Team Members: 3 Online 👥\n• FM Channels: All Operational 📻\n\nAll systems functioning within normal parameters.";
+            }
+            else if (lowerMsg.includes("channel") || lowerMsg.includes("frequency") || lowerMsg.includes("communication")) {
+                response = "📡 Communication Channels Status:\n\n• Channel 1 (Operations): Active 🔊\n• Channel 2 (Logistics): Active 🔊\n• Channel 3 (Medical): Active 🔊\n• Channel 4 (Security): Active 🔊\n• FM SOS: Standby 📻\n\nAll channels monitored and operational.";
+            }
+            else if (lowerMsg.includes("team") || lowerMsg.includes("personnel") || lowerMsg.includes("member")) {
+                response = "👥 Team Status Overview:\n\n• John Smith: Online (Sector 7) ✅\n• Maria Garcia: Online (Base Camp) ✅\n• Robert Johnson: Offline (Sector 3) ❌\n• Ahmed Benjelloun: On Duty (Security) 🛡️\n\nAll personnel accounted for.";
+            }
+            else if (lowerMsg.includes("security") || lowerMsg.includes("threat") || lowerMsg.includes("breach")) {
+                response = "🛡️ Security Status: All systems secure. No active threats detected. Monitoring perimeter continuously.";
+            }
+            else {
                 const responses = [
+                    "✅ Acknowledged. Processing your request...",
+                    "📝 Understood. I've logged this information in the system.",
+                    "🔔 Confirmed. All team members notified.",
+                    "🔍 Analyzing your query... Operational parameters remain stable.",
+                    "📋 Request received. Cross-referencing with mission protocols...",
+                    "⚙️ Data processed. No anomalies detected in current operations.",
+                    "🎯 Command understood. Executing requested action sequence."
                 ];
                 response = responses[Math.floor(Math.random() * responses.length)];
             }
             addMessage('ai', response);
         }
+        // Enhanced form submission
         chatForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             // Get AI response
             await simulateAIResponse(message);
         });
+        // Enhanced keyboard handling
         userInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 chatForm.dispatchEvent(new Event('submit'));
             }
         });
+        // Settings handler
         document.querySelector('.settings-btn').addEventListener('click', function() {
+            alert('🤖 AI Assistant Settings:\n\n• Response Speed: Normal\n• Context Awareness: Enabled\n• Mission Integration: Active\n• Emergency Detection: Enabled\n\nSettings would open in a full implementation.');
         });
+        // Periodic system updates
         setInterval(() => {
             if (isConnected && Math.random() > 0.7) {
                 const statuses = [
+                    "📡 Mission Control reports all systems nominal.",
+                    "🌤️ Weather conditions remain stable across all sectors.",
+                    "👥 All team members accounted for and reporting normal status.",
+                    "🔌 Communications network integrity at 98.7% efficiency.",
+                    "🔋 Power levels maintaining optimal charge across all units.",
+                    "🛡️ Security perimeter secure, no anomalies detected.",
+                    "📻 FM channels operating at optimal frequency."
                 ];
                 const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
                 addMessage('ai', `[SYSTEM UPDATE] ${randomStatus}`);
             }
         }, 30000);
+        // Navigation history
         window.addEventListener('popstate', function(event) {
             location.reload();
         });
         history.pushState(null, null, location.href);
 </script>
 </body>

components/navbar.js CHANGED Viewed

@@ -126,7 +126,7 @@ class CustomNavbar extends HTMLElement {
             <span>ComSync Pro</span>
           </a>
           <div class="nav-links">
-            <a href="/" class="nav-link">
               <i data-feather="map"></i>
               <span>Dashboard</span>
             </a>
@@ -146,10 +146,14 @@ class CustomNavbar extends HTMLElement {
               <i data-feather="radio"></i>
               <span>FM Dashboard</span>
             </a>
 </div>
 </div>
       </nav>
-    `;
     // Add click handlers for navigation links
     const handleNavClick = (e) => {

             <span>ComSync Pro</span>
           </a>
           <div class="nav-links">
+            <a href="/" class="nav-link active">
               <i data-feather="map"></i>
               <span>Dashboard</span>
             </a>
               <i data-feather="radio"></i>
               <span>FM Dashboard</span>
             </a>
+            <a href="/security-dashboard.html" class="nav-link">
+              <i data-feather="shield"></i>
+              <span>Security</span>
+            </a>
 </div>
 </div>
       </nav>
+`;
     // Add click handlers for navigation links
     const handleNavClick = (e) => {

style.css CHANGED Viewed

@@ -1,26 +1,383 @@
-/* Additional styles for the chat page */
 .message-user {
-    background: linear-gradient(135deg, #3b82f6, #60a5fa);
-    border-radius: 12px 12px 0 12px;
-    align-self: flex-end;
 }
 .message-ai {
-    background: rgba(55, 65, 81, 0.8);
-    border-radius: 12px 12px 12px 0;
-    align-self: flex-start;
 }
 .typing-indicator span {
-    animation: typing 1.4s infinite ease-in-out;
 }
 .typing-indicator span:nth-child(1) { animation-delay: 0s; }
 .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
 .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-@keyframes typing {
-    0%, 60%, 100% { transform: translateY(0); }
-    30% { transform: translateY(-5px); }
 }

+/* ==========================================================================
+   ComSync Pro - Professional Styles
+   ========================================================================== */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+/* Root Variables */
+:root {
+  --primary-blue: #3b82f6;
+  --primary-purple: #8b5cf6;
+  --primary-green: #10b981;
+  --primary-red: #ef4444;
+  --primary-yellow: #f59e0b;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+}
+/* Base Styles */
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Inter', sans-serif;
+  background: var(--gray-900);
+  color: var(--gray-100);
+  line-height: 1.6;
+}
+/* Animations */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+@keyframes typing {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-5px); }
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes bounce {
+  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
+  40%, 43% { transform: translateY(-10px); }
+  70% { transform: translateY(-5px); }
+  90% { transform: translateY(-2px); }
+}
+/* Utility Classes */
+.animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-typing { animation: typing 1.4s infinite ease-in-out; }
+.animate-slide-in { animation: slideIn 0.3s ease-out; }
+.animate-fade-in { animation: fadeIn 0.5s ease-out; }
+.animate-bounce { animation: bounce 1s; }
+.scrollbar-hide::-webkit-scrollbar { display: none; }
+.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
+/* Gradient Text */
+.gradient-text-blue {
+  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.gradient-text-purple {
+  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+/* Signal Bars */
+.signal-bar {
+  width: 4px;
+  margin: 0 1px;
+  transition: all 0.3s ease;
+}
+/* Glass Effect */
+.glass-effect {
+  background: rgba(31, 41, 55, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(75, 85, 99, 0.5);
+}
+/* Status Indicators */
+.status-online { color: var(--primary-green); }
+.status-offline { color: var(--primary-red); }
+.status-warning { color: var(--primary-yellow); }
+.status-info { color: var(--primary-blue); }
+/* Button Styles */
+.btn-primary {
+  background: var(--primary-blue);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+.btn-primary:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+}
+.btn-secondary {
+  background: var(--gray-700);
+  color: var(--gray-100);
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: 1px solid var(--gray-600);
+  cursor: pointer;
+}
+.btn-secondary:hover {
+  background: var(--gray-600);
+  transform: translateY(-1px);
+}
+.btn-danger {
+  background: var(--primary-red);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+.btn-danger:hover {
+  background: #dc2626;
+  transform: translateY(-1px);
+}
+/* Card Styles */
+.card {
+  background: var(--glass-effect);
+  backdrop-filter: blur(10px);
+  border-radius: 0.75rem;
+  border: 1px solid rgba(75, 85, 99, 0.5);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+/* Form Styles */
+.form-input {
+  width: 100%;
+  background: rgba(55, 65, 81, 0.5);
+  border: 1px solid var(--gray-600);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  color: var(--gray-100);
+  transition: all 0.2s;
+}
+.form-input:focus {
+  outline: none;
+  border-color: var(--primary-blue);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.form-input::placeholder {
+  color: var(--gray-400);
+}
+/* Navigation */
+.nav-link {
+  color: var(--gray-400);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+}
+.nav-link:hover {
+  color: var(--gray-100);
+  background: rgba(55, 65, 81, 0.5);
+}
+.nav-link.active {
+  color: var(--primary-blue);
+  background: rgba(59, 130, 246, 0.1);
+}
+.nav-link.active i {
+  color: var(--primary-blue);
+}
+/* Chat Styles */
 .message-user {
+  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
+  border-radius: 12px 12px 0 12px;
+  align-self: flex-end;
+  animation: slideIn 0.3s ease-out;
 }
 .message-ai {
+  background: rgba(55, 65, 81, 0.8);
+  border-radius: 12px 12px 12px 0;
+  align-self: flex-start;
+  animation: slideIn 0.3s ease-out;
 }
 .typing-indicator span {
+  animation: typing 1.4s infinite ease-in-out;
 }
 .typing-indicator span:nth-child(1) { animation-delay: 0s; }
 .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
 .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+/* Loading States */
+.loading-spinner {
+  border: 2px solid var(--gray-600);
+  border-top: 2px solid var(--primary-blue);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+  .grid-responsive {
+    grid-template-columns: 1fr;
+  }
+  .nav-container {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .nav-links {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .card {
+    margin-bottom: 1rem;
+  }
+}
+/* Security Styles */
+.security-level-critical { color: var(--primary-red); }
+.security-level-high { color: var(--primary-yellow); }
+.security-level-medium { color: var(--primary-blue); }
+.security-level-low { color: var(--primary-green); }
+.security-level-info { color: var(--gray-500); }
+/* FM Status Styles */
+.fm-available { color: var(--primary-green); }
+.fm-listening { color: var(--primary-yellow); }
+.fm-unavailable { color: var(--primary-red); }
+/* Bluetooth Status Styles */
+.bluetooth-connected { color: var(--primary-green); }
+.bluetooth-connecting { color: var(--primary-yellow); }
+.bluetooth-disconnected { color: var(--primary-red); }
+.bluetooth-available { color: var(--primary-blue); }
+/* Walkie Talkie Styles */
+.walkie-card {
+  transition: all 0.3s ease;
+}
+.walkie-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+.bluetooth-wave {
+  position: relative;
+  overflow: hidden;
+}
+.bluetooth-wave::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  animation: bluetoothPulse 2s infinite;
+}
+@keyframes bluetoothPulse {
+  0% {
+    width: 0%;
+    height: 0%;
+    opacity: 1;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+}
+/* AI Insight Cards */
+.ai-insight-card {
+  background: rgba(139, 92, 246, 0.1);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+}
+.prediction-badge {
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+.anomaly-badge {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+/* Map Gradient */
+.gradient-map {
+  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
+}
+/* Professional Shadows */
+.shadow-professional {
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+.shadow-professional-hover:hover {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+/* Print Styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  body {
+    background: white !important;
+    color: black !important;
+  }
 }