Add CSS best practices to CLAUDE.md and fix button visibility with proper specificity instead of !important

CLAUDE.md

@@ -114,11 +114,49 @@
 
 ## Development Workflow
 - ALWAYS run `npx biome format --write .` before committing to format all files
-- ALWAYS run `npx biome check .` to catch syntax errors and linting issues  
+- ALWAYS run `npx biome check .` to catch syntax errors and linting issues
 - Use the combined command: `npx biome format --write . && npx biome check .`
 - If biome check fails, fix the issues before proceeding with commit/push
 - This prevents breaking production with syntax errors like missing parentheses
 
+## CSS and Styling Standards
+**CRITICAL: NEVER use !important in CSS**
+
+- ❌ **NEVER** use `!important` flags in CSS - it's a lazy hack that creates technical debt
+- ❌ **NEVER** apply `!important` to fix styling issues - always find the root cause
+- ✅ **ALWAYS** use proper CSS specificity (more specific selectors win)
+- ✅ **ALWAYS** investigate WHY styles aren't applying before adding rules
+- ✅ **ALWAYS** use scoped selectors (e.g., `dialog#my-modal .my-class`)
+- ✅ **ALWAYS** understand the cascade and inheritance before making changes
+
+**Why !important is bad:**
+- Makes CSS unmaintainable and impossible to override later
+- Hides the real problem instead of fixing it
+- Creates cascading issues where more !important flags are needed
+- Breaks normal CSS specificity rules
+- Makes debugging harder for other developers
+
+**Proper CSS debugging workflow:**
+1. Use browser DevTools to inspect the element
+2. Check which styles are being applied and where they come from
+3. Check which styles are being overridden and why
+4. Increase specificity properly (more specific selector, not !important)
+5. Verify the fix works across all contexts
+
+**Example of WRONG approach:**
+```css
+.my-button {
+  background: blue !important;  /* ❌ WRONG - lazy hack */
+}
+```
+
+**Example of CORRECT approach:**
+```css
+dialog#my-modal .my-button {
+  background: blue;  /* ✅ CORRECT - specific selector */
+}
+```
+
 ## Makefile Commands
 - `make help` - Show all available commands
 - `make format` - Format all files with biome

public/src/uncloseai-modal-builtin.css

@@ -834,26 +834,25 @@ dialog#tts-modal {
   gap: 4px;
 }
 
-/* Code block styles */
-.uncloseai-code-copy-btn {
-  background: rgba(0, 0, 0, 0.6) !important;
-  color: white !important;
-  border: 1px solid rgba(255, 255, 255, 0.3) !important;
-  padding: 4px 8px !important;
-  border-radius: 4px !important;
-  font-size: 14px !important;
-  cursor: pointer !important;
-  opacity: 0.9 !important;
-  transition: all 0.2s !important;
-  white-space: nowrap !important;
-  display: inline-block !important;
-  visibility: visible !important;
-  pointer-events: auto !important;
+/* Code block styles - scoped to modal for specificity */
+dialog#uncloseai-embedded-modal .uncloseai-code-copy-btn {
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 0.2s;
+  white-space: nowrap;
+  display: inline-block;
+  visibility: visible;
 }
 
-.uncloseai-code-copy-btn:hover {
-  opacity: 1 !important;
-  background: rgba(0, 0, 0, 0.8) !important;
+dialog#uncloseai-embedded-modal .uncloseai-code-copy-btn:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.8);
 }
 
 /* Message action buttons */

public/src/uncloseai-modal-pico.css

@@ -904,26 +904,25 @@ dialog#tts-modal {
   gap: 4px;
 }
 
-/* Code block styles */
-.uncloseai-code-copy-btn {
-  background: rgba(0, 0, 0, 0.6) !important;
-  color: white !important;
-  border: 1px solid rgba(255, 255, 255, 0.3) !important;
-  padding: 4px 8px !important;
-  border-radius: 4px !important;
-  font-size: 14px !important;
-  cursor: pointer !important;
-  opacity: 0.9 !important;
-  transition: all 0.2s !important;
-  white-space: nowrap !important;
-  display: inline-block !important;
-  visibility: visible !important;
-  pointer-events: auto !important;
+/* Code block styles - scoped to modal for specificity */
+dialog#uncloseai-embedded-modal .uncloseai-code-copy-btn {
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 0.2s;
+  white-space: nowrap;
+  display: inline-block;
+  visibility: visible;
 }
 
-.uncloseai-code-copy-btn:hover {
-  opacity: 1 !important;
-  background: rgba(0, 0, 0, 0.8) !important;
+dialog#uncloseai-embedded-modal .uncloseai-code-copy-btn:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.8);
 }
 
 /* Message action buttons */