Add new conversation button

internal/service/static/css/main.css

@@ -999,6 +999,9 @@ body {
 }
 
 .conversations-panel__search {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
   padding: var(--s-1) var(--s1);
   border-bottom: 1px solid var(--color-border-light);
   flex-shrink: 0;
@@ -1006,7 +1009,7 @@ body {
 
 .conversations-search {
   display: block;
-  width: 100%;
+  flex: 1;
   height: var(--s2);
   padding: 0 var(--s-1);
   font-family: inherit;
@@ -1023,6 +1026,40 @@ body {
   outline-offset: 2px;
 }
 
+/* The new-conversation button pairs with the search input: the
+   same height, the same border, one icon. */
+.conversations-new {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--s2);
+  height: var(--s2);
+  padding: 0;
+  font-family: inherit;
+  color: var(--color-text-muted);
+  background: transparent;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+.conversations-new svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+.conversations-new:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .conversations-new:hover {
+    color: var(--color-text);
+    border-color: var(--color-text-muted);
+  }
+}
+
 .conversations-panel__list {
   flex: 1;
   overflow-y: auto;