refactor: improve 404 page loading experience and styling

- Replace Suspense with useEffect for better control over component mounting.
- Update loading indicators with fixed positioning and enhanced styling for a terminal-like appearance.
- Modify KernelPanic404 component to improve text color handling and ensure proper visibility.
- Introduce checks for 404 page detection based on pathname and data attributes for more accurate rendering.

app/components/KernelPanic404.tsx

@@ -559,12 +559,19 @@ export default function KernelPanic404() {
       if (!output) return;
       const d = document.createElement("div");
       d.innerHTML = text;
-      if (type === "log-warn") d.style.color = "#ffb000";
+      // Default color for normal text - use setProperty with important to override globals.css
+      if (!type || (type !== "log-warn" && type !== "log-err" && type !== "alert" && type !== "log-sys" && type !== "log-k" && type !== "log-dim")) {
+        d.style.setProperty("color", "var(--phosphor)", "important");
+      }
+      if (type === "log-warn") d.style.setProperty("color", "#ffb000", "important");
       if (type === "log-err" || type === "alert")
-        d.style.color = "var(--alert)";
-      if (type === "log-dim") d.style.opacity = "0.6";
-      if (type === "log-sys") d.style.color = "cyan";
-      if (type === "log-k") d.style.color = "#fff";
+        d.style.setProperty("color", "var(--alert)", "important");
+      if (type === "log-dim") {
+        d.style.opacity = "0.6";
+        d.style.setProperty("color", "var(--phosphor)", "important");
+      }
+      if (type === "log-sys") d.style.setProperty("color", "cyan", "important");
+      if (type === "log-k") d.style.setProperty("color", "#fff", "important");
       if (type === "pulse-red") d.classList.add("pulse-red");
       if (type === "fsociety-mask") d.classList.add("fsociety-mask");
       if (type === "memory-error") d.classList.add("memory-error");
@@ -1447,18 +1454,40 @@ export default function KernelPanic404() {
           --phosphor: #33ff00;
           --phosphor-sec: #008f11;
           --alert: #ff3333;
-          --font: "Courier New", Courier, monospace;
+          --font: 'Courier New', Courier, monospace;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+          background-color: var(--bg-color);
+          margin: 0;
+          height: 100vh;
+          overflow: hidden;
+          font-family: var(--font);
+          color: var(--phosphor);
+          user-select: none;
+          cursor: default;
+          transition: filter 0.5s, transform 0.5s;
         }
 
         /* --- CRT EFFECTS --- */
         .crt-wrap {
           width: 100%;
-          height: 100vh;
+          height: 100%;
           padding: 30px;
           box-sizing: border-box;
           background: radial-gradient(circle at center, #111 0%, #000 100%);
           position: relative;
-          overflow: hidden;
+        }
+        
+        /* Override globals.css div color rule for 404 page - must be very specific */
+        html body:has([data-404-page]) .crt-wrap,
+        html body:has([data-404-page]) .crt-wrap *,
+        html body:has([data-404-page]) #output,
+        html body:has([data-404-page]) #output div,
+        html body:has([data-404-page]) #output * {
+          color: var(--phosphor) !important;
         }
 
         .crt-wrap::before {
@@ -1468,25 +1497,22 @@ export default function KernelPanic404() {
           left: 0;
           width: 100%;
           height: 100%;
-          background:
-            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
-            linear-gradient(
-              90deg,
-              rgba(255, 0, 0, 0.06),
-              rgba(0, 255, 0, 0.02),
-              rgba(0, 0, 255, 0.06)
-            );
-          background-size:
-            100% 4px,
-            3px 100%;
+          background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+                      linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+          background-size: 100% 4px, 3px 100%;
           pointer-events: none;
           z-index: 90;
         }
 
         .glow {
-          text-shadow:
-            0 0 2px var(--phosphor-sec),
-            0 0 8px var(--phosphor);
+          text-shadow: 0 0 2px var(--phosphor-sec), 0 0 8px var(--phosphor);
+        }
+        
+        /* Hide chat widget on 404 page */
+        body:has([data-404-page]) [data-chat-widget] {
+          display: none !important;
+          visibility: hidden !important;
+          opacity: 0 !important;
         }
 
         /* --- TERMINAL --- */
@@ -1507,7 +1533,6 @@ export default function KernelPanic404() {
           margin-bottom: 20px;
           font-size: 1.1rem;
           line-height: 1.4;
-          color: var(--phosphor);
         }
 
         #output::-webkit-scrollbar {
@@ -1527,7 +1552,6 @@ export default function KernelPanic404() {
           margin-right: 10px;
           font-weight: bold;
           white-space: nowrap;
-          color: var(--phosphor);
         }
 
         #cmd-input {
@@ -1852,7 +1876,7 @@ export default function KernelPanic404() {
 
       <div id="flash-overlay" ref={overlayRef}></div>
 
-      <div className="crt-wrap glow" ref={bodyRef}>
+      <div className="crt-wrap glow" ref={bodyRef} data-404-page="true">
         <div id="terminal">
           <div id="output" ref={outputRef}></div>
           <div