Chat bubbles, icons for chats, more vivid and distinct colour tags

- Bubbles: own messages right-aligned in their own colour, agent answers left.
- Chat icons (22, validated on the server), shown in list, top bar, project page.
- Colour tags: eight fixed hues (new: pink) with theme-matched lightness and the
  highest chroma sRGB allows; stronger background tint.

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

web/src/styles.css

@@ -547,15 +547,45 @@ button.session-group:hover {
   border: 1px solid var(--bg2);
   line-height: 0;
 }
+/* Chat bubbles: the agent's answers on the left, your messages on the right in another colour. */
 .msg-user {
-  background: var(--bg1);
-  border: 1px solid var(--bg2);
-  border-radius: var(--radius);
-  padding: 8px 12px;
+  background: color-mix(in srgb, var(--accent) 26%, var(--bg1));
+  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  border-radius: 18px 4px 18px 18px;
+  color: var(--fg0);
+  padding: 9px 14px;
   white-space: pre-wrap;
   word-break: break-word;
   position: relative;
 }
+.msg.user-msg {
+  width: fit-content;
+  max-width: min(88%, 780px);
+  margin-left: auto;
+}
+.msg.bubble.agent {
+  width: fit-content;
+  max-width: 100%;
+  padding: 10px 14px;
+  background: var(--bg1);
+  border: 1px solid var(--bg2);
+  border-radius: 4px 18px 18px 18px;
+}
+.msg.bubble.agent > :last-child {
+  margin-bottom: 0;
+}
+.chat-pane[data-color] .msg-user {
+  background: color-mix(in srgb, var(--tag) 38%, var(--bg1));
+  border-color: color-mix(in srgb, var(--tag) 70%, transparent);
+}
+.chat-pane[data-color] .msg.bubble.agent {
+  background: color-mix(in srgb, var(--tag) 7%, var(--bg1));
+}
+@media (max-width: 700px) {
+  .msg.user-msg {
+    max-width: 94%;
+  }
+}
 /* User messages are Markdown too; the line breaks come from keepLineBreaks. */
 .msg-user .markdown {
   white-space: normal;
@@ -4687,41 +4717,64 @@ span.chat-tab > button {
 }
 
 /* --- colour tags of chats ------------------------------------------------------
- * The tag is a name; the colour comes from the active theme (--red, --accent, …),
- * the background is mixed into --bg0, so every theme (light or dark) stays readable. */
-[data-color="red"] { --tag: var(--red); }
-[data-color="orange"] { --tag: var(--accent2, var(--red)); }
-[data-color="yellow"] { --tag: var(--accent, var(--green)); }
-[data-color="green"] { --tag: var(--green); }
-[data-color="aqua"] { --tag: var(--aqua); }
-[data-color="blue"] { --tag: var(--blue); }
-[data-color="purple"] { --tag: var(--purple); }
+ * The tag is a name. Eight clearly separated hues, drawn with a lightness that fits the theme
+ * (light or dark). Browsers without relative colours use the theme's own colours.
+ * Backgrounds are mixed into --bg0, so text stays readable. */
+[data-color="red"] { --tag: var(--red); --tag-h: 18; --tag-c: 0.14; }
+[data-color="orange"] { --tag: var(--accent2, var(--red)); --tag-h: 57; --tag-c: 0.14; }
+[data-color="yellow"] { --tag: var(--accent, var(--green)); --tag-h: 104; --tag-c: 0.12; }
+[data-color="green"] { --tag: var(--green); --tag-h: 147; --tag-c: 0.17; }
+[data-color="aqua"] { --tag: var(--aqua); --tag-h: 190; --tag-c: 0.1; }
+[data-color="blue"] { --tag: var(--blue); --tag-h: 250; --tag-c: 0.12; }
+[data-color="purple"] { --tag: var(--purple); --tag-h: 297; --tag-c: 0.135; }
+[data-color="pink"] { --tag: var(--red); --tag-h: 338; --tag-c: 0.17; }
+@supports (color: oklch(from red l c h)) {
+  /* Lightness 0.76 on dark and 0.60 on light themes (from the theme's background), chroma per hue
+   * as high as sRGB allows at both – vivid and still clearly different from each other. */
+  [data-color] {
+    --tag: oklch(from var(--bg0) calc(0.6 + 0.16 * clamp(0, (0.5 - l) * 20, 1)) var(--tag-c) var(--tag-h));
+  }
+}
 
 .chat-pane[data-color] {
-  background: color-mix(in srgb, var(--tag) 9%, var(--bg0));
+  background: color-mix(in srgb, var(--tag) 16%, var(--bg0));
+}
+.chat-pane[data-color] .composer-wrap {
+  background: color-mix(in srgb, var(--tag) 16%, var(--bg0));
 }
 .topbar[data-color] {
-  border-bottom: 2px solid var(--tag);
-  background: color-mix(in srgb, var(--tag) 14%, var(--bg0));
+  border-bottom: 3px solid var(--tag);
+  background: color-mix(in srgb, var(--tag) 28%, var(--bg0));
 }
 .session-item[data-color] {
-  box-shadow: inset 3px 0 0 var(--tag);
+  box-shadow: inset 4px 0 0 var(--tag);
 }
 .color-badge {
-  padding: 0 7px;
+  padding: 0 8px;
   border-radius: 999px;
   color: var(--fg0);
-  background: color-mix(in srgb, var(--tag) 30%, var(--bg1));
-  border: 1px solid color-mix(in srgb, var(--tag) 60%, transparent);
+  background: color-mix(in srgb, var(--tag) 42%, var(--bg1));
+  border: 1px solid color-mix(in srgb, var(--tag) 75%, transparent);
+}
+.chat-icon {
+  margin-right: 5px;
+  vertical-align: -2px;
+}
+[data-color] .chat-icon {
+  color: var(--tag);
+}
+.color-badge .chat-icon {
+  color: var(--fg0);
 }
 .color-swatches {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   padding: 6px 10px;
 }
 .color-swatches .swatch {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   padding: 0;
   border-radius: 50%;
   background: var(--tag);
@@ -4731,8 +4784,28 @@ span.chat-tab > button {
   border-color: var(--fg0);
   box-shadow: 0 0 0 2px var(--bg1), 0 0 0 4px var(--tag);
 }
-.chat-pane[data-color] .composer-wrap {
-  background: color-mix(in srgb, var(--tag) 9%, var(--bg0));
+.icon-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+  gap: 4px;
+  padding: 4px 10px 8px;
+  max-width: 280px;
+}
+.icon-choice {
+  padding: 5px;
+  line-height: 0;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--fg2);
+}
+.icon-choice:hover {
+  background: var(--bg2);
+}
+.icon-choice.on {
+  color: var(--tag, var(--accent));
+  border-color: var(--tag, var(--accent));
+  background: var(--bg2);
 }
 
 /* --- check badge of a turn ------------------------------------------------------ */