style: update overlay component styles for improved layout and visual consistency

client/app/globals.css

@@ -965,11 +965,11 @@ main {
 .overlay__card {
   background: #1f1f1f;
   border: 1px solid #3a3a3a;
-  border-radius: 16px;
+  border-radius: 12px;
-  padding: 1rem 1.5rem;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0;
   width: min(100% - 2rem, 600px);
   max-width: 95vw;
   animation: fadeIn 0.4s ease-out;
@@ -983,37 +983,45 @@ main {
 
 .overlay__header {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.625rem;
   align-items: center;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .overlay__avatar {
-  width: 40px;
+  width: 36px;
-  height: 40px;
+  height: 36px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid #3a3a3a;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
 }
 
 .overlay__authorLine {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
 }
 
 .overlay__author {
-  font-size: 1rem;
+  font-size: 0.95rem;
   font-weight: 600;
   color: #e5e7eb;
+  margin-right: 0.25rem;
 }
 
 .overlay__badge {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
 }
 
 .overlay__badge--image {
-  width: 20px;
+  width: 16px;
-  height: 20px;
+  height: 16px;
   border-radius: 2px;
 }
 
@@ -1149,49 +1157,50 @@ main {
 }
 
 .overlay__superchat-header {
-  padding: 1rem 1.5rem;
+  padding: 0.875rem 1rem;
-  border-radius: 12px 12px 0 0;
   color: #fff;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 .overlay__superchat-avatar {
-  width: 48px;
+  width: 40px;
-  height: 48px;
+  height: 40px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
 }
 
 .overlay__superchat-name {
-  font-size: 1.6rem;
+  font-size: 1.35rem;
   font-weight: 700;
 }
 
 .overlay__superchat-separator {
-  font-size: 1.4rem;
+  font-size: 1.15rem;
   font-weight: 600;
-  opacity: 0.9;
+  opacity: 0.85;
+  margin: 0 0.125rem;
 }
 
 .overlay__superchat-amount {
-  font-size: 1.6rem;
+  font-size: 1.35rem;
   font-weight: 700;
 }
 
 .overlay__superchat-text {
-  padding: 1rem 1.5rem;
+  padding: 0.75rem 1rem;
-  font-size: 1.1rem;
+  font-size: 1.05rem;
-  line-height: 1.6;
+  line-height: 1.4;
   color: #e5e7eb;
   font-weight: 400;
   text-align: left;
   word-break: break-word;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.25);
-  border-radius: 0 0 12px 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
   margin: 0;
 }
 
@@ -1200,72 +1209,77 @@ main {
 }
 
 .overlay__membership-header {
-  padding: 1rem 1.5rem;
+  padding: 0.875rem 1rem;
-  border-radius: 12px 12px 0 0;
   background: linear-gradient(135deg, #10b981, #059669);
   color: #fff;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 .overlay__membership-avatar {
-  width: 48px;
+  width: 40px;
-  height: 48px;
+  height: 40px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
 }
 
 .overlay__membership-info {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
 }
 
 .overlay__membership-name {
-  font-size: 1.6rem;
+  font-size: 1.35rem;
   font-weight: 700;
 }
 
 .overlay__membership-separator {
-  font-size: 1.4rem;
+  font-size: 1.15rem;
   font-weight: 600;
-  opacity: 0.9;
+  opacity: 0.85;
+  margin: 0 0.125rem;
 }
 
 .overlay__membership-level {
-  font-size: 1.6rem;
+  font-size: 1.35rem;
   font-weight: 700;
 }
 
 .overlay__membership-text {
-  padding: 1rem 1.5rem;
+  padding: 0.75rem 1rem;
-  font-size: 1.1rem;
+  font-size: 1.05rem;
-  line-height: 1.6;
+  line-height: 1.4;
   color: #e5e7eb;
   font-weight: 400;
   text-align: left;
   word-break: break-word;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.25);
-  border-radius: 0 0 12px 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
   margin: 0;
 }
 
 .overlay__text {
-  font-size: 1.1rem;
+  font-size: 1.05rem;
-  line-height: 1.5;
+  line-height: 1.4;
   color: #d1d5db;
   font-weight: 400;
   text-align: left;
   word-break: break-word;
+  padding: 0.75rem 1rem;
+  margin: 0;
 }
 
 .overlay__timestamp {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.5);
   font-weight: 400;
   margin-left: auto;
   white-space: nowrap;

client/app/overlay/page.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect, useState, useRef } from 'react';
 import type { ChatMessage } from '@shared/chat';
-import { useTimezone } from '../../lib/TimezoneContext';
-import { formatTimestamp } from '../../lib/timezone';
 import { proxyImageUrl } from '../../lib/imageProxy';
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? 'http://localhost:4100';
@@ -17,7 +15,6 @@ export default function OverlayPage() {
   const [connected, setConnected] = useState(false);
   const [fadingOut, setFadingOut] = useState(false);
   const connectionRef = useRef<EventSource | null>(null);
-  const { timezone } = useTimezone();
 
   useEffect(() => {
     // Prevent multiple connections
@@ -147,7 +144,6 @@ export default function OverlayPage() {
                         </span>
                       )
                     ))}
-                    <time className="overlay__timestamp">{formatTimestamp(message.publishedAt, timezone)}</time>
                   </div>
                 </div>
               </div>