Chat view: glowing-pill composer, themed bubbles, no copy buttons

- Merge input + send into one rounded "pill" with an italic serif placeholder
and a ➤ icon send button; both glow in the active Shard's color.
- Theme the chat bubbles (serif, translucent dark bot bubbles, accent-tinted
user bubbles).
- Remove all share/copy/copy-all controls (Chatbot buttons=[] + CSS safety net).
- Fix latent theming bug: chat_view was missing elem_id="chat-view", so --accent
was undefined and accent styling silently fell back. Add the id, make the
per-Shard skin win with !important (Gradio injects css= after it), and use
color-mix() for accent alpha (the var(--x)NN hex-alpha shorthand is invalid).
The whole conversation panel now tints to each Shard.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -350,7 +350,9 @@ def _build_skin(shard):
     chat panel by setting --accent CSS variables on #chat-view."""
     return f"""
 <style>
-#chat-view {{ --accent: {shard['color']}; --accent2: {shard['accent']}; }}
+/* !important so this wins over the default in the css= block, which Gradio
+   injects later in the DOM (equal specificity would otherwise lose). */
+#chat-view {{ --accent: {shard['color']} !important; --accent2: {shard['accent']} !important; }}
 </style>
 <div class="shard-banner" style="--c:{shard['color']};--c2:{shard['accent']};">
   <div class="shard-name">{shard['name']}</div>
@@ -599,16 +601,66 @@ CSS = """
 
 #orrery-wrap { display:flex; align-items:center; justify-content:center;
     min-height:460px; overflow:visible; padding:14px 0; }
-#shard-chat { border:1px solid var(--accent)55 !important; box-shadow:0 0 26px var(--accent)22 !important; }
+#shard-chat {
+    border:1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
+    box-shadow:0 0 26px color-mix(in srgb, var(--accent) 14%, transparent) !important;
+    background:rgba(10,9,24,0.55) !important;
+    font-family:'Georgia','Times New Roman',serif;
+}
+/* strip Gradio's per-message + toolbar copy / share / copy-all buttons */
+#shard-chat .icon-button-wrapper,
+#shard-chat .message-buttons,
+#shard-chat button[title*="opy" i],
+#shard-chat button[title*="hare" i] { display:none !important; }
+
+/* themed chat bubbles */
+#shard-chat .message, #shard-chat .bot, #shard-chat .user {
+    font-family:'Georgia',serif !important; color:#ece9f7 !important;
+    border-radius:14px !important;
+}
+#shard-chat .bot, #shard-chat .message.bot {
+    background:rgba(20,18,42,0.85) !important;
+    border:1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
+}
+#shard-chat .user, #shard-chat .message.user {
+    background:color-mix(in srgb, var(--accent) 16%, rgba(20,18,42,0.85)) !important;
+    border:1px solid color-mix(in srgb, var(--accent) 32%, transparent) !important;
+}
+
+/* unified "glowing pill" composer (text field + send icon as one bar) */
+#composer {
+    display:flex !important; align-items:center; gap:6px; flex-wrap:nowrap !important;
+    margin-top:10px; padding:5px 6px 5px 18px;
+    background:rgba(12,11,26,0.72);
+    border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+    border-radius:999px;
+    box-shadow:0 0 18px color-mix(in srgb, var(--accent) 16%, transparent);
+    transition:box-shadow .3s ease, border-color .3s ease;
+}
+#composer:focus-within {
+    border-color:var(--accent);
+    box-shadow:0 0 28px color-mix(in srgb, var(--accent) 38%, transparent);
+}
+#composer #user-box { flex:1 1 auto !important; min-width:0 !important; }
+#composer #user-box textarea {
+    background:transparent !important; border:none !important; box-shadow:none !important;
+    color:#f1eef9 !important; font-family:'Georgia',serif; font-size:1rem;
+    padding:6px 4px !important; resize:none;
+}
+#user-box textarea::placeholder { color:#9a95bd !important; font-style:italic; }
 #send-btn {
-    background:linear-gradient(180deg,var(--accent),var(--accent2)) !important;
-    color:#11111a !important; border:none !important; font-weight:600;
+    flex:0 0 auto !important; width:42px !important; min-width:42px !important;
+    height:42px !important; padding:0 !important; border-radius:50% !important;
+    background:linear-gradient(145deg,var(--accent),var(--accent2)) !important;
+    color:#11111a !important; border:none !important;
+    font-size:1.05rem; line-height:1; display:flex; align-items:center; justify-content:center;
+    box-shadow:0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
+    transition:transform .2s ease, box-shadow .2s ease;
 }
-#user-box textarea {
-    border:1px solid var(--accent)55 !important;
-    background:#14122a !important; color:#ece9f7 !important;
+#send-btn:hover {
+    transform:scale(1.08);
+    box-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
 }
-#user-box textarea::placeholder { color:#8a85ad !important; }
 #travel-btn {
     flex:0 0 auto !important; width:fit-content !important; min-width:0 !important;
     background:#140f24cc !important; border:1px solid var(--accent)66 !important;
@@ -672,7 +724,7 @@ with gr.Blocks(title="Cosmere Codex") as demo:
         gr.HTML(build_cosmos_scene())
 
     # -------------------------- CONVERSATION VIEW --------------------------- #
-    with gr.Column(visible=False) as chat_view:
+    with gr.Column(visible=False, elem_id="chat-view") as chat_view:
         with gr.Row():
             travel_btn = gr.Button("✦ Travel to another system", elem_id="travel-btn", scale=1)
         shard_skin = gr.HTML()
@@ -684,16 +736,18 @@ with gr.Blocks(title="Cosmere Codex") as demo:
                     elem_id="shard-chat",
                     height=460,
                     show_label=False,
+                    buttons=[],          # no share / copy / copy-all controls
                 )
-                with gr.Row():
+                with gr.Row(elem_id="composer"):
                     user_box = gr.Textbox(
                         elem_id="user-box",
                         placeholder="Speak to the voice…",
                         show_label=False,
+                        container=False,
                         scale=5,
                         autofocus=True,
                     )
-                    send_btn = gr.Button("Send", elem_id="send-btn", scale=1)
+                    send_btn = gr.Button("➤", elem_id="send-btn", scale=0, min_width=48)
 
     gr.HTML(
         """