2 files changed, 25 insertions, 2 deletions
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 0c8eeec..d77c29a 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -59,4 +59,13 @@
     content: '.';
     visibility: hidden;
   }
+  /* Without the global selector, the Svelte CSS compiler will see this as
+   * unused, and purge it from the output. However, this is "plausibly used"
+   * because it may occur in renderedBody.
+   */
+  :global(.message-body blockquote) {
+    border-left: 0.25rem solid lightgrey;
+    margin-left: 0.5rem;
+    padding-left: 0.5rem;
+  }
 </style>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 83a82a9..581682e 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -16,7 +16,21 @@
   <span class="chip variant-soft sticky top-o left-0">
     @{name}:
   </span>
-  {#each messages as { id, at, body }}
-    <Message {id} {at} {body} editable={ownMessage} />
+  {#each messages as message}
+    <Message {...message} editable={ownMessage} />
   {/each}
 </div>
+
+<style>
+  .own-message {
+    background-color: rgb(32, 42, 74);
+  }
+  /* Honestly, I don't love scoping styles per component, and this is a great
+   * example of why. MessageRuns know if they're own-message, but Messages in
+   * them need to get a style based on that fact. I don't wanna bucket-brigade
+   * that fact into the Message, when it's a pure CSS concern.
+   */
+  .own-message :global(*) {
+    color: rgb(198, 198, 198);
+  }
+</style>