More chat icons; message menu inside the bubble

- 18 more icons (gamepad, computer, food, ...) with a test that keeps the
  server whitelist and the client picker identical.
- The ⋯ menu of a message moves into the bubble foot (next to the time); its
  popup opens upwards inside the bubble and is limited to the bubble's width.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/src/styles.css

@@ -524,28 +524,50 @@ button.session-group:hover {
   position: relative;
 }
 /* Message actions: hover on desktop, faintly visible on touch. */
-.msg-menu {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  z-index: 3;
-  opacity: 0;
+/* The ⋯ menu sits in the foot of the bubble (next to the time); its popup opens upwards inside
+ * the bubble and never gets wider than the bubble. Faint on touch, appears on hover on desktop. */
+.msg-foot {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+}
+.msg-foot .msg-time {
+  margin-top: 0;
+  flex: 1;
+}
+.msg-menu.menu-pop {
+  position: static; /* the popup is placed against the bubble */
+  flex-shrink: 0;
+  opacity: 0.45;
   transition: opacity 0.12s;
 }
-.msg:hover > .msg-menu,
+.msg:hover .msg-menu,
 .msg-menu:focus-within,
 .msg-menu[open] {
   opacity: 1;
 }
-@media (pointer: coarse) {
-  .msg-menu {
-    opacity: 0.5;
-  }
-}
-.msg-menu > summary {
-  background: var(--bg1);
-  border: 1px solid var(--bg2);
+.msg-menu.menu-pop > summary {
+  padding: 0 4px;
+  border-radius: 6px;
   line-height: 0;
+  background: transparent;
+  border: none;
+}
+.msg-menu.menu-pop > summary:hover {
+  background: color-mix(in srgb, var(--fg1) 14%, transparent);
+}
+.msg-menu.menu-pop .menu-pop-body {
+  top: auto;
+  bottom: 30px;
+  right: 8px;
+  z-index: 30;
+  min-width: 0;
+  width: max-content;
+  max-width: max(calc(100% - 16px), 11rem);
+}
+.msg-menu.menu-pop .menu-pop-body a {
+  white-space: normal;
 }
 /* Chat bubbles: the agent's answers on the left, your messages on the right in another colour. */
 .msg-user {
@@ -608,7 +630,7 @@ button.session-group:hover {
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-.msg-user .msg-time {
+.msg-user .msg-foot .msg-time {
   text-align: right;
 }
 .msg-user img {