Comprehensive fix for black bar in emoji grid with dedicated CSS file

css/no-black-bar.css

@@ -0,0 +1,66 @@
+/* CSS to eliminate black bars in emoji grid */
+
+/* Target all elements in the emoji library section */
+.emoji-library,
+.emoji-library-header,
+.emoji-library-footer,
+.emoji-grid-container,
+.emoji-grid,
+.emoji-grid-note,
+.emoji-category-tabs,
+.emoji-category-tab {
+    box-shadow: none !important;
+    border-bottom: none !important;
+    border-top: none !important;
+    background-image: none !important;
+}
+
+/* Target pseudo-elements */
+.emoji-library::before,
+.emoji-library::after,
+.emoji-library-header::before,
+.emoji-library-header::after,
+.emoji-grid-container::before,
+.emoji-grid-container::after,
+.emoji-grid::before,
+.emoji-grid::after {
+    display: none !important;
+    content: none !important;
+    background: none !important;
+    box-shadow: none !important;
+    border: none !important;
+}
+
+/* Ensure the emoji library has a clean border */
+.emoji-library {
+    border: 1px solid var(--input-border) !important;
+    background-color: var(--secondary-bg) !important;
+}
+
+/* Override any potential black bar styles */
+#emoji-grid-container {
+    border: none !important;
+    background: transparent !important;
+}
+
+/* Ensure emoji grid note has no borders or shadows */
+.emoji-grid-note {
+    border-left: 2px solid var(--special-color) !important;
+    border-right: none !important;
+    border-top: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important;
+}
+
+/* Force all elements to have transparent backgrounds */
+.emoji-library *,
+.emoji-grid-container * {
+    background-color: transparent !important;
+    box-shadow: none !important;
+}
+
+/* Ensure no borders on emoji buttons */
+.emoji-button {
+    border: 1px solid var(--input-border) !important;
+    box-shadow: none !important;
+}

index.html

@@ -6,6 +6,7 @@
     <title>Parseltongue 2.0 - LLM Payload Crafter</title>
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/notification.css">
+    <link rel="stylesheet" href="css/no-black-bar.css">
     <!-- Vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <!-- Font Awesome for icons -->
@@ -15,7 +16,7 @@
     <div id="app" class="container">
         <header>
             <div class="logo">
-                <h1>🐍 Parseltongue</h1>
+                <h1>🐉️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️︎︎️️️️︎︎︎️️️️️︎︎︎️︎︎︎️️️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎️️︎️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎︎️︎️︎︎️️️︎️︎︎️︎︎︎️︎️︎️︎︎️️️︎︎️︎︎︎︎︎️︎️︎︎︎︎️︎︎️︎︎️️︎︎︎️︎︎︎️︎️︎️︎︎︎️︎︎︎︎️︎️️️︎︎︎️︎️️️︎︎︎️︎️️️︎︎️︎︎️️︎︎︎️︎︎️️️️︎️︎️︎️️︎︎️︎︎︎️︎️︎︎️️️︎️︎︎️︎️︎︎︎︎︎️︎︎️️︎︎︎️︎︎️︎︎️︎️︎︎️️️︎︎️︎️️︎︎️︎️️️️️︎︎︎︎️️️️️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎​ P4RS3LT0NGV3</h1>
             </div>
             <div class="actions">
                 <button
@@ -81,16 +82,16 @@
                     </div>
 
                     <!-- Emoji Library Section -->
-                    <div class="emoji-library">
-                        <div class="emoji-library-header">
+                    <div class="emoji-library" style="box-shadow: none !important; border: 1px solid var(--input-border) !important; background-image: none !important;">
+                        <div class="emoji-library-header" style="box-shadow: none !important; border: none !important; background-image: none !important;">
                             <div class="emoji-library-title">
                                 <h3><i class="fas fa-icons"></i> Choose an Emoji</h3>
                             </div>
                         </div>
                         <!-- Emoji grid container - this MUST have id="emoji-grid-container" -->
-                        <div id="emoji-grid-container" class="emoji-grid-container">
+                        <div id="emoji-grid-container" class="emoji-grid-container" style="box-shadow: none !important; border: none !important; background-image: none !important;">
                             <!-- Dynamic content will be inserted here by JavaScript -->
-                            <div class="emoji-grid">
+                            <div class="emoji-grid" style="box-shadow: none !important; border: none !important; background-image: none !important;">
                                 <!-- Common emojis as fallback -->
                                 <button class="emoji-button" onclick="app.selectEmoji('😀')">😀</button>
                                 <button class="emoji-button" onclick="app.selectEmoji('😂')">😂</button>
@@ -104,7 +105,7 @@
                                 <button class="emoji-button" onclick="app.selectEmoji('🐍')">🐍</button>
                             </div>
                         </div>
-                        <div class="emoji-library-footer" v-if="selectedEmoji">
+                        <div class="emoji-library-footer" v-if="selectedEmoji" style="box-shadow: none !important; border: none !important; background-image: none !important;">
                             <div class="selected-emoji-info">
                                 <span class="selected-emoji">{{ selectedEmoji }}</span>
                                 <span class="selected-emoji-label">Last selected</span>

js/app.js

@@ -901,13 +901,19 @@ window.app = new Vue({
                 return;
             }
             
-            // Force container to be completely visible
-            container.style.cssText = 'display: block !important; visibility: visible !important; min-height: 300px;';
+            // Force container to be completely visible and remove black bars
+            container.style.cssText = 'display: block !important; visibility: visible !important; min-height: 300px; box-shadow: none !important; border: none !important; background-image: none !important;';
             
-            // Make sure parent containers are visible too
+            // Make sure parent containers are visible too and have no black bars
             const emojiLibrary = document.querySelector('.emoji-library');
             if (emojiLibrary) {
-                emojiLibrary.style.cssText = 'display: block !important; visibility: visible !important;';
+                emojiLibrary.style.cssText = 'display: block !important; visibility: visible !important; box-shadow: none !important; border: 1px solid var(--input-border) !important; background-image: none !important;';
+            }
+            
+            // Remove any black bars from emoji library header
+            const emojiLibraryHeader = document.querySelector('.emoji-library-header');
+            if (emojiLibraryHeader) {
+                emojiLibraryHeader.style.cssText = 'box-shadow: none !important; border: none !important; background-image: none !important;';
             }
             
             // Clear any existing content to avoid duplication

js/emojiLibrary.js

@@ -455,10 +455,14 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
     // Clear container
     container.innerHTML = '';
     
+    // Apply styles to container to prevent black bars
+    container.style.cssText = 'box-shadow: none !important; border: none !important; background-image: none !important;';
+    
     // Create grid note
     const gridNote = document.createElement('div');
     gridNote.className = 'emoji-grid-note';
     gridNote.innerHTML = '<i class="fas fa-magic"></i> Click any emoji to automatically copy your hidden message';
+    gridNote.style.cssText = 'box-shadow: none !important; border-bottom: none !important; border-top: none !important; border-right: none !important; background-image: none !important;';
     container.appendChild(gridNote);
     
     // Create category tabs
@@ -482,6 +486,7 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
     // Create emoji grid with enforced styling
     const gridContainer = document.createElement('div');
     gridContainer.className = 'emoji-grid';
+    gridContainer.style.cssText = 'box-shadow: none !important; border-bottom: none !important; border-top: none !important; background-image: none !important;';
     
     // Combine all emojis for a larger selection
     const allEmojis = [...window.emojiLibrary.EMOJI_LIST, ...window.emojiLibrary.ADDITIONAL_EMOJIS];