Various improvements

app/assets/web/widgets/livechat/app.js

@@ -28,8 +28,12 @@ class LiveChatWidget {
     }
 
     // Font size: small, medium (default), large, xlarge
-    const fontSize = urlParams.get('fontsize') || 'medium';
-    document.body.classList.add(`font-${fontSize}`);
+    this.fontSize = urlParams.get('fontsize') || 'medium';
+    document.body.classList.add(`font-${this.fontSize}`);
+    
+    // Emote resolution based on font size
+    // Small/Medium: 1x (28px), Large: 2x (56px), XLarge: 2x (56px)
+    this.emoteScale = (this.fontSize === 'medium' || this.fontSize === 'large' || this.fontSize === 'xlarge') ? 2 : 1;
 
     // Hide timestamp option
     const hideTime = urlParams.get('hidetime');
@@ -227,6 +231,39 @@ class LiveChatWidget {
     return msg;
   }
 
+  getEmoteUrl(emote) {
+    // If no emote_id, use the default URL
+    if (!emote.emote_id) {
+      return emote.url;
+    }
+
+    const scale = this.emoteScale;
+    const provider = emote.provider;
+
+    // Upgrade URL based on provider and scale
+    switch (provider) {
+      case 'twitch':
+        // Twitch: 1.0, 2.0, 3.0
+        return `https://static-cdn.jtvnw.net/emoticons/v2/${emote.emote_id}/default/dark/${scale}.0`;
+      
+      case 'bttv':
+        // BTTV: 1x, 2x, 3x
+        return `https://cdn.betterttv.net/emote/${emote.emote_id}/${scale}x`;
+      
+      case 'ffz':
+        // FFZ: 1, 2, 4 (no 3x)
+        const ffzScale = scale === 2 ? 2 : 1;
+        return emote.url.replace(/\/[124]$/, `/${ffzScale}`);
+      
+      case '7tv':
+        // 7TV: 1x.webp, 2x.webp, 3x.webp
+        return emote.url.replace(/\/[123]x\.webp$/, `/${scale}x.webp`);
+      
+      default:
+        return emote.url;
+    }
+  }
+
   parseMessageWithEmotes(message, emotes) {
     if (!emotes || emotes.length === 0) {
       return this.escapeHtml(message);
@@ -244,7 +281,8 @@ class LiveChatWidget {
       if (emoteMap[word]) {
         const emote = emoteMap[word];
         const animatedClass = emote.is_animated ? 'animated' : '';
-        return `<img class="emote ${animatedClass}" src="${emote.url}" alt="${emote.code}" title="${emote.code} (${emote.provider})">`;
+        const url = this.getEmoteUrl(emote);
+        return `<img class="emote ${animatedClass}" src="${url}" alt="${emote.code}" title="${emote.code} (${emote.provider})">`;
       }
       return this.escapeHtml(word);
     });

app/assets/web/widgets/livechat/style.css

@@ -48,28 +48,28 @@ body.font-small {
   --chat-font-size: 12px;
   --chat-username-size: 12px;
   --chat-badge-size: 14px;
-  --chat-emote-size: 20px;
+  --chat-emote-size: 28px;
 }
 
 body.font-medium {
   --chat-font-size: 14px;
   --chat-username-size: 14px;
   --chat-badge-size: 16px;
-  --chat-emote-size: 24px;
+  --chat-emote-size: 36px;
 }
 
 body.font-large {
   --chat-font-size: 18px;
   --chat-username-size: 18px;
   --chat-badge-size: 20px;
-  --chat-emote-size: 32px;
+  --chat-emote-size: 48px;
 }
 
 body.font-xlarge {
   --chat-font-size: 24px;
   --chat-username-size: 24px;
   --chat-badge-size: 26px;
-  --chat-emote-size: 40px;
+  --chat-emote-size: 56px;
 }
 
 /* Hide timestamp option */

app/assets/web/widgets/nowplaying/index.html

@@ -17,11 +17,8 @@
 
       <div class="meta">
         <div id="title" class="title">—</div>
-        <div class="sub">
-          <span id="artist" class="artist">—</span>
-          <span class="dot">•</span>
-          <span id="album" class="album">—</span>
-        </div>
+        <div id="artist" class="artist">—</div>
+        <div id="album" class="album">—</div>
         <div class="statusRow">
           <span id="statusPill" class="pill">Paused</span>
         </div>

app/assets/web/widgets/nowplaying/style.css

@@ -139,7 +139,7 @@ html, body {
   flex-direction: column;
   justify-content: center;
   min-width: 0;
-  gap: 6px;
+  gap: 3px;
   padding-right: clamp(8px, calc(var(--w) * 0.02), 14px);
   flex: 1;
 }
@@ -156,36 +156,30 @@ html, body {
   text-shadow: 0 2px 10px rgba(0,0,0,.25);
 }
 
-.sub{
+.artist{
   color: var(--muted);
   font-size: 15px;
-  display:flex;
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
-}
-.sub span.artist{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex: 0 1 auto; /* shrinking is ok, growing beyond content isn't forced */
   min-width: 0;
-  max-width: 60%; /* prevent it from starving the album entirely if very long */
+  max-width: 100%;
 }
-.sub span.album{
+
+.album{
+  color: var(--muted);
+  font-size: 13px;
+  opacity: 0.8;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex: 1; /* takes remaining space */
   min-width: 0;
-}
-.dot{
-  opacity: .7;
-  flex: 0 0 auto;
+  max-width: 100%;
+  font-style: italic;
 }
 
 .statusRow{
-  margin-top: 6px;
+  margin-top: 4px;
 }
 
 .pill{