Update styles

app.py

@@ -114,6 +114,7 @@ RULES:
 - Only use names from the "Registered emojis" list. Never guess or invent names.
 - Never refer to or describe an emoji in text (e.g. "here's a", "have this emoji"). \
   Insert emoji only as a decorative inline addition to add meaning.
+- Never reply with a single emoji.
 - When the user asks for a new emoji/sticker/icon, call the generate_emoji tool \
   with a fitting name and description. Do not ask the user for the name or description.
 - After the tool call your job is done — the system handles the follow-up flow.

style.css

@@ -2,16 +2,26 @@
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-html, body, .gradio-container, #component-0, .app {
+html, body {
     width: 100% !important;
     height: 100vh !important;
     margin: 0 !important;
     padding: 0 !important;
+    background: #0c0e14 !important; /* dark fill outside the shell */
+}
+
+.gradio-container, #component-0, .app {
+    width: 100% !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #0c0e14 !important;
 }
 
 .gradio-container > .main, .app > .main {
     height: 100vh !important;
     padding: 0 !important;
+    background: #0c0e14 !important;
 }
 
 /* Hide all Gradio chrome we don't need */
@@ -62,6 +72,10 @@ footer, .svelte-1ipelgc, .built-with { display: none !important; }
     font-size: 16px !important;
     background: transparent !important;
     border: none !important;
+    color: #f5f6fa !important; /* fix: was inheriting gray */
+}
+#info-btn svg {
+    stroke: #f5f6fa !important; /* fix: force white stroke on the SVG icon */
 }
 #info-btn:hover {
     background: transparent !important;
@@ -104,13 +118,15 @@ footer, .svelte-1ipelgc, .built-with { display: none !important; }
 #info-close:hover { color: #f5f6fa; background: #252a38; }
 
 #info-content {
-    color: #e4e6ed;
+    color: #f5f6fa !important; /* fix: was gray, now white */
     font-size: 14px;
     line-height: 1.6;
     max-width: 600px;
     margin: 0 auto;
     padding-top: 40px;
 }
+/* Gradio Markdown renders into nested divs — cascade the color down */
+#info-content * { color: inherit; }
 #info-content h2 {
     font-size: 20px;
     font-weight: 600;
@@ -194,18 +210,20 @@ footer, .svelte-1ipelgc, .built-with { display: none !important; }
 
 #top-row {
     display: flex;
-    align-items: stretch;
+    align-items: stretch; /* makes emoji button fill the composer height */
     gap: 6px;
     width: 100%;
 }
 
 #top-row > div:has(#composer) {
-    flex: 9 1 0%;
+    flex: 1 1 auto;
     min-width: 0;
 }
 
 #top-row > div:has(#emoji-pick-btn) {
-    flex: 0 0 50px;
+    flex: 0 0 44px;
+    display: flex !important;      /* fix: ensure the wrapper is also flex */
+    align-items: stretch !important;
     margin: 0 !important;
     padding: 0 !important;
 }
@@ -269,13 +287,17 @@ footer, .svelte-1ipelgc, .built-with { display: none !important; }
 }
 .icon-btn:active { transform: scale(0.96); }
 
-/* ── Emoji button (right of composer, full height) ── */
+/* ── Emoji button — fills the flex cell, icon perfectly centered ── */
 #emoji-pick-btn {
-    width: 100% !important;
+    width: 44px !important;
     height: 100% !important;
     min-height: 40px !important;
     box-sizing: border-box !important;
     font-size: 20px !important;
+    line-height: 1 !important;        /* fix: remove any inherited line-height offset */
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
 /* ── Bottom send/clear row, 50/50 ── */