filter update

public/s/css/f0ckm.css

@@ -14639,8 +14639,9 @@ body.scroller-active #gchat-reopen-bubble {
 /* Filter badge style on navbar */
 .filter-badge {
   position: absolute;
-  bottom: -20px;
+  top: 100%;
-  right: 0;
+  left: 50%;
+  transform: translateX(-50%);
   font-size: 9px;
   font-weight: 800;
   padding: 2px 4px;
@@ -14653,6 +14654,7 @@ body.scroller-active #gchat-reopen-bubble {
   letter-spacing: 0.5px;
   z-index: 10;
   display: inline-flex;
+  flex-direction: column;
   align-items: center;
   user-select: none;
 }
@@ -14679,11 +14681,47 @@ body.scroller-active #gchat-reopen-bubble {
   /* Slate grey */
 }
 
+/* Multi-rating mode: neutral wrapper + individual colored letter chips */
+.filter-badge-multi {
+  background: transparent;
+  padding: 0;
+  gap: 2px;
+  box-shadow: none;
+}
+
+.filter-letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  font-size: 8px;
+  font-weight: 900;
+  color: #fff;
+  line-height: 1;
+}
+
+.filter-letter-sfw  { background: var(--badge-sfw,  #68a728); }
+.filter-letter-nsfw { background: var(--badge-nsfw, #E10DC3); }
+.filter-letter-nsfl { background: var(--badge-nsfl, #660000); }
+.filter-letter-unt  { background: #ff9800; }
+
+
 /* Dynamic MIME icons styles */
+.filter-rating-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  justify-content: center;
+}
+
 .filter-mime-icons {
   display: inline-flex;
   gap: 3px;
-  margin-left: 4px;
+  margin-left: 0;
+  margin-top: 2px;
+  justify-content: center;
   align-items: center;
 }
 

public/s/js/f0ckm.js

@@ -393,15 +393,23 @@ window.cancelAnimFrame = (function () {
       if (isAll) {
         badgeText = 'ALL';
         badgeClass += ' filter-badge-all';
-      } else {
+      } else if (activeRatings.length === 1) {
-        // Multi-rating mode: show abbreviated names
+        // Single rating — keep existing single-color badge style
+        const single = activeRatings[0];
         const abbr = { sfw: 'SFW', nsfw: 'NSFW', nsfl: 'NSFL', untagged: 'UNT' };
-        badgeText = activeRatings.map(r => abbr[r] || r.toUpperCase()).join('+');
+        badgeText = abbr[single] || single.toUpperCase();
-        // Use most prominent active rating for colour hint
+        if (single === 'nsfw') badgeClass += ' filter-badge-nsfw';
-        if (activeRatings.includes('nsfw')) badgeClass += ' filter-badge-nsfw';
+        else if (single === 'nsfl') badgeClass += ' filter-badge-nsfl';
-        else if (activeRatings.includes('nsfl')) badgeClass += ' filter-badge-nsfl';
+        else if (single === 'sfw') badgeClass += ' filter-badge-sfw';
-        else if (activeRatings.includes('sfw')) badgeClass += ' filter-badge-sfw';
         else badgeClass += ' filter-badge-unt';
+      } else {
+        // Multi-rating: render individual colored letter chips, neutral container
+        const letterMap = { sfw: 'S', nsfw: 'N', nsfl: 'N', untagged: 'U' };
+        const colorMap = { sfw: 'filter-letter-sfw', nsfw: 'filter-letter-nsfw', nsfl: 'filter-letter-nsfl', untagged: 'filter-letter-unt' };
+        badgeText = activeRatings.map(r =>
+          `<span class="filter-letter ${colorMap[r] || ''}" title="${r.toUpperCase()}">${letterMap[r] || r[0].toUpperCase()}</span>`
+        ).join('');
+        badgeClass += ' filter-badge-multi';
       }
     } else {
       switch (activeMode) {
@@ -438,7 +446,8 @@ window.cancelAnimFrame = (function () {
     }
 
     badge.className = badgeClass;
-    badge.innerHTML = badgeText + zomgHtml;
+    // Always wrap rating text in a row container so mime icons can sit on the next row cleanly
+    badge.innerHTML = `<span class="filter-rating-row">${badgeText}${zomgHtml}</span>`;
 
     if (hasMimeFilter) {
       const iconsContainer = document.createElement('span');
@@ -582,10 +591,10 @@ window.cancelAnimFrame = (function () {
     }
 
     if (activeRatings.length === 0) {
-      // Nothing selected: default back to SFW
+      // Nothing selected: treat as ALL (no filter = show everything)
       clearRatingsCookie();
-      window.activeMode = 0;
+      window.activeMode = 3;
-      document.cookie = `mode=0; Path=/; Max-Age=31536000`;
+      document.cookie = `mode=3; Path=/; Max-Age=31536000`;
     } else {
       setRatingsCookie(activeRatings);
       // Use mode=3 (ALL) on server when multi-select; single-select maps to native mode
@@ -607,7 +616,7 @@ window.cancelAnimFrame = (function () {
         if (data.success) {
           const label = activeRatings.length > 0
             ? activeRatings.map(r => r.toUpperCase()).join('+') + ' ACTIVE'
-            : 'SFW MODE ACTIVATED';
+            : 'ALL MODE ACTIVATED';
           window.flashMessage(label);
           gridCacheMap.clear();
           const isGridView = document.querySelector('.posts, .tags-grid');
@@ -5234,7 +5243,10 @@ window.cancelAnimFrame = (function () {
     const btn = e.target.closest('.shuffle-btn');
     if (btn) {
       e.preventDefault();
-      handleShuffleBtnClick(btn);
+      const fromFilterModal = !!btn.closest('#excluded-tags-overlay');
+      if (fromFilterModal) window._keepFilterModal = true;
+      const result = handleShuffleBtnClick(btn);
+      if (fromFilterModal) Promise.resolve(result).finally(() => { window._keepFilterModal = false; });
     }
   });