frontend: standardize base styles and color scheme, rework chat input section

frontend/src/assets/main.css

@@ -13,6 +13,14 @@ main {
   overflow: auto;
 }
 
+main section {
+  margin: 1em;
+  padding: 1em;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background-color: var(--color-surface);
+}
+
 .main-sidebar {
   height: 100dvh;
   display: flex;
@@ -37,17 +45,53 @@ a {
   padding: 3px;
 }
 
-button {
-  color: inherit;
-  background-color: var(--color-background-soft);
+button, .button {
+  color: var(--color-text);
+  background-color: var(--color-surface-strong);
+  padding: 0.6em;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
 }
 
-button {
+button.hollow, .button.hollow {
+  background: none;
+  border: none;
+}
+
+button.hollow:hover {
+  border: none;
+}
+
+button:hover {
+  color: var(--color-heading);
   border-color: var(--color-border-hover);
 }
 
+button.hollow.primary { color: var(--color-primary); }
+button.hollow.error { color: var(--color-error); }
+
+input, textarea, select {
+  font-size: inherit;
+  padding: 0.6em;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  background-color: var(--color-surface-input);
+  border-radius: var(--border-radius);
+}
+
+input:hover, textarea:hover, select:hover {
+  border: 1px solid var(--color-border-hover);
+}
+
+input:focus, textarea:focus, select:focus {
+  outline: none;
+  border: 1px solid var(--color-primary);
+}
+
+input:disabled, textarea:disabled, select:disabled {
+  background-color: var(--color-surface);
+}
+
 .with-sidebar-expanded .when-sidebar-collapsed {
   display: none;
 }