adjusted before & after

app.py

@@ -18,8 +18,9 @@ css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;
       "margin-right:10px}.bot.svelte-a99nd8.svelte-a99nd8{" \
       "padding-left:15px;margin-left:10px}.bot.svelte-a99nd8.svelte-a99nd8::before," \
       ".user.svelte-a99nd8.svelte-a99nd8::after{" \
-      "content:"";width:10px;height:10px;position:absolute;bottom:0;background-color:#fff}.bot.svelte-a99nd8.svelte" \
-      "-a99nd8::before{left:-10px}.user.svelte-a99nd8.svelte-a99nd8::after{right:-10px}textarea{" \
+      "content:\"\";width:10px;height:10px;position:absolute;bottom:0;border:1px solid var(" \
+      "--color-border-accent);background-color:var(--color-accent-soft)}.bot.svelte-a99nd8.svelte-a99nd8::before{" \
+      "left:-10px;border-right:0}.user.svelte-a99nd8.svelte-a99nd8::after{right:-10px;border-left:0}textarea{" \
       "background-color:#fff}#component-48,#component-51{position:absolute;left:50%;top:50%;transform:translateX(" \
       "-50%) translateY(-50%);width:50%;height:50vh;padding:80px 20px 20px;background-color:#fff;border:1px solid " \
       "#002366}#component-49{position:initial}#component-50,#component-62{" \

style.css

@@ -52,20 +52,23 @@
 }
 
 .bot.svelte-a99nd8.svelte-a99nd8::before, .user.svelte-a99nd8.svelte-a99nd8::after {
-    content: "";
+    content: \"\";
     width: 10px;
     height: 10px;
     position: absolute;
     bottom: 0;
-    background-color: #fff;
+    border: 1px solid var(--color-border-accent);
+    background-color: var(--color-accent-soft);
 }
 
 .bot.svelte-a99nd8.svelte-a99nd8::before {
     left: -10px;
+    border-right: 0;
 }
 
 .user.svelte-a99nd8.svelte-a99nd8::after {
     right: -10px;
+    border-left: 0;
 }
 
 textarea {