Blue tint for filter bar & sociowall + LIVE badge for cameras

- Add blue gradient tint to content filters bar
- Add blue tint to sociowall panel
- Show "LIVE" with red pulsing indicator for camera/live content
- Cameras always display as live instead of timestamp

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/Filters/ContentFilters.css

@@ -3,17 +3,17 @@
   justify-content: center;
   gap: 8px;
   padding: 10px 16px;
-  /* Match sociowall panel colors */
+  /* Blue-tinted glassmorphism to match sociowall */
   background: linear-gradient(
     180deg,
-    rgba(22, 26, 38, 0.95) 0%,
+    rgba(20, 35, 60, 0.92) 0%,
-    rgba(18, 22, 32, 0.96) 100%
+    rgba(15, 28, 50, 0.94) 100%
   );
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: 999px;
-  border: 1px solid rgba(100, 120, 160, 0.2);
+  border: 1px solid rgba(59, 130, 246, 0.25);
-  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1);
   margin: 0 auto 12px auto;
   max-width: 420px;
 }
@@ -108,10 +108,11 @@
 body[data-theme="blue"] .content-filters {
   background: linear-gradient(
     180deg,
-    rgba(22, 26, 38, 0.95) 0%,
+    rgba(20, 35, 60, 0.92) 0%,
-    rgba(18, 22, 32, 0.96) 100%
+    rgba(15, 28, 50, 0.94) 100%
   );
-  border-color: rgba(100, 120, 160, 0.2);
+  border-color: rgba(59, 130, 246, 0.25);
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1);
 }
 
 /* Dark theme */

src/components/Posts/PostCard.jsx

@@ -236,7 +236,9 @@ export default function PostCard({ post, selected, onSelect, onPostDeleted, onPo
     username && author && author.toLowerCase() === username.toLowerCase();
   const [authorAvatar, setAuthorAvatar] = useState("");
   const sub = (post?.sub_category || post?.subCategory || "").toString();
-  const timeAgo = formatRelativeTime(post?.created_at || post?.CreatedAt || post?.createdAt);
+  const contentType = (post?.content_type || "").toString().toLowerCase();
+  const isLiveContent = contentType === "camera" || contentType === "live" || contentType === "stream";
+  const timeAgo = isLiveContent ? "LIVE" : formatRelativeTime(post?.created_at || post?.CreatedAt || post?.createdAt);
   const cat = categoryLabel(post);
   const metaLine = useMemo(() => {
     const parts = [];
@@ -326,7 +328,7 @@ export default function PostCard({ post, selected, onSelect, onPostDeleted, onPo
         </div>
         <div className="sw-wall-meta">
           <div className="sw-wall-author">{author}</div>
-          <div className="sw-wall-time">{timeAgo}</div>
+          <div className={`sw-wall-time${isLiveContent ? " sw-wall-time-live" : ""}`}>{timeAgo}</div>
         </div>
         <div className="sw-wall-badge">{cat}</div>
       </div>

src/styles/posts.css

@@ -42,11 +42,11 @@
   flex-direction: column;
   gap: 0.75rem;
 
-  /* Glassmorphism dark gray */
+  /* Glassmorphism with blue tint */
   background: linear-gradient(
     180deg,
-    rgba(22, 26, 38, 0.98) 0%,
+    rgba(18, 30, 52, 0.97) 0%,
-    rgba(18, 22, 32, 0.99) 100%
+    rgba(14, 24, 42, 0.98) 100%
   );
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
@@ -54,9 +54,9 @@
   /* Rounded corners */
   border-radius: 24px;
 
-  /* Border */
+  /* Border with blue accent */
-  border: 1px solid rgba(100, 120, 160, 0.2);
+  border: 1px solid rgba(59, 130, 246, 0.2);
-  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4), 0 0 30px rgba(59, 130, 246, 0.05);
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -290,6 +290,26 @@
   background: #475569;
 }
 
+/* Live indicator styling */
+.sw-wall-time-live {
+  color: #ef4444;
+  font-weight: 700;
+  font-size: 0.72rem;
+  letter-spacing: 0.05em;
+}
+
+.sw-wall-time-live::before {
+  width: 6px;
+  height: 6px;
+  background: #ef4444;
+  animation: live-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.3); }
+}
+
 .sw-wall-badge {
   font-size: 0.65rem;
   font-weight: 700;