Match CPU heads-up popup with previous model UI

static/index.html

@@ -1141,7 +1141,9 @@
             background: var(--text-muted);
         }
 
-        /* CPU heads-up toast */
+        /* ============================================ */
+        /* NOTIFICATION TOAST - Bottom Left */
+        /* ============================================ */
         .notification-toast {
             position: fixed;
             bottom: 24px;
@@ -1154,8 +1156,8 @@
             opacity: 0;
             visibility: hidden;
             transform: translateY(20px) scale(0.95);
-            transition: all 0.35s ease;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(64, 201, 201, 0.28);
+            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 255, 255, 0.3);
         }
 
         .notification-toast.show {
@@ -1164,6 +1166,33 @@
             transform: translateY(0) scale(1);
         }
 
+        /* Animated glowing border */
+        .notification-toast::before {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            border-radius: 18px;
+            padding: 2px;
+            background: linear-gradient(90deg, #1e3a5f, #2d8cbe, #40c9c9, #2d8cbe, #1e3a5f);
+            background-size: 300% 100%;
+            animation: border-glow 3s linear infinite;
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            z-index: -1;
+        }
+
+        @keyframes border-glow {
+            0% {
+                background-position: 0% 50%;
+            }
+
+            100% {
+                background-position: 300% 50%;
+            }
+        }
+
         .toast-header {
             display: flex;
             align-items: center;
@@ -1175,15 +1204,32 @@
             display: flex;
             align-items: center;
             gap: 8px;
-            font-size: 15px;
+            font-size: 16px;
             font-weight: 700;
-            color: var(--text-primary);
+            background: linear-gradient(135deg, #1e3a5f 0%, #2d8cbe 50%, #40c9c9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
         .toast-icon {
-            width: 18px;
-            height: 18px;
-            color: #2d8cbe;
+            width: 20px;
+            height: 20px;
+            animation: pulse-icon 2s infinite ease-in-out;
+        }
+
+        @keyframes pulse-icon {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.7;
+                transform: scale(0.9);
+            }
         }
 
         .toast-close {
@@ -1191,8 +1237,12 @@
             border: none;
             color: var(--text-muted);
             cursor: pointer;
-            padding: 3px;
+            padding: 4px;
             border-radius: 6px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .toast-close:hover {
@@ -1201,42 +1251,56 @@
         }
 
         .toast-message {
-            font-size: 13px;
+            font-size: 14px;
             color: var(--text-primary);
-            line-height: 1.5;
-            margin-bottom: 12px;
+            line-height: 1.6;
+            margin-bottom: 14px;
+        }
+
+        .toast-message strong {
+            background: linear-gradient(135deg, #2d8cbe 0%, #40c9c9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
         }
 
         .toast-btn {
-            background: var(--accent-gradient);
+            background: linear-gradient(135deg, #1e3a5f 0%, #2d8cbe 50%, #40c9c9 100%);
             color: white;
             border: none;
-            padding: 10px 14px;
+            padding: 12px 24px;
             border-radius: 10px;
-            font-size: 13px;
+            font-size: 14px;
             font-weight: 600;
             cursor: pointer;
+            transition: all 0.3s ease;
             width: 100%;
         }
 
+        .toast-btn:hover {
+            filter: brightness(1.15);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 20px rgba(45, 140, 190, 0.4);
+        }
+
         .toast-progress {
             position: absolute;
-            left: 0;
             bottom: 0;
+            left: 0;
             height: 3px;
-            width: 100%;
+            background: linear-gradient(90deg, #00FFFF, #00D4FF);
             border-radius: 0 0 16px 16px;
-            background: linear-gradient(90deg, #00d4aa, #00bcd4);
-            animation: toast-progress-shrink 10s linear forwards;
+            animation: progress-shrink 10s linear forwards;
         }
 
-        @keyframes toast-progress-shrink {
+        @keyframes progress-shrink {
             from {
                 width: 100%;
             }
 
             to {
-                width: 0;
+                width: 0%;
             }
         }
 
@@ -1389,12 +1453,12 @@
     <div class="notification-toast" id="notificationToast">
         <div class="toast-header">
             <div class="toast-title">
-                <svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="#2d8cbe" stroke-width="2.5">
                     <circle cx="12" cy="12" r="10"></circle>
                     <line x1="12" y1="8" x2="12" y2="12"></line>
                     <line x1="12" y1="16" x2="12.01" y2="16"></line>
                 </svg>
-                Heads Up
+                Heads Up!
             </div>
             <button class="toast-close" onclick="closeToast()">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -1404,9 +1468,11 @@
             </button>
         </div>
         <p class="toast-message">
-            CPU resources are limited here, so responses may be slow. Please wait for your response.
+            Responses may be <strong>slow</strong> due to limited CPU resources. Thank you for your patience!
         </p>
-        <button class="toast-btn" onclick="closeToast()">OK, got it</button>
+        <button class="toast-btn" onclick="closeToast()">
+            Let's Chat!
+        </button>
         <div class="toast-progress"></div>
     </div>
 
@@ -1451,10 +1517,7 @@
             // Auto-check connection (optional)
             checkConnection();
 
-            if (sessionStorage.getItem('cpuHeadsUpShown') !== 'true') {
-                showToast();
-                sessionStorage.setItem('cpuHeadsUpShown', 'true');
-            }
+            showToast();
 
             // Enable send button on input (only if not generating)
             document.getElementById('messageInput').addEventListener('input', (e) => {